TLDR: Add loading=lazy
to HTML images for the Browser to load them as the user scrolls
For my blog and personal site, I wanted images to lazy load in as you scroll down the page. This makes for a better reading experience when there are lots of images on a single page. It also stresses out my server less, as only the images people actually scroll to are ever downloaded.
In the past I've used various JS frameworks and tool to accomplish this, but now we can do it natively in HTML!
All you need to do is add the loading="lazy"
attribute to your images! MDN Attribute Link
CanIUse shows that there is ~93% compatibility for the loading
attribute when applied to images. So for
most of my use cases this will do perfectly! loading
can also be applied to iframes
but the browser
compatibility for this is a bit lower at ~81%. [Mobile Safari on older versions is most of the difference here]
My weekly newsletter tailored at developers who are eager to grow with me!
Every week will be unique, but expect topics focusing around Web Development and Rust