How to Compress an Image for a Website

This step saves the most and is skipped the most. A phone photo is around 4000 pixels wide. A blog post is rarely wider than 800 pixels on screen, and a full-width banner about 1600 to 2000. Every pixel beyond that is downloaded and then thrown away by the browser.

• Image inside an article: 800 to 1200 pixels wide.
• Full-width banner: 1600 to 2000 pixels wide.
• Product photo in a shop: 1000 to 1500 pixels on the longest side.
• Thumbnail: 300 to 400 pixels wide.

These are common starting points, not rules. Look at how wide the image is shown on your own site and use about that, or up to twice that if you want it extra sharp on high-resolution screens.

• Photos: WebP, or JPG if your site or platform does not accept WebP.
• Logos, icons and screenshots with text: PNG or lossless WebP.
• Images with a transparent background: PNG or WebP.

Saving a photo as PNG is the most common reason for a slow page. The same photo as JPG or WebP is several times smaller and looks the same.

Compression removes detail the eye barely notices. For photos, a quality setting between 70 and 80 percent is the sweet spot: the file shrinks a lot and the difference is hard to see. Below 60 percent, blocky areas and smeared edges start to show.

• Photos: start at 75 percent.
• Images with fine detail or text: 85 to 90 percent.
• Small thumbnails: 60 to 70 percent is usually fine.

Always compare the result with the original at the size it will be shown, not zoomed in.

As a rule of thumb, an image inside an article should end up under about 150 KB and a large banner under about 300 KB. Many well-prepared photos land far below that. If yours is much larger, go back to step 1: the pixel size is almost always the cause.

Fast pages are nicer to use, especially on a phone with a weak connection. Loading speed is also one of the signals Google uses when ranking pages, and the largest image on a page often decides how fast the page feels. Smaller images also use less of your visitors' mobile data.