How to Compress Images for the Web Without Losing Quality

Images are usually 50–80% of a webpage's total weight. A single unoptimised hero image can be larger than the entire HTML, CSS and JavaScript combined. Compressing your images is the single highest-impact thing you can do to make a site faster.

Why image compression matters

Smaller images mean faster page loads, less data for mobile users, better Core Web Vitals scores and better Google rankings. A one-second improvement in page load time can lift conversions by 7–10% on a typical e-commerce site.

The 4 levers to pull

You have four independent controls. Pull all of them:

1. Format — use WebP for photos and graphics. Use AVIF if you can (smaller still, but newer support).
2. Quality — 75–85% for photos is the sweet spot. Lower than 70% shows artefacts.
3. Dimensions — never serve a 4000-pixel image where a 1200-pixel one would do. Resize before uploading.
4. Metadata — strip EXIF, GPS, camera info. Most photos carry 50–200 KB of metadata you do not need.

What to target

Practical size targets for the web:

• Hero / banner images — under 200 KB
• Article images — under 100 KB each
• Thumbnails — under 30 KB
• Logos and icons — under 10 KB (use SVG if possible)

Quality settings that work

The right quality setting depends on what the image is:

• Photographs: 75–85% JPEG or equivalent WebP. Below 70% and JPEG starts showing blocky artefacts around high-contrast edges.
• Logos and flat graphics: lossless PNG or lossless WebP. The file is already small, and lossy compression creates visible edges and colour banding.
• Background images: you can go lower, 60–70% quality, because the eye does not pick up subtle artefacts on backgrounds.

Dimensions matter more than quality

A 4000-pixel-wide image at 80% quality is still 1.5 MB. The same image at 1200 pixels is 250 KB at the same quality. Always resize to the actual display size before uploading. Browsers will downscale a large image to display, but they will still download the full-size file.

For most modern websites, the max width you actually need is:

• Full-width hero — 1920 pixels
• Article content — 1200 pixels
• Thumbnail — 400–600 pixels
• Mobile-first — never serve larger than 2x the largest display size, so 1200 pixels for a 600-pixel display.

A practical workflow

1. Resize first. Use an image editor or the Image Resizer to get the image to the right pixel dimensions.
2. Compress second. Use the Image Compressor to re-encode at 75–85% quality.
3. Check the result. Open the compressed image and compare it side-by-side with the original. You should not see a difference at 100% zoom.
4. Convert format if needed. For graphics with transparency, use the JPG to PNG or PNG to JPG converter to switch formats.

Common mistakes to avoid

• Don't compress twice. Each re-encode loses a little quality. Compress once, save the result, use that.
• Don't resize up. Making a 200-pixel image 1000 pixels does not add detail, it just adds blur. Always resize down, never up.
• Don't skip the metadata. Strip EXIF and GPS for privacy as much as for size. Phone photos can leak your home address if you upload them unchanged.

Quick wins for any site

If you do nothing else, do these two:

1. Convert all your JPEGs to WebP. Same quality, 30% smaller.
2. Resize every image to its actual display size. Most sites have images 2–5x larger than they need to be.

Both of these together will typically cut a webpage's image weight in half. The tools in the sidebar can do both in your browser, no upload required.