Testing Placeholders

Learn to use TwicPics placeholders API to test your medias integration.

This section will guide you into using the placeholders API as a quality-control tool for your responsive designs.

Implementing placeholders

Whenever you want the Script to handle a placeholder, simply set the data-twic-src attribute to placeholder:auto:

<!-- with HTML attributes -->
<img data-twic-src="placeholder:auto" width="300" height="300" />

<!-- Same result with CSS -->
<img data-twic-src="placeholder:auto" style="width:300px; height:300px;" />

TwicPics will account for the DPR of the current device when computing the sizes of images. This means you might get different variant sizes from one device to another. For instance, you should get 600x600 placeholders if you are on a Retina screen.

You can also use placeholders as backgrounds:

<style>
  .bg {
    width: 300px;
    height: 300px;
    background-size: cover;
  }
</style>

<div class="bg" data-twic-background="url(placeholder:auto)"></div>

Note how the background image placeholder is specified in the data-twic-background attribute rather than in CSS.

Responsive Placeholders

So far, we have only seen static and rather simple examples. The true power of TwicPics lies in how it handles more complex responsive designs.

A common approach nowadays is to think with aspect ratio in mind. One popular solution is the "aspect ratio padding trick".

Let us see how you can leverage this technique with TwicPics:

.img-16-9 {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: calc(9 / 16 * 100%);
}

.img-16-9 > img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
}

<main>
  <figure class="img-16-9">
    <img data-twic-src="placeholder:auto" />
  </figure>
</main>

Your placeholder is now responsive while preserving the given aspect ratio. Note how it is dynamically resized if you change the width of your window or the orientation of your device.

Placeholder API to the rescue

You might have noticed that all the examples so far made use of placeholder:auto. The term "auto" stands for "automatic sizing with default colors".

The complete syntax for placeholders is as follows: placeholder:[<size>:]<color>. For instance: https://i.twic.pics/v1/placeholder:150x150:medium-violet-red

The Script understands this syntax fully:

<main>
  <figure class="img-16-9">
    <img data-twic-src="placeholder:deep-pink" />
  </figure>
</main>

Placeholders can also be used in production. For instance, using the same color for text and background generates a monochromatic placeholder: https://i.twic.pics/v1/placeholder:ccc/ccc‍. Even transparent placeholders are possible: https://i.twic.pics/v1/placeholder:transparent‍

The API offers many other features that you can find in the dedicated section of the documentation.

Here is a more complete example you can toy with at CodePen: