How to optimize website images? Which image compressor to use?
Optimizing images for a website takes a couple more steps than just using a compressor. That's not to say it's hard — free tools or a typical marketing tech stack will do just fine. Here are the three key steps with explanations:
Resize the image to an optimal resolution.
Change the file format to match the purpose.
And finally, of course, compress the image.
Resize the image to an optimal resolution
Every image on your website has an optimal target resolution. It's defined by the space that the image takes up on your screen. Most web images cap out around 1600 pixels, with height dictated by the aspect ratio.
While 1600px is a good rule of thumb, it's not always the perfect answer. To understand why, here's how we arrived at that number:
A typical image container on a website is at most 800px wide. There are exceptions, e.g. full-width banners and background images. We'll explain how to figure out the exact size in a bit.
Why is the recommended size double the 800px? That's because on some screens (namely on Apple devices) the pixel density of your display is twice that of a typical display.
To ensure the images don't look low-quality on these displays, we double the 800px to give us the 1600px “magic number”.
What if the container is smaller? Often, you'll see images that aren't nearly as wide. Here's an example from HubSpot:
You'll see that the image container is only 704 pixels wide. In that case, the perfect image would be 1408px wide.
To figure out the container size of almost any image on a website, right-click on the existing image on your website, choose the “Inspect” option (wording might vary by browser) and hover over the image.
Choose the right file format
This is perhaps the most complicated part of the process. The simple way to do this is by answering one question:
Does your image have a transparent background? If yes, use PNG. If not, use JPEG.
That's the rule of thumb. But what about the perfect solution? That requires a bit more knowledge. As an example, some PNG images are better converted to WebP, which also supports transparency.
Some JPEG images will be lighter than WebP as well. Or they could be optimal as an AVIF file.
It's impossible to know which format it is by just looking at the image, so you have two options:
Stick to our rule of thumb: PNG (or WebP) for transparent background images, JPEG for everything else.
Use The Image Optimizer, which automatically detects the optimal file format and also compresses the image for you.
Compress the image
The simplest step of them all. Once again, you can use The Image Optimizer — it will compress the image for you and choose the right file format, covering two out of the three steps.
Tio is made specifically for websites, so you don't get much control over the output. The goal is to give you the lightest file possible without affecting quality. If you need to optimize images for other purposes, where formats like WebP or AVIF might not be supported, look up alternative image compressors which often allow you to choose the output format and compression levels manually.