Images account for more than half the bytes on the average web page. A single uncompressed hero image can push your LCP score past 4 seconds on mobile — a ranking signal Google has weighted heavily since the Core Web Vitals rollout. Compression is not optional; it is table stakes for any site that wants to load fast.
This guide explains the formats, the numbers, and the settings that actually matter — and how to get from a 2 MB DSLR export to a 120 KB web-ready image in under a minute.
Why image compression affects rankings
Google's Largest Contentful Paint (LCP) measures how long the biggest visible element takes to load. For most pages, that element is an image — the hero, the product photo, or the featured blog thumbnail. Google considers LCP under 2.5 seconds “Good”; above 4 seconds is “Poor” and a direct ranking disadvantage.
A 1.5 MB JPEG hero image over a typical 4G connection adds roughly 3–4 seconds to LCP on its own. Compress it to 150 KB and that delay drops below 300ms — a 10× improvement from one change, zero code required.
JPEG vs PNG vs WebP: which format to use
Choosing the right format before compressing is the highest-leverage decision you can make.
- WebP — Use this for almost everything on the web. It is 25–35% smaller than equivalent JPEG and supports transparency like PNG. Every modern browser supports it. If you take away one tip from this article, it is: convert your JPEG and PNG assets to WebP.
- JPEG — Best for photographs when you need maximum compatibility (email, older CMSes, some social platforms). Lossy compression; quality slider has a real effect. Aim for 75–85% quality for web use.
- PNG — Use only when you need true lossless quality or transparency and WebP is not an option (rare). PNG is lossless, so the quality slider has no effect — the only way to reduce a PNG meaningfully is to resize its dimensions or convert to WebP.
Quality settings: what the numbers mean
Quality is a scale from 1–100 that controls the compression ratio for JPEG and WebP. It is not a linear scale — the difference between 95% and 85% is barely visible, but the file size difference is substantial.
- 95% (Max Quality) — Nearly lossless. Use for source assets you will edit further, not for production web delivery.
- 85% (High) — Excellent visual quality. Right for hero images and product photography where quality is the priority.
- 75% (Balanced) — The recommended default. Achieves 40–60% file size reduction with no perceptible quality loss for most images.
- 65% (Web) — Strong balance for general web images: blog thumbnails, section backgrounds, team photos.
- 45% (Aggressive) — Maximum reduction. Fine for thumbnails, avatars, and decorative images where exact fidelity does not matter.
Resize before compressing
Serving a 4,000 px image in a 600 px column wastes bandwidth on pixels the browser scales away. Resize to the actual display width (or 2× for retina) before compressing. A 600 px WebP at 75% quality is always going to beat a 4,000 px JPEG at 45%.
As a rough guide: hero images → 1,440–1,920 px max; article body images → 800–1,000 px; thumbnails → 400–600 px; avatars → 100–200 px.
Target file sizes for Core Web Vitals
- Above the fold / LCP image: under 200 KB — under 100 KB is excellent
- Blog hero / article thumbnail: 50–120 KB
- Product images: 80–150 KB (balance quality against conversion impact)
- Background / decorative: 30–60 KB
- Icons and logos: use SVG; if raster, under 20 KB
How to compress images step by step
- Upload — Drag your images onto the Image Compressor, click to browse, or paste from clipboard with Ctrl+V. Multiple files at once for batch processing.
- Set format to WebP — Unless you have a reason to stay on JPEG or PNG, WebP delivers better results at every quality level.
- Choose a quality preset — Start with Balanced (75%). Check the before/after slider. If quality looks acceptable, try Web (65%) for even smaller files.
- Set a max width — Enter the maximum display width (e.g. 1440 px for hero images, 800 px for body images) to resize proportionally in the same step.
- Compress All + Download ZIP — Process the full batch and download all compressed images in one archive.
Batch compression tips
When compressing a folder of mixed images in one go, use a single global quality setting rather than trying to tune each individually. A blanket WebP at 75% will get you 80% of the gains with none of the manual work. Then spot-check the 5–10 largest files with the before/after slider before downloading.
The one mistake to avoid
Never compress a file that is already compressed. Re-compressing a JPEG at low quality multiplies the compression artefacts — each generation degrades the image further without saving meaningful file size. Always compress from the highest-quality source you have (the original export from Lightroom, Figma, or Photoshop). If you only have a compressed version, convert it to WebP at 85% and accept the slightly larger output.
PNG-specific tips
If you are stuck with PNG output and cannot convert to WebP:
- The quality slider does nothing for PNG — PNG is always lossless.
- Resize aggressively. Halving dimensions quarters the file size.
- For logos and icons, use SVG instead — infinitely scalable at near-zero file size.
- For screenshots with transparency, WebP almost always beats PNG — convert if you can.
FAQ
Does compressing images affect SEO directly? Not as a direct ranking signal on its own — but it directly improves LCP, which is a Core Web Vital and a confirmed Google ranking factor. Smaller images also improve crawl efficiency on large sites.
Is the compression lossless? For JPEG and WebP, no — they are lossy formats. PNG is lossless. In practice, JPEG at 85% and WebP at 75% are visually indistinguishable from the original for photographs.
Are my images uploaded to a server? No — the compressor runs entirely in your browser using the Canvas API. Your images never leave your device.
What about AVIF? AVIF achieves even better compression than WebP but browser support and encoding speed still lag. For now, WebP is the safer choice for web delivery.
Wrapping up
Image compression is the highest-ROI performance optimisation for most websites: one pass over your image library, one format change to WebP, and you can cut page weight by 50–80% with no visible quality loss. The before/after slider removes the guesswork — see exactly what you are shipping before you download.
Related free tools: Image Compressor · Image Resizer · Image Cropper · Meta Tag Generator