← All guides

Guides

How to compress images for the web without losing quality

Large images are the number one cause of slow web pages. The good news is that most photos can be made several times smaller with no visible difference. This guide explains how image compression works and how to get small files that still look great.

Pick the right format first

Format matters more than any single setting. Use JPG for photographs, PNG for logos, icons and screenshots that need sharp edges or transparency, and WebP or AVIF when you want the smallest file at the same quality. WebP typically saves 25–35% over JPG, and AVIF can be roughly half the size of JPG.

Choose a quality that looks identical

JPG and WebP are lossy: a quality slider controls how much detail is kept. In practice, 75–85% looks the same as the original to the eye while cutting the file size dramatically. Going below about 60% starts to show blocky artefacts, especially in skies and gradients, so it is rarely worth it.

Resize and target a file size

The biggest savings usually come from resizing. A 4,000-pixel phone photo is far larger than any website needs; scaling it to 1,600–2,000 pixels wide often cuts the size before compression even starts. If you need a specific limit — say under 100 KB for a form — use a target-size mode that adjusts quality automatically until the file fits.

Try it: compress and convert images privately in your browser with ImageBloom →