How to Defer Off-Screen Images and Serve Images in Next-Gen Formats for your Website

Next-Gen Image Loading

Let’s get started with next-gen images. I’m going to pick webp as my next-gen image format and we’re going to use a handy online converter for these.

<picture>
<source srcset="next-gen-img.webp" type="image/webp">
<img src="fallback.png" alt="Cool Image">
</picture>

Combining Next-Gen Images with Image Loading Deferment

Now, let’s combine next-gen image formats with image loading deferment. Google recommends using an IntersectionObserver, which again has about the same browser support as the <picture> element and webp images.

<picture>
<source srcset="https://via.placeholder.com/1" srcset1="next-gen-img.webp" type="image/webp">
<img src="fallback.png" alt="Cool Image">
</picture>

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store