Optimizing Images in Webpages

A comprehensive guide for embedding images in the 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.

Resolution switching

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.

  • sizes: A set of media queries with corresponding slot width for an image to fit in, separated by commas.
<img 
alt="alt text"
src=”img768.webp”
srcset=”img400.webp 400w,
img768.webp 768w,
img1600.webp 1600w”
sizes=”(max-width:375px) 375px,
(max-width:768px) 768px,
(max-width:1440px) 1600px,
1600px”
>

Calculation

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. DPR is Device Pixel Ratio.

Calculated value = Width descriptor/slot width for an image

How Resolution Switching optimizes the performance?

Fig 1. Resolution switching on different media devices

Choosing the correct format between PNG, JPG, and WebP.

Let’s first discuss the properties of all the formats.

Fig 2. Comparison between compression techniques

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.

1. Browser Level(Native) Lazy Loading:

Most of the modern browsers support lazy loading through loading attribute in <img> tag itself.

  • 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.
<img
alt="alt text"
src=”path_to_image”
loading=”auto/lazy/eager”
width=”200px”
height=”200px”
>

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.

<html>
<head>
<script src="lazysizes.min.js"></script>
</head>
<body>
<img alt="alt text"
class=”lazyload”
data-src=”path_to_image”
width=”200px” height=”200px"
>
</body/>
<html>
Monitoring lazy loading in Chrome’s Dev Tools(Network tab)

Conclusion

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.

CSE student | Front end developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store