If you run a Google search on LQIP you’ll see very few relevant articles, very little guidance, and definitely no Wikipedia articles. In this post, we’ll discuss some of the feedback on LQIP we have gathered from the community and suggest and open for conversation a few approaches based on the built-in capabilities of the Cloudinary service. Specifically, we’ll explain what LQIP are, where they are best used, and how you can leverage them to accelerate page loads and optimize user experience.
- Leverage HTML5's image attributes, such as
sizes, to make images responsive. That is, always trust the browser to make the right decision according to image densities, which actually results in a complete lack of control over such elements as Device Pixel Ratio (DPR). Given that different browsers treat
srcsetdifferently, it is very difficult to scale and deliver a consistent cross-browser experience. Also, applying inline HTML code to each and every image is a labor-intensive chore.
- Implement Google's HTTP Client Hints (server side), which were at some point touted as the Holy Grail of automation for image optimization strategies. Currently, Client Hints are supported by Chrome and Opera browsers only and thus not an ideal cross-browser option. We at Cloudinary are constantly monitoring new and exciting technologies and are certainly keeping an eye on Client Hints. As soon as they work on other major browsers, Client Hints will most likely become the new golden standard.
To learn more about responsive images and the process of adapting website images to multiple screen sizes, regardless of your favorite option, check out the free Cloudinary tool Responsive Image Breakpoints Generator.
Let's look at some of the options available for LQIP today:
- For responsive design and responsive images, displaying white space instead of image placeholders is not an option. Layout changes and content shifts are definitely detrimental to both user experience and performance. An alternative is generic image placeholders, but they don’t look tailored nor suggestive that content is still loading.
- A better alternative could a simple, solid-color image (perhaps based on the predominant color in the discovered palette) with a simple or gradient option to fill in while the main image preloads. Fun fact: Cloudinary automatically detects and maps out (even for advanced search) the color palette and the predominant colors so that you can perform such transformations on the fly.
- Use a Scalable Vector Graphics (SVG) object as the preview image, aka SQIP, as in the following code:
<img src=“sample.jpg” style="background-size: cover; background-image: url(data:image/svg+xml;base64,<svg text>);"
For the scope and purpose of this post, we’ll focus on LQIP only and not on their more exciting and snazzier sibling, SQIP (SVG image placeholders). Even though SQIP is definitely an elegant approach with a great user experience and an accurate representation of the original image at infinitely smaller payloads, it is not scalable, requiring preparation work, numerous resources, and processing time. We would recommend this article that covers the topic very well, in our opinion: https://jmperezperez.com/svg-placeholders/
The alternative we suggest is effortless and on-the-fly. It also achieves comparable results to the above. Take a scaled-up, tiny image that is compressed for quality, potentially also chroma subsampled, blurred or pixelated, for which adding an
f_auto parameter to the image URL would also deliver color blending, such as in a WebP format. To that you can then add color effects, such as grayscale, black and white, colorized, or various hues. Because Cloudinary supports URL-based parameters for instant manipulation of images and videos, all you need to do is upload any image and Cloudinary automatically performs all the transformations for you. Before you start, register for a free account on Cloudinary.
Here are a few examples:
Original image: 640 pixels wide, 40 KB, JPG formatURL:Java:React:Vue.js:Angular:.Net:Android:
The LQIP version: same size, compressed for quality, grayscale effect, optimized for WebP formatURL:Ruby:PHP:Python:Node.js:Java:JS:jQuery:React:Vue.js:Angular:.Net:Android:This image takes up only 2.17 KB in WebP format or 1.46 KB in JPG format in non-Chrome browsers.
See the same image with a black-and-white effect.URL:Ruby:PHP:Python:Node.js:Java:JS:jQuery:React:Vue.js:Angular:.Net:Android:
Or this one with a Cartoonify effect.
The possibilities are truly endless, promising a tremendous effect on the user perspective without sacrificing performance or image weight. Many effects abound, including Instagram-like filters, which you can mix and match to obtain the desired result. Feel free to let your imagination run wild with Cloudinary’s Neural Artwork Style Transfer add-on.
For ease of use, you can simplify and shorten those long, complex URLs by leveraging a feature called named transformations, which are akin to CSS classes. To group together multiple URL-based, chained transformations and turning them into templates, follow these simple steps:
- After creating your preferred LQIP transformation for an image from your Cloudinary account, log in to your Cloudinary account and navigate to the Transformation menu. Click Edit before the most recent dynamic transformation.
- In the next screen, save a template, also known as a named transformation, with a simple name of your choice, such as lqip. Alternatively, you can start directly from the Image Transformations screen (see below) to create a newly named transformation: click Transformation and then click Create a new transformation on the top-right corner, and, finally, save it with your preferred name.
The output shows a significantly streamlined URL in place of the long, complicated one before, such as something like this—
t_lqip actually encompasses most of the manipulations performed on the image and can even conceal resizing, cropping, text or image overlays, and other complex transformations.
We hope that this post has clued you in on how you can leverage Cloudinary to automate the process of generating image placeholders, simultaneously reducing development time and effort. We welcome your feedback and would appreciate your sharing with us your experience, preferably with examples, with the options we described earlier.
Regardless of your media-performance strategies, we recommend that you adopt preferred flavors of low-quality image placeholders, especially in situations in which you are already leveraging lazy loading. Keep in mind the tests that we ran and the enhancements to performance and loading times you would gain by taking advantage of the Cloudinary options that we recommended.
Cloudinary provides easy-to-use, cloud-based media management solutions for the world’s top brands. With offices in the US, UK and Israel, Cloudinary has quickly become the de facto solution used by developers and marketers at major companies around the world to streamline rich media management and deliver optimal end-user experiences.