Optimizing Images in Webpages
Images are the most demanding assets of modern webpages but come with performance issues if not utilized correctly. In this article, we will see some of the best ways to embed images in web pages to achieve less bandwidth consumption and enhance page load speed.
People who have just started their journey as front-end developer are likely to make the mistake of embedding images with the same resolution to render on all media devices. Since most of the users visit the web pages from mobile devices, loading the images suitable for desktop resolution consumes unnecessary bandwidth.
Hence, for responsive behavior and lower bandwidth utilization, we can create a set of images with multiple resolutions and specify media queries. Browser picks the suitable resolution for images by doing some calculations which we will see further in the article.
To achieve Resolution Switching, we will use two additional attributes in
<img> tag viz.
srcset: A set of possible images and corresponding width descriptor, separated by commas. The width descriptor must be a positive integer followed by the letter
sizes: A set of media queries with corresponding slot width for an image to fit in, separated by commas.
The above tag displays an image with a resolution of 400px, 768px, or 1600px according to the media query in the
sizes attribute. We are assuming a screen with
We still need to use
src attribute in case any browser does not support
The browser uses the formula given below for each media query and picks the image to display among all the images whose
calculated value is upwards closer to
DPR is Device Pixel Ratio.
Calculated value = Width descriptor/slot width for an image
For the aforementioned
<img> tag, consider the width of viewport = 375px. hence, first media query becomes true.
For the first image(
srcset, slot width is 375px and width descriptor is 400w.
Using the given formula,
Calculated value = 400/375 = 1.06
img1600.webp the value comes out to 2.04 & 4.26 respectively.
img400.webpis the best image to display if viewport is 375px wide on 1x screen.
Refer to the above table to understand how a browser picks an image corresponding to each media query and slot width. The Green cells represent the image suitable for
How Resolution Switching optimizes the performance?
Consider a situation where a webpage is being viewed on three types of devices. On Desktop, the image rendered is of size 2000KB and on Tablet device, the same image with different resolution (1000KB) is rendered by consuming half of the bandwidth that is required for the Desktop, and on Mobile devices, it’s almost ⅓ times. This is how we can save bandwidth without compromising the quality of the image.
Choosing the correct format between PNG, JPG, and WebP.
Let’s first discuss the properties of all the formats.
lossy compression which means it reduces the size but with the cost of quality. When compressing below some threshold the artifacts begin to appear on the edges of high contrast figures. On the other hand, PNG is
lossless compression. It retains the quality(at least better than JPG) and transparency but does not reduce the file size significantly.
In 2010, Google introduced a new image format i.e. WebP. We can say that it is the replacement for PNG and JPG as it provides both
lossless compression on the web while retaining alpha transparency. WebP was introduced to speed up the image loading.
As you can see in the figure, for both lossless and lossy,
WebP compression gives the most optimized output yet maintaining the quality.
Some may think that it’s just a difference of a few KBs but in a webpage, there may exist numerous such images, and using webp format we are reducing the page weight significantly.
This makes more sense if a visitor is on a mobile device with a poor internet connection,
WebP which will save a lot of bandwidth that png or jpg couldn’t. This will increase the chances that the user will not leave the webpage because it is not taking an eternity to load.
However, some old browsers don’t support
WebP. To tackle it, we can use the
<picture/> element in which we can specify a fallback image in case of incompatibility issues.
You can visit here to find which browsers support WebP format.
Image Lazy Loading
The browser’s default behavior is to download all the images when the page is loading. But it is unnecessary to load those which are not in the viewport.
Lazy loading is the concept to defer the non-critical image loading. These images load just before they are about to appear in the viewport.
There are two ways to achieve it.
First, we will take a look at the native approach followed by, using a library.
1. Browser Level(Native) Lazy Loading:
Most of the modern browsers support lazy loading through
loading attribute in
<img> tag itself.
The values of the
loading attribute are,
auto: Browser decides to load the images lazily or not.
lazy: It loads the images when those are about to appear in the viewport. The browser uses a threshold distance to start to download the images. It varies according to the internet connection and device type.
eager: Browser loads the image as soon as possible irrespective of its location on the page.
Some browsers still do not support native lazy loading. You can learn more about the lazy loading browser support from here.
2. Lazy Loading using lazysizes.min.js
Lazy loading can be implemented using third-party libraries also. There are various such libraries available.
lazySizes is popular amongst them and much easier to use.
We just need to add a script in
<head> , specify
lazyload class and replace
src attribute with
<img alt="alt text"
It is recommended to specify the dimensions explicitly since the browser has to download the image to find out the dimensions. In the case of lazy loading, the absence of width and height attribute may trick the browser to think that images are of
0px. The images are not occupying the space, thus the browser will assume that no image is going out of the viewport and will load all the images.
Using the aforementioned techniques, we can significantly improve the initial load time of any webpage. The browser downloads only the suitable images at a required time thus reduce the page weight.
Mobile device accounts for more than half of the website traffic worldwide. These techniques enhance the user experience of all those users since these are efficient especially for mobile users with poor internet connection.