How to optimize images for website performance?

What is image optimization? 🔗

Optimizing images is the process of reducing the size of the images. Optimizing images for getting better loading speed on the website has more steps than just optimizing the size of the image.

Why optimizing images? 🔗

People has too short attention span. Statistically, people can’t wait more than 2.5 seconds for the webpage to load. So, if your website is taking more than 2.5 seconds to load, you are losing too many users/customers.

The size of images are usually the bottleneck in the webpage page speed performance. So, to optimize the webpages and get the best results, optimize the images shown on that page.

How to optimize images for web? 🔗

Generally, we need to make the images take less time to load. So, we need to send less image data over the internet. So, we need to use efficient image formats, efficient compression and suitable image size.

resize the images 🔗

First rule to optimization is to do the necessary work only. So, we need to use the properly sized images because oversized images will take longer to load without any improvement on the user experience.

If the image is shown as 900px wide by 680px height but the size of the image is 2080px wide by 1200px height. That’s a waste of time. We need to resize that image properly to be the same size we are shown it in.

multiple formats for the same image 🔗

After resizing the image properly, we need to convert it into the best image formats for the web, which are AVIF, WebP, JPEG and PNG.

convert image to other formats 🔗

I am using command line program ffmpeg to do that conversion. If you prefer graphical user interface solution/programs, use the web app we’ll talk about in the next step. Here is how I use it in details.

I installed FFMPEG via macports with this command.

sudo port install ffmpeg7 +nonfree +rav1e

note: I added +nonfree and +rav1e to get the support for commercial and closed source file formats and other not included by default formats such as WebP.

You can install it via Homebrew too, by this command.

brew install ffmpeg

You can install it via APT on Debian-based Linux distos by this command.

sudo apt install ffmpeg

I use Fish shell, so, I add a function into ~/.config/fish/config.fish to do the conversion for me.

function opt4web --description "opt4web <filename.png>"
 set fileName (string split -r -m1 . $argv)[1]
 ffmpeg7 -i $argv $fileName.avif -y
 ffmpeg7 -i $argv $fileName.webp -y
 ffmpeg7 -i $argv -q:v 10 $fileName.jpg -y
end

That fish function is converting the specified image into 3 images with extensions avif, webp and jpg.

I use it like this.

opt4web the-image.png

The generated images are saved on the same directory/folder as the source file specified.

I use those multiple formats of the same image in HTML like this.

<picture>
    <source srcset="img/image-name.avif" type="image/avif">
    <source srcset="img/image-name.webp" type="image/webp">
    <img loading="lazy" height="380" width="400" src="img/image-name.jpg" alt="image description">
</picture>

As you can see, I use avif and webp image formats as sources for the image, and the jpg image format for fallback situations. So, the web browser can choose the best image format to load efficiently. If the browser supports AVIF, it will load it. If not, it will load WebP if it supports it. If that web browser do not support AVIF nor WebP, it will load the JPG image format because all web browsers supports it.

Using this multiformat appraoch can decrease the amount of data send over the internet by ~10% and that’s great.

compress all images 🔗

All image formats we used are not efficiently optimized yet. So, we need to compress those images before including them in the website assets.

There are too many tools and websites to compress images, but I prefer the Google’s. squoosh.app is a web app to help compress images. This web app is working locally and can be installed to be used completely offline.

So, I compress all images lossy or lossless depending on the image content. If the image has words to be read, I use lossless compression. If it is just a scene to enhance the visitor’s comprehension, I use lossy compression.

Note: you can use squoosh.app to convert the image into other formats while compressing them in the same step.

lazy load images 🔗

If you notice the HTML code above, I used loading="lazy" in it.

<picture>
    <source srcset="img/image-name.avif" type="image/avif">
    <source srcset="img/image-name.webp" type="image/webp">
-   <img height="380" width="400" src="img/image-name.jpg" alt="image description">
+   <img loading="lazy" height="380" width="400" src="img/image-name.jpg" alt="image description">
</picture>

This attribute let the browser load the image right before the user reaches the viewport of the image. If that image is not reached by the user, It will never be loaded. And that’s great for user experience as the webpage will load much faster without loading images that are not showing on the current viewport nor the next viewport.

I hope you enjoyed reading this post as much as I enjoyed writing it. If you know a person who can benefit from this information, send them a link of this post. If you want to get notified about new posts, follow me on YouTube , Twitter (x) , LinkedIn , and GitHub .