Image loading ways comparison
Eager loading
The good old way of not using lazy loading at all.
Pros
You don't have to do anything at all
Contras
Lots of unnecessary requests
Unreasonable waste of traffic
The markup may 'jump' during loading
Browser lazy loading
That's something. The browser itself will determine when to load the image, you just need to add the attribute loading="lazy" to the tag.
Pros
The easiest way with minimal effort
Contras
It is obligatory to specify the width and height
Every engine works differently
Still not full support everywhere
The markup may 'jump' during loading
Load by intersection
Loading images using the Intersection Observer
Pros
You are exactly in control of the process
Contras
Void in place of the image until it loads
The markup may 'jump' during loading
Intersection plus placeholder image
Insert a stub picture in place of the image before it is loaded
Pros
The picture is not a blank space
Contras
The placeholder itself must be loaded
While it's loading, everything seems the same
You have to match either the picture or the styles so that nothing crawls or sticks out
Intersection plus colored box
Insert a colored rectangle in place of the image before it is loaded
Pros
The picture is not a blank space
Colored rectangles are not as striking as identical pictures
Contras
Still not the best UX
A lot of unnecessary manipulation to calculate dimensions
Intersection plus Blurhash
Very similar to the source blurred picture in place of the image before it has loaded
Pros
Pretty cool UX
Contras
Calculations on large images can take time