Native Lazy Loading Images and Iframes

ยท ยท 125 words ยท 1 minute read

what is lazy-loading ๐Ÿ”—

Lazy-loading means load this element on demand. We use the lazyloading technique to speed up the web page load time.

using lazyloading with images ๐Ÿ”—

Sample code for image element with lazy loading enabled.

<img width="" height="" loading="lazy" src="" alt="" />

The loading="lazy" is to load the image on demand. width="200" and height="400" to save the space for the loading image. src="" for the image url. alt="" to give a description for the image for accessibility purposes.

We us this CSS code snippet to make images responsive.

img {max-width:100%;height:auto;}

using lazyloading with iframe ๐Ÿ”—

Just add loading="lazy" to the opening element of iframe like this.

<iframe loading="lazy" ></iframe>

I hope this post helps you speed up your website page load times.