🚀 We're live on Product Hunt right now 🚀

Image Placeholders as it should be

IT'S FREE !
TwicPics Placeholders is a free service for web designers and developers providing dynamic placeholder images on the fly.
Trusted by the best companies
Crafted by the team behind TwicPics

The Missing Piece Of Your Responsive Development

Our tool allows you to save a lot of time on the development of your mockups. Say goodbye to old-school services and endless manual resizings, your placeholders are now reactive, responsive and let you know what size they are!

Pixel Perfect

Your placeholders are automatically sized to the pixel with displayed dimensions staying in sync.

CSS Driven

TwicPics knows CSS. It will determine when, where and how to resize your placeholders.

Smart API

The URL-based API offers all the transformations you need to generate custom placeholders.

100% free - No account needed

How it works?

How it works?

Documentation

Overview

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.

Getting started

First, add the TwicPics Script to your page :

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

Basics

Then, whenever you want the Script to handle a placeholder, simply mark your image element with the twic class and set the data-src attribute to placeholder:auto:

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

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

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:

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

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

Please note how the background image placeholder is specified in the data-background attribute rather than in CSS.

Responsive Placeholders

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:

.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 class="twic" data-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 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.

Placeholder API to the rescue

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:

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

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:

“As developers since the early days of the web, we were losing a lot of time with placeholders when building websites mockups.We scouted for services that would alleviate the pain but none of them addressed the problem the way we wanted.”
Julian, TwicPics co-founder
Former W3C member, Former maintainer of the XHR specification
(He is also the guy who rewrote  a third of jQuery)
testimonials

Why do our clients recommend us?

This is what clients using our 100% on-demand image resizing solution think

"Within our project context, TwicPics provided exactly the right quality, flexibility and support - leaving the competition far behind."
Tim Benniks
Tim Benniks
Dir. of web devElopment, Valtech
"The TwicPics company offers an absolutely amazing image re-cropping product!"
Sacha Morad
Sacha Morard
CTO, Groupe LE Monde
"I was using a TwicPics competitor before I discovered them. The solution was tested and validated in a month and my bill is halved!"
Pierrick Boutruche
Pierrick Boutruche
CTO, Staycation
Simple, FAST, Powerful

Want The Same Power For Your Real Images?

woman jetpacktwicpics watermark
Placeholders by TwicPics - Save time with dynamic placeholder images. | Product Hunt Embed