How to Compress Images for Web

Images are the biggest contributor to slow page load times. Compressing images for the web — without visible quality loss — is one of the highest-impact optimisations you can make for performance, Core Web Vitals, and SEO.

Target file sizes for web images

The right order: resize first, then compress

Always resize an image to its display dimensions before compressing. Compressing a 3000 px wide image that is only displayed at 800 px is wasteful — you are sending 14× more pixels than needed. The correct workflow:

1. Resize to the maximum display width (e.g. 1200 px for a blog image on most sites).
2. Convert to WebP if your platform supports it — this alone reduces size by 25–35%.
3. Compress to fine-tune the quality-to-size ratio.

Compress your image for web now

Format guide: WebP vs JPG vs PNG for web

• WebP — best overall choice for web. Supports both lossy (like JPG) and lossless (like PNG) compression. 25–35% smaller than JPG at the same quality, supports transparency. Supported by all modern browsers. Use for almost everything on the web.
• JPG — best for photos where WebP isn't an option. Use quality 75–85% for a good balance of size and quality. Avoid for graphics with text or sharp edges.
• PNG — use only when you need lossless quality or when serving to legacy systems that don't support WebP. PNG files are significantly larger than WebP equivalents.

How to hit target file sizes without visible quality loss

• Start at quality 82% for JPG/WebP and check the result. Most images look identical to the original. Work down in 5% steps until you reach your target size.
• The biggest gains come from resizing, not compression. A 4000 × 3000 px photo that is only displayed at 1200 × 900 px is carrying 11× unnecessary pixels. Resize first.
• Blur and noise compress worse. Sharp, high-contrast images compress more efficiently. Slightly noisy or blurry images can be 2–3× larger at the same quality setting.
• Flat-colour areas compress very well. Graphics with large areas of solid colour (logos, illustrations) are much smaller in PNG or lossless WebP than photographic images.

Impact on Core Web Vitals and SEO

Google measures page speed as part of its ranking signals. Large images directly impact:

• LCP (Largest Contentful Paint) — the time until the largest visible element loads. If your hero image is 2 MB, it will delay LCP significantly on mobile connections.
• Total Blocking Time and page weight — heavier pages score lower in PageSpeed Insights.
• Bounce rate — slow pages have higher bounce rates, which correlates with lower rankings.

Google PageSpeed Insights explicitly flags "Serve images in next-gen formats" (WebP/AVIF) and "Properly size images" as high-impact opportunities on most websites.

FAQ: Compressing images for web

What is the best format for web images?

WebP is the best format for web images in 2024. It is supported by all modern browsers, is 25–35% smaller than JPG at the same quality, and supports transparency. Convert your existing JPG and PNG files to WebP for immediate file size reductions.

What quality setting should I use for web images?

Start at 82% for JPG and WebP. This is the sweet spot where file size is dramatically reduced but quality differences are invisible to most viewers at normal screen sizes. For thumbnails, 75% is usually fine. For large hero images where detail matters, use 85–90%.

How much can I compress an image without losing quality?

For photos: typically 70–85% quality looks identical to the original at web viewing distances. File size reductions of 60–80% vs. the original are common. For graphics with text, keep quality at 85%+ to preserve sharp edges.

Does image compression affect SEO?

Yes, indirectly. Google uses page speed as a ranking factor. Large, uncompressed images slow down page load times, which negatively affects Core Web Vitals scores and LCP. PageSpeed Insights explicitly recommends next-gen formats and proper image sizing as high-impact improvements.