Suggested transformation options for placeholder images/ LQIP

When implementing a responsive design, or a lazy-loading method to optimize how your images are loaded on your webpage, a common implementation choice is to use low-quality image placeholders or LQIPs.

The exact steps to do this will vary based on how your responsive images or lazy-loading is implemented. In each case, the idea is to load a low-quality copy of the image quickly, and then replace it with a higher-quality image later.

The use of LQIPs means that the user will see a visual indicator of the images that have not yet loaded. If a user quickly scrolls down the page, for example, they'll see the placeholders rather than seeing broken image tags or lots of blank space.

A simple missing image icon may be used in place of all images that weren't loaded yet but using Cloudinary's image transformation features it's easy to use a smaller copy of each image, making the placeholders blend seamlessly with the intended final images.

Some of Cloudinary's client-side libraries include this feature directly, and using our React library as an example, our Placeholder component allows you to choose placeholders to be used before the main image is loaded, see Image placeholders.

If you're using our URL-based transformations directly, there are several options that will provide LQIPs that load quickly and with a small file size. You can see some examples below to help you choose which is best for your own design.

The original asset for these examples is the "sample" image in the demo account. The sample image is 117 KB (864 x 576px): https://res.cloudinary.com/demo/image/upload/sample.jpg