> ## Documentation Index
> Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt
> Use this file to discover all available pages before exploring further.

# 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](react_image_transformations#image_placeholders).

If you're using our [URL-based transformations](image_transformations#transforming_media_assets_using_dynamic_urls) 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.

[//]: # (TBD - Migrate the code sandbox to StackBlitz)