How to Compress Images for the Web Without Wrecking Them
[object Object]
[object Object]
Step one: resize before you compress
This is the step people skip, and it is the one that does the most work. A 4000-pixel-wide photo displayed in an 800-pixel column is carrying 25 times more data than the screen can use. No amount of compression fixes that; you are compressing pixels that will be thrown away.
Halving both dimensions leaves a quarter of the pixels and typically cuts the file by 70% or more — before any compression at all.
| Use | Export width | Target size |
|---|---|---|
| Full-width hero | 1920 px | Under 200 KB |
| Blog body image | 800–1200 px | Under 100 KB |
| Product thumbnail | 400 px | Under 30 KB |
| Profile photo | 400 × 400 px | Under 50 KB |
| Open Graph share image | 1200 × 630 px | Under 150 KB |
Double these widths for high-density screens if sharpness matters. Resize with the image resizer.
Step two: pick the right format
| Format | Best for | Transparency | Relative size |
|---|---|---|---|
| WebP | Almost everything on the web | Yes | Smallest |
| JPG | Photographs; maximum compatibility | No | 25%–35% larger than WebP |
| PNG | Screenshots, logos, sharp text | Yes | Much larger for photos |
| AVIF | Smaller still, slower to encode | Yes | Smallest, less tooling support |
WebP is supported in every current browser. Convert with the image converter. Keep a JPG copy only if older non-browser software needs the file.
Step three: choose a quality level
| Quality | Size reduction | Use for |
|---|---|---|
| 90%–100% | 10%–30% | Print, archival, photography portfolios |
| 75%–85% | 50%–70% | The default for the web |
| 60%–75% | 70%–85% | Thumbnails, social, blog images |
| Below 60% | 85%+ | Only where size beats appearance |
Artefacts appear first around sharp edges and text, last in skies and skin. Photographs tolerate aggressive compression; screenshots do not — use PNG or WebP lossless for those.
Why this affects your search ranking
Google measures Largest Contentful Paint — how long the biggest visible element takes to appear — as a ranking signal, with a target under 2.5 seconds. On most pages that element is an image.
The commercial side is better documented than the SEO side: roughly half of mobile users abandon a page taking over three seconds, and repeated studies at large retailers have found each additional second measurably reduces conversion.
Mistakes worth avoiding
- Compressing an already-compressed file. Each lossy save re-encodes degraded data. Always work from the original.
- Using PNG for photographs. PNG is lossless and stores every pixel — for a photo that means an enormous file for no benefit.
- Forgetting width and height attributes. Without them the browser cannot reserve space, and the page jumps as images load — layout shift is itself a Core Web Vitals factor.
- Not using `srcset`. Offering several sizes lets the browser pick the right one for the device instead of sending a desktop image to a phone.
- Ignoring EXIF. Photos carry GPS coordinates. Re-encoding strips them, which is worth knowing before publishing pictures taken at home.
Frequently asked questions
What is the best image format for the web?
WebP for almost everything — typically 25%–35% smaller than JPG at equivalent quality, with transparency support and universal browser support. Keep JPG as a fallback only for non-browser software.
What quality setting should I use?
Start at 80%. For photographs, 75%–85% gives a large size reduction with no visible difference at normal viewing size. Screenshots and text images need higher settings or a lossless format.
Should I resize or compress?
Both, in that order. Resizing to the display size is the larger saving; compression then reduces what remains. Compressing a 4000-pixel image for an 800-pixel slot wastes most of the file either way.
Does compressing images help SEO?
Indirectly but genuinely. Largest Contentful Paint is a ranking signal and is usually determined by the main image. Faster pages also convert better, which is the more reliable benefit.
Will compression remove my photo metadata?
Re-encoding through a browser canvas discards EXIF data including GPS coordinates, camera model and timestamps — useful before posting photos publicly.
Free tools for this
Everything above, worked out for your own numbers in a few seconds.
Related guides
This guide is general information from ToolNest, not financial, legal or tax advice. Figures are estimates based on the assumptions stated and current at the time of writing. For decisions that matter, speak to a qualified professional in your own country.