One of the advantages of this API is that you don't have to use a library for this kind of job anymore. The majority of browsers are providing a lot of support for some of the newest and awesome APIs, and this has been improving the experience for users in general, allowing developers to use some native browser APIs and reducing their final code bundle.
I love improvements that just work without any effort required of website owners. […] The less friction we can add to introduce these improvements, the more likely they will be adopted, and there’s no better friction than none at all! Fixing the impact of layout shifts on users for responsive images seems to be one such improvement and the web is all the better for it.
A lot of performance issues stem from them simply not being very noticeable to those of us doing the building. Changing that wherever we can is one of the best ways to make sure that all that low-hanging fruit doesn’t go overlooked.
If I would need to implement image lazy-loading on a high-traffic e-commerce site today, I’d very likely go for a JS-based solution. Partly because the native solution only works in Chrome, but also because Chrome’s implementation is too eager and therefore not so effective.
For 27 years, JPEG has been the workhorse image format. While universally adopted, it doesn’t address many modern use cases including high dynamic range (HDR), transparency, responsive web, lossless and others.
The Embedded Image Preview (EIP) technique introduced in this article allows us to load preview images during lazy loading using progressive JPEGs, Ajax and HTTP range requests without having to transfer additional data.
To summarise, using native lazy loading is one of the simplest ways of providing genuine progressive performance enhancements for your users. It’s not a perfect solution, but if you’re not already utilising lazy loading and have lots of images/iframes it’s definitely worth trying out — especially as it’s so easy to implement!
"Improving performance doesn’t mean we should remove all fonts and images. It just means we should be more aware of how the design decisions we make impact user experience. Performance is a balance between content and design."
"As a web developer, there is a high probability that you have encountered the two enemies of this article: images and deadlines. Sometimes, for some reasons, your images won’t fit the layout and you don’t want to wrap your head around this for hours."
"Image compression is a biiiig subject, and we certainly haven’t covered every aspect of it here, but having discovered our preferred compression methods across each file type, these are the new guidelines for image compression at Kyan"
"Image placeholders in SVG are ready for prime time thanks to browser support and good rendering performance. By automating SVG shape creation that mimics main features visible inside an image and compressing the result appropriately, we can achieve SVG-based image placeholders weighing in at only ~400 bytes. SQIP is a tool to make this process easy to integrate into your deployments."
"Using Low Quality Image Placeholders (LQIP) ensures that your users are presented with a usable page much faster. When combined with a lazy loading technique using Intersection Observer, your users save on bandwidth too. It has been fun to experiment with LQIP!"