How to Compress Images Free: The Complete Guide (JPEG, PNG, WebP)

Images are almost always the largest assets on a web page — and the single biggest opportunity to improve load time. Compressing a 500 KB hero image to 80 KB can cut your LCP score by 400–600 ms on mobile. This guide covers everything you need to know: format choice, quality settings, batch compression, and how to check the results.

JPEG, PNG, or WebP — which format should you use?

The format decision often matters more than the quality slider. Each format has a different compression algorithm with different trade-offs:

• JPEG — best for photographs and images with gradients. Lossy, so some detail is discarded, but at 75–85% quality the difference is invisible to most viewers. Achieves 60–80% size reduction over raw files.
• PNG — best for logos, icons, screenshots, and anything requiring transparency. Lossless, so the quality slider has no effect on file size. To shrink a PNG, resize dimensions or convert to WebP.
• WebP — the modern standard. Supports both lossy and lossless modes, handles transparency, and is 25–35% smaller than equivalent JPEG or PNG at the same quality. Supported by all modern browsers since 2020.

For most website images, convert to WebP at 75–80% quality. For images that must support very old browsers or be downloaded and shared, use JPEG at 80%.

Choosing a quality setting

Quality settings on a lossy compressor (JPEG or WebP) control how much detail is discarded. The relationship is not linear — dropping from 90% to 75% quality can halve the file size while the change is barely visible. Here is a practical guide:

• 95% — Max Quality: Near-lossless. Use for source files, print assets, or images you plan to further edit. File size stays large.
• 85% — High: Light compression. Good for hero images and product photography where visual quality is critical.
• 75% — Balanced: The recommended default. 40–60% size reduction with no visible quality loss for typical photography.
• 65% — Web Optimised: 50–70% reduction. Acceptable for most secondary website images, blog post illustrations, social previews.
• 45% — Aggressive: Maximum reduction. Use for thumbnails, avatars, or background images where fine detail is irrelevant.

Why the quality slider does nothing for PNG

PNG is lossless by definition — the algorithm does not discard data, so there is nothing to trade off. If you upload a 2 MB PNG and set quality to 50%, the output PNG will be nearly the same size. To shrink a PNG significantly, you have two options: (1) resize it to its actual display width, or (2) convert it to WebP. Converting a 2 MB PNG to WebP at 80% quality typically produces a 200–400 KB file with no perceptible quality difference.

Resizing to display width

A common mistake is serving a 4,000 px wide image in a 700 px column. The browser downscales it, but the extra pixels are already downloaded. Using the Max Width setting in the compressor, you can resize the image to its actual display width before compressing. This alone can reduce file size by 70–80% for images shot on modern smartphones.

Common target widths: 1,200 px for full-width hero images, 800 px for article hero images, 400 px for thumbnails and card images. Always match the largest CSS width the image will ever be displayed at (multiplied by 2 for HiDPI screens if crisp rendering on Retina is important).

Batch compression and ZIP download

If you have multiple images, compress them all in one pass. Select several files (hold Ctrl or drag multiple) and click Compress All. Review each result using the before/after slider, then click Download ZIP to get all compressed images in a single archive — ready to drop into your project.

Core Web Vitals and image size targets

Google measures LCP (Largest Contentful Paint) — how long it takes the largest image or text block above the fold to render. Images directly drive this metric. Google's target is under 2.5 seconds on a simulated 4G mobile connection. Practical image size targets:

• Hero images: under 200 KB (ideally under 100 KB for mobile)
• Product images: 50–120 KB
• Thumbnails and icons: under 30 KB
• Blog post inline images: 60–120 KB