How to optimize images for your website

Images are an important part of any website. They help us show products, share our work, and give a page its identity. But if we don’t prepare them before uploading, they can also make the site take longer than necessary to load.

Nobody likes to wait, especially when visiting an unfamiliar page for the first time. So whether you’re a photographer, designer, artist, or simply need to upload images to your site, it’s worth spending a few minutes optimizing them.

Adjust the dimensions

Not every image needs to keep the original dimensions at which it was taken or designed. A photo displayed as a thumbnail doesn’t need the same dimensions as a cover image.

Before uploading it, think about where it will be displayed. If the image will occupy a small space, you can reduce its dimensions so visitors don’t have to download a file larger than necessary. Some sites also prepare several versions of the same image for different devices.

Choose an appropriate format

There are different formats, and each can be useful depending on the image. JPEG remains a common choice for photographs, while PNG can be useful when we need transparency or need to preserve detail precisely.

Formats like WebP and AVIF can also produce smaller files without losing too much quality. The best choice will depend on the image and the tools you use to publish your site.

Find a balance between quality and size

Compressing an image helps reduce its file size. The idea is to find a balance: it should look good where it will be displayed without being larger than necessary.

You can try different compression levels and compare the results. If you notice the image losing too much detail, adjust the quality until you find a setting that works for you.

Tools to optimize your images

There are several tools that can help reduce the size of your images. Here are a few I recommend:

1. Squoosh: a Google tool that works in your browser. It lets you adjust dimensions, try different formats, and visually compare the result before downloading it.
2. Squish: a tool created by Addy Osmani to compress multiple images at once. It uses WebAssembly and processes images locally in your browser, without uploading them to a server.
3. OptiPNG: optimizes PNG files without losing information. You can use it on macOS from the terminal. If you prefer an app with a graphical interface, ImageOptim is another Mac option that lets you drag and drop images.

The important thing is to try and compare. The same image can produce different results depending on the format and settings you choose.

Optimizing images doesn’t mean they have to look bad. It’s about preparing them for how they’ll be used, so your site looks good and is more comfortable to visit.

Photo by Kawê Rodrigues on Unsplash.