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 the 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: https://cloudinary.com/documentation/react_image_manipulation#image_placeholders

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