How To Lazy Load Images While Still Displaying For People With Javascript Disabled

I'm starting to wonder if it is possible after reading some of the other posts Lazy loading images how Lazy loading images If I include all the images on the page with src attribu

Solution 1:

Use normal img tags with src attributes in your markup, then use JavaScript to null out the src attributes of images that you want to be lazy loaded and handle the lazy loading appropriately. Users with JavaScript disabled will load all of the images normally, and users with JavaScript enabled will receive a more responsive browsing experience.

Solution 2:

Actually, it is possible. Simply use the decoding attribute set to async like so.

<img src="/path/to/file.jpg" decoding="async"></img>

Please note that not all browsers support this (*cough* Internet Explorer *cough*), but support is growing in mainstream good browsers.

Also, I am assuming that the most likely reason for why you want to lazyload images is to make your website load faster. If this is the case, then you can make your website load a huge amount even faster simply by converting your images to jpegs and compressing them with compressor.io/JPEGmini (upload your jpeg file to both and use whichever turns out smaller after compression).