Images are an important part of web development. They make the web page more appealing, but at the same time, they can also impact its performance if not optimized properly.
In this lesson, we'll cover some of the optimization techniques for web images, and talk about how to apply them to a Next.js project by utilizing its built-in <Image> component, which comes with many optimization features such as format conversion, automatic compressing, automatic resizing, lazy loading and so on.
Some image optimization techniques
We'll start with the general techniques. Optimizing images in web apps is a very important topic in web development. There are several things we must do:
- Convert the image into a modern, web friendly format such as
webpandavif.
webp and avif are both modern image formats designed to reduce file sizes compared to traditional formats such as JPEG and PNG, while retaining most of the original image quality. On average, webp is 30% smaller than JPEG and PNG, and avif is 50% smaller.
avif is smaller, but webp is more widely supported by most browsers, and offers faster decoding.
- Reduce image file size to below 200KB.
Sometimes, just converting the image into a modern format is not enough to shrink the image file down to the optimal size, which is often below 200KB for web apps. In this case, you should consider reducing the image quality in order to further reduce the file size.
But of course, you must be careful with this, and make sure the images still have decent quality to be displayed on the website.