We make screenshots of all Pens and serve them in a variety of ways, most notably in any “grid” of Pens on CodePen. All Pens will show an image in the grid at first, and then if the Pen is animated (and you don’t have the user setting to only show images) it will fade into an <iframe> preview. So… we load a ton of image screenshots on CodePen.
We used to use CSS background-image for all those images, so we linked up just a single image there, and we chose something pretty large so it would look good on large and high resolution monitors. Now we’ve swapped the images out for an <img loading="lazy" srcset="" /> integration, which has many advantages.
Now, we’ll serve you more-correctly sized images depending on the browser and screen you are on. Saved bandwidth for both you and us in that you aren’t downloading (much) more image data than you need. Plus, the lazy loading means you won’t download the image at all if the image isn’t visible to you yet (like you haven’t scrolled it into view yet).
Definitely the way to go! This, combined with the fact that we’re now serving them from a global CDN, optimized, and in the best possible format per your browser, it’s been a big upgrade. We’re probably serving half or less image data on average.
We’re still poking at our whole system for generating the screenshots, which should be much better than it has been in the past, but is close to being better yet again. For example, soon all screenshots will be generated on cloud servers with GPUs, which we know to give us the best results.
The post Lazy Loading and `srcset` images in the Grid appeared first on CodePen Blog.