Low Quality Image Placeholder

LQIP in the WEB

LQIP, aka Low Quality Image Placeholder. We use placeholders for text fields, videos and images which give a hint or indicate that some content is expected at a particular place on a web page.

Why do we need placeholders?

Images are heavy, a typical HTML page along with CSS, and some JavaScript might weigh around 100-200KB [KiloBytes]. But, one image alone occupies 500-1000KB [1MB Mega Byte] or more depending upon the resolution.

So, when all the small-sized files load faster while the images take a lot of time and this causes several problems like,

Bad User Experience, the user should know something is missing/loading

Page layout shifts, for example,

If there's an image between two paragraphs, the two paragraphs will have some space between them before the image loads but, once the image loads, the whole layout shifts downwards pushing all the page content away, and the worst part is that all of this happens in front of the user and often confusing.

What is Image Placeholder

A very lightweight image or an SVG that immediately appears before an image in its place and is replaced by the image after it is loaded/downloaded completely.

The size of an image placeholder might be

Types of Image Placeholders

Simple and Solid color placeholders

One of the first types, these are mostly of a simple color like grey, blue, etc.

They give a hint to the users that some content is loading.

Below is a 1KB placeholder.

plain
simple 1KB placeholder

Logo and Loading placeholders

A placeholder can also contain the logo of the website or some loading text.

logo
14KB Placeholder

loading
4KB Placeholder

LQIP - Low Quality Image Placeholder

LQIP are placeholders generated from the original image itself, they are generally blurred versions and contains less amount of colors and details compared to the original images.

Ex: Instagram uses blurred LQIP

LQIP
LQIP

Even at matrixread, we use LQIP for all of our images.

matrixread
LQUIP at matrixread

Conclusion

Image placeholders are a good beginning for page speed optimization and other stuff like lazy loading.

Leave a Reply

Your email address will not be published. Required fields are marked *

Popular posts