CODEWITHSUNDEEP
htmlcssimagelazy-loading
Hookstark
Hookstark

Reputation: 1159

Images lazy loading: solid rectangle instead of fuzzy image

I'm trying to show several images into my website in a lazy way, and I tried two options:

OPTION 1:

<img class="lazyload" loading="lazy" data-src="myimage" width="250" height="225" title="This is an image">

OPTION 2:

<img class="lazyload" loading="lazy" src="fuzzy.jpg" data-src="myimage.jpg" width="250" height="225" title="This is an image">

Both works ok, and 'myimage.jpg' takes a bit to be loaded. However, with the first one the browser shows, before the definitive loading, the ugly "no images" icon. And with the second one, I spend resources loading 'fuzzy.jpg' image. Yes it's just 5-kb size, but I wondered if there was a SEO-friendly method to show just (e.g) a 'light blue' rectangle created by the browser with a sort of CSS background-color property.

Upvotes: 0

Views: 207

Answers (1)

GhostPengy
GhostPengy

Reputation: 1024

You can inline SVG images without the need for a request. Meaning they will be loaded with initial HTML and don't take up extra resources. You can make it even more complex if you wish (in terms of what is shown), as SVG is extremely lightweight. How to inline SVG in the image, and other stuff

Edit: You can inline regular images as well with Data URLs if you wish. But it is not generally practiced.

Upvotes: 1

Related Questions