Your placeholders are automatically sized to the pixel with displayed dimensions staying in sync.
TwicPics knows CSS. It will determine when, where and how to resize your placeholders.
The URL-based API offers all the transformations you need to generate custom placeholders.
TwicPics Placeholders offers a new way to generate placeholders images for your mockups.
Unlike other placeholder solutions, TwicPics dynamically generates placeholders that display their size.
TwicPics analyzes the CSS sizing context of your images target location and is DPR aware. TwicPics being 100% dynamic, your placeholders automatically adapt to any responsive behavior you have implemented in your page.
The generated placeholders are in SVG format and are lazy-loaded. Which means your pages stay lightweight and load quickly.
First, add the TwicPics Script to your page :
If you’re already a TwicPics customer, you can use your subdomain instead (i.e. https://sub.twic.pics/?v1)
Then, whenever you want the Script to handle a placeholder, simply set the data-twic-src attribute to placeholder:auto:
TwicPics will account for the DPR of the current device when computing the sizes of placeholders. This means you might see different sizes from one device to another. For instance, you should see a 600x600 placeholder if you're on a Retina screen.
By default, the Script will not take a DPR greater than 2 into consideration. This is what we recommend but you can alter this behavior, check the documentation.
TwicPics can also handle your background images in pretty much the same way:
Please note how the background image placeholder is specified in the data-twic-background attribute rather than in CSS.
So far, we have seen only static and rather simple examples. TwicPics demonstrates all of its power in the context of more complex responsive designs.
The purpose of a placeholder is obviously to reserve space for your images. A common approach nowadays is to think with aspect ratio in mind. One popular solution is the "aspect ratio padding trick".
Let's see how you can use this technique with TwicPics:
Your placeholder is now responsive while preserving the given aspect ratio. Note how it is dynamically resized if you change your window's width or change the orientation of your device.
Using this technique allows you to easily tackle art direction issues and to deliver jank-free page load. To learn more about Cumulative Layout Shift (CLS) and recent browser initiatives on this subject, we recommend that you read this article by Addy Osmani.
You might have noticed that all these examples above made use of the default: placeholder:auto. The term "auto" stands for "automatic sizing with default colors".
As you can guess, there's an API behind to fit your needs.
A placeholder follows the following syntax: placeholder:[<size>:]<color>
So that you can generate a static placeholder like this for example: https://i.twic.pics/v1/placeholder:150x150:medium-violet-red
Or combine the dynamic sizing behavior with custom colors:
Placeholders can also be useful in production since TwicPics can act as a SVG generator.
For example, by using the same color for text and background, it will render a unified colored placeholder: https://i.twic.pics/v1/placeholder:ccc/ccc
You can even generate a transparent placeholder like this: https://i.twic.pics/v1/placeholder:transparent
The API offers many other features and you will find the complete documentation here: https://www.twicpics.com/documentation/api-placeholders/.
Here is a more complete example at CodePen so you can toy around with everything: