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.
Logo and Loading placeholders
A placeholder can also contain the logo of the website or some loading text.
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
Even at matrixread, we use LQIP for all of our images.
Conclusion
Image placeholders are a good beginning for page speed optimization and other stuff like lazy loading.