How to compress images for a faster website

On a typical page, images account for more bytes than the HTML, CSS and JavaScript combined. Because page speed affects both how visitors behave and how search engines rank you, image handling is usually the highest value optimisation available.

Decision one: the format

• Photographs go to JPG or WebP. WebP is roughly 25 to 35 percent smaller than JPG at matching quality and is supported by every current browser.
• Graphics with flat color, logos and screenshots containing text go to PNG or WebP. PNG is lossless and keeps text crisp.
• Anything needing transparency goes to PNG or WebP. JPG has no transparency at all.
• Icons and simple shapes go to SVG, which is text and scales to any size.

Decision two: the quality setting

For JPG and WebP, 80 percent is the sweet spot. It is visually indistinguishable from the original for almost everyone and typically halves the file. 60 percent is fine for thumbnails and background images. Below 50 percent you start seeing blocking around edges and text.

Do not save a JPG repeatedly at high quality thinking you are being safe. Every save re-encodes and loses a little. Keep an original and export from it.

Decision three: the dimensions

This is the one most people skip and it matters more than the quality slider. A 4000 pixel wide photo displayed in an 800 pixel wide column wastes 96 percent of its pixels. Resize to roughly twice the display width to look sharp on high density screens, and no more. That single change often cuts a page in half.

A workable process

1. Resize to at most twice the width the image will be displayed at.
2. Convert to WebP for the web, keeping a JPG or PNG copy as a fallback if you support very old clients.
3. Export at 80 percent quality and check the result at full size once.
4. Batch the rest at the same settings and download them together.

Batch conversion here downloads everything as a single ZIP, and files you already downloaded are excluded from the next ZIP so you do not get duplicates.