When it comes to websites, images matter because they help deliver a complex message in a blink of an eye.
Therefore, 93.7% of websites on the internet use at least one type of image file format.
However, the large volume of unoptimized images affects the website’s performance, user experience, and SEO.
So, in this article, I will discuss best practices to optimize image loading for websites, avoiding common pitfalls.
1. Use the New Image Formats with Fallback
Many web developers don’t know the best image file format for their website and optimize it. As a result, they stay with the ones they are familiar with, such as JPEG, PNG, SVG, or GIF.
However, the older formats have poor performance compared to the relatively new formats like WebP and AVIF.
WebP is an image format specifically developed to provide superior lossy and lossless compression.
It is 26% smaller compared to PNG.
25–35% smaller compared to JPEG.
You can use the cwebp command-line tool or the Imagemin WebP plugin to convert your PNG or JPEG to convert your images into WebP.
Although it doesn’t have deep historical support, as of August 2021, WebP has broad support in the latest versions of majors web browsers.
Besides, you can provide fallback images for older browser versions as follows;
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.jpg" type="image/jpeg">
<img src="image.jpg">
</picture>
AVIF, the most recent image format, provides even better performance compared to WebP.
It is 50% smaller compared to JPEG.
20% smaller compared to WebP.
Although AVIF is only supported in Chrome and Opera at the time of writing, you can still use the format in native HTML with the <picture> element with fallback support.
<picture>
<source srcset="img/image.avif" type="image/avif">
<source srcset="img/image.webp" type="image/webp">
<img src="img/image.jpg" alt="....">
</picture>If a browser doesn’t support <picture>, it will fall back to default <img>.
2. Serve Images of Correct Dimensions
On the modern web, neglecting the responsiveness of your website is a big mistake. More than 50% of your traffic is coming from smartphones and tablets.
Therefore, you can scale the image to popular device dimensions and serve them using a srcset.
<img src="image.jpg"
srcset="image-320.jpg 320w,
image-480.jpg 480w,
image-640.jpg 640w,
image-800.jpg 800w,
image-1100.jpg 1100w"
sizes="(max-width: 1100px) 1100px, 100vw" />Then the browser determines which image source is the most appropriate from a given list of variants.
3. Compress Images
Even after selecting the most suitable image format and dimensions, you can further reduce the size of the image via image compression. For example, take a look at the following image set.
You may not distinguish the difference between the original image and the compressed image. However, when measuring the image sizes, each takes 1.82 MB, 712 KB, 582 KB, 403 KB.
Here, you can see a considerable difference between the values for a non-noticeable loss in quality.
Besides, you can go from 1.82 MB to 712 KB by changing the compression from 100% to 75%. Therefore, a small amount of reduction in your image quality will considerably increase the loading speed of your website.
Tip: Build better Component Libs and Design Systems
Share components across teams and projects to speed up development and make sure your users experience a consistent design at every touchpoint.
OSS Tools like Bit offer a great dev experience for building, sharing, and adopting components across teams and applications. Create a component hub for free give it a try →
A React ‘card’ component independently developed and source-controlled with an auto-generated dependency tree.
4. Use Image Lazy Loading
Lazy loading helps to further improve page loading times. You may lazy load an image once it gets near the border of the viewport.
Besides, there are several methods to choose from.
Native Lazy Loading Native lazy loading of images is super straightforward.
<img src="image.jpg" loading="lazy" alt="..." />By adding the loading=”lazy” attribute to the img tag, you can instruct the browser to load the image immediately if it’s in the viewport and fetch other images only when a user gets closer to the screen.
Though most major browsers currently have good support for the loading attribute, one of the downsides is that IE and Safari lack support.
Lazy Loading with Blurred Image Effect As a Medium reader, you must be well familiar with this technique. Have you ever noticed how the site loads the banner image of a particular story?
Blurred image to quality image transition
As you can see, Medium first loads the low-resolution copy of the image until the high-resolution version of your image is being lazy-loaded. There are several exciting ways to implement lazy loading with the blurry effect.
Lozad.js is a light-weight, highly performant library that you can use. As the first step, install lozad with npm or yarn.
// You can install lozad with npm
$ npm install --save lozad
// Alternatively you can use Yarn
$ yarn add lozadThen using a module bundler of your choice, you can import it.
// Using ES6 modules
import lozad from 'lozad'
// Using CommonJS modules
var lozad = require('lozad')After that for the basic implementation, add the class=”lozad” to the element.
<img class="lozad" data-src="image.jpg">
Finally, all that you need to do is initiate the Lozad as follows;
const observer = lozad();
observer.observe();Lozad supports all modern browsers. If you need older browser support, make use of a polyfill. Apart from the methods mentioned above, you can use several other techniques like Intersection Observer API and yall.js to implement lazy loading.
5. Use Image CDNs
Content delivery networks (CDNs) technology aimed to deliver content to users faster by storing them closer to the user.
There’s a specific type of CDN called image CDN that is excellent at optimizing your images. With these, you can yield a 40–80% savings in image file size.
How do they Work?
Image CDNs can deliver responsive images by dynamically adjusting dimensions, quality, and format based on browser, device size, page layout, and pixel density.
For example, the image CDN might serve JPEG in Safari, WebP to a Chrome browser, and JPEG XR to an Edge browser.
This support is achieved by performing image transformations at the CDN.
Some image CDNs support an “auto mode” for the transformations.
Given that images usually take up more than half of page weight. Therefore, integrating a CDN for images can give you a significant boost in loading speed.
Final Thoughts
It’s pretty hard to find a website without images in the present day. Thus, images play a vital part in modern websites, especially with better image loading techniques.
In this article, I’ve discussed five best practices you can use to optimize the image loading in your web application. Apart from the methods I’ve mentioned above, following are the some other best practices you can use:
Using progressive JPEGs.
Serve smaller images to users on slow connections.
Using HTTP/2 instead of HTTP/1.1.
Using image-sets.
Let me know in the comment section if there are any other practices you use to optimize images.
Source: Bits and pieces - Nethmi Wijesinghe
The Tech Platform