Optimizing image loading for the web
According to HTTP Archive images make up for more than 60% of data loaded on website. Large images slow down your website which creates a less than optimal user experience. In this post, I’ll offer suggestions for optimizing images on your website.
Lazy Load with
Lazy-loading is a technique that defers loading of non-critical resources at page load time. Instead, these non-critical resources are loaded at the moment of need. Chrome and Firefox both support lazy-loading with the
loading attribute. This attribute can be added to
<img> elements, and also to
<iframe> elements. A value of
lazy tells the browser to load the image immediately if it is in the viewport, and to fetch other images when the user scrolls near them.
<img src="cat.jpg" loading="lazy"/>
<img> tag can include a
decoding attribute through which we can specify a hint to the browser whether decoding of the image should be done synchronously or asynchronously.
async attribute will decode the image asynchronously. Rendering of page and decoding of image will be done in parallel. This obviously makes the page to render faster.
<img src="cat.jpg" decoding="async"/>
Cumulative Layout Shift (CLS)
Cumulative Layout Shift (CLS) is a Core Web Vitals metric, measures the instability of content by summing shift scores across layout shifts that don’t occur within 500ms of user input. It looks at how much visible content shifted in the viewport as well as the distance the elements impacted were shifted.
One of the most common causes of a poor CLS are images without dimensions. Always include
height size attributes on your images and video elements. Alternatively, reserve the required space with CSS aspect ratio boxes. This approach ensures that the browser can allocate the correct amount of space in the document while the image is loading.
<!-- 16:9 aspect ratio -->
<img src="cat.jpg" width="640" height="360"/>
srcset, the browser does the work of figuring out which image is best. Defines multiple sizes of the same image, allowing the browser to select the appropriate image source.
<!-- density descriptor -->
/><!-- or width descriptor -->
WebP is an image format developed and first released by Google in 2010. WebP images are smaller than their JPEG and PNG counterparts — usually on the magnitude of a 25–35% reduction in file size. This decreases page sizes and improves performance. People generally use one of the following approaches for converting their images to WebP: the cwebp command-line tool or the Imagemin WebP plugin (npm package). The Imagemin WebP plugin is generally the best choice if your project uses build scripts or build tools (e.g. Webpack or Gulp), whereas the CLI is a good choice for simple projects or if you’ll only need to convert images once.
<img src="cat.webp" />
However since it’s not always supported (see http://caniuse.com/#feat=webp), you can use this to set a fallback:
<source srcset="cat.webp" type="image/webp">
<source srcset="cat.jpg" type="image/jpeg">
CDN for image delivery
A content delivery network (CDN) is a global network of servers that optimizes web performance by using the node closest to the user for faster delivery of assets. An Image CDN adds device detection and image optimization prior to delivering images from the CDN. An Image CDN decreases image payload, delivers images tailored exactly to each requesting device, ands instantly sends images from the edge of the network. The result is faster page loading that drives higher SEO ranking and better user experience.
Some of image optimization CDNs: Imgix, Cloudinary, Akamai Image Manager, ImageEngine. And APIs: Kraken.io, Imagify, ShortPixel, Fastly Image Optimizer, TinyPNG.