Top list of solutions to optimize images for websites

Introduction

Image optimization is one of many important solutions to improve website performances, which is quite important and every Front-End developers should know. In this article, I will provide some solutions for you to consider applying for the projects you are working on.

Solutions

Solution 1 — lazy load image

The technique of lazy-loading images is most often mentioned in images optimization. This is a technique to force images to be loaded only after the content on the web page has been scrolled and viewed by the user. This technique is very suitable for e-commerce, photo social networks, travel websites. These include popular sites that are applying such as Shopee, AirBnb, Pinterest, Behance, …

In the past developers were required to develop for image lazy loading. However, many browsers now support lazy loading for images, which make developers easy to apply it:

<img data-fr-src="/cat.jpg" loading="lazy" /> 

However, for sure you should write code to check if the browser supports lazy-loading the image.

if ('loading' in HTMLImageElement.prototype) alert("yes"); else alert("no"); 

Solution 2 — Use Art direction

Art direction is one of the most common responsive image solutions on large websites like Facebook, Instagram, … This is a technique to automatically load images according to the device's size. For example, when visiting website in mobile device, the smaller image will be loaded in the correct size for mobile, instead of loading a large image from Desktop device. However, this is required your system supports doing scale images by multiple sizes requested.

You can use HTML code:

<picture> <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg" /> <source media="(min-width: 800px)" srcset="elva-800w.jpg" /> <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva" /> </picture> 

Or CSS:

@media (min-width: 769px) { .bg { background-image: url(bg1080.jpg); } } @media (max-width: 768px) { .bg { background-image: url(bg768.jpg); } } 

Solution 3 — Use Webp file type

WebP is an image file format developed by Google silently intended as a replacement for JPEG, PNG, and GIF file formats. It supports both lossy and lossless compression, as well as animation and alpha transparency. At the present time, more than 90% of the world's browsers support the WebP format. Including FireFox, Chrome, Opera and even Safari from Apple.

WebP format reduces image file size from about 19% to 64%. This makes websites load faster and consume less bandwidth. It can be said that if an image have same the quality, other formats will consume more space in disk than webp format.

To convert your image into using webp format, you can visit: https://cloudconvert.com/webp-converter

Conclusion

Image Optimization is not easy and requires an understanding of both frontend and backend development. If you are working on an application that has a lot of traffic and consumes a lot of images loaded per visit, you definitely need to know the above techniques. If you know any other good image optimization techniques, please share in the comments!