Dynamic Placeholders

Overview

TwicPics Placeholders offers a new way to generate placeholders for your mockups.

The TwicPics Script analyzes the CSS sizing context of your HTML elements and is DPR aware. TwicPics being 100% dynamic, your placeholders automatically adapt to any responsive behavior you have implemented in your page. Since the TwicPics Placeholders display their own size, they are the perfect tool to quality-control responsive designs.

Getting started

First, add the TwicPics Script to your page:

<script src="https://i.twic.pics/?v1" async></script>
If you already are a TwicPics customer, you can use your subdomain instead (i.e. https://<sub>.twic.pics/?v1 )

Basics

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.

By default, the Script will not take a DPR greater than 2 into consideration. You can alter this behavior. Check the documentation .

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:

responsive images

The All-In-One Toolbox For Your Images

The simplest, most powerful way to tackle responsive images.