How to Compress Images Without Losing Quality
Compress JPEG, PNG, and WebP images with no visible quality loss. Quality settings, lossless vs lossy, batch workflows. Free image compressor with live preview.
Why Image Compression Matters
Images are the heaviest assets on most web pages. HTTP Archive data shows images account for roughly 45% of a typical page's total weight. A single 3 MB hero image that could be 300 KB is the biggest drag on your Core Web Vitals score.
Compression reduces file size without making the image look different to a viewer. The goal is perceptual transparency: the compressed version looks identical to the original at normal viewing distance and screen resolution.
Below are concrete numbers. A 2400x1600 photo from a DSLR is roughly 4 MB as a high-quality JPEG. At quality 85, it drops to about 350 KB. At quality 70, it drops to 180 KB. At quality 50, it is 90 KB but the compression artifacts are obvious. The question is not whether to compress but how far you can go before the loss becomes visible.
JPEG Compression Settings
JPEG uses lossy compression. A quality setting of 100 preserves everything but produces the largest file. A setting of 0 produces an unrecognizable mess.
The sweet spot for web photos is quality 85-90. At quality 85, a typical photo is 60-80% smaller than quality 100 with no visible difference on a screen. Below quality 75, you start seeing compression artifacts: blockiness in sky areas, ringing around high-contrast edges, and washed-out colors.
Here is what you get at each quality level with a typical 4 MB photo:
| Quality | File Size | Reduction | Visible Loss? |
|---|---|---|---|
| 100 | ~2,000 KB | baseline | No |
| 90 | ~800 KB | 60% | No, even zoomed in |
| 85 | ~350 KB | 82% | No at normal viewing |
| 75 | ~180 KB | 91% | Slight, in gradient areas |
| 60 | ~120 KB | 94% | Visible artifacts |
| Below 50 | <80 KB | >96% | Unusable for most content |
The Image Compressor lets you adjust quality with a live preview so you can see exactly where detail is lost before saving.
PNG Compression: Color Depth Matters
PNG is lossless. You cannot discard quality to save space. What you can do is reduce the color depth:
- PNG-8: 256 colors, 1-bit transparency. Tiny files. Good for simple graphics, icons, and logos with flat colors. A 400x400 logo saved as PNG-8 might be 10-20 KB versus 80-150 KB as PNG-24.
- PNG-24: Millions of colors, full alpha transparency. Larger files. Required for screenshots, gradients, and images with smooth color transitions.
Converting a PNG-24 screenshot to PNG-8 usually produces visible banding in gradients. The fix is not PNG-8, it is converting to WebP (lossy or lossless). More on that below.
WebP Compression: The Biggest Win
WebP supports both lossy and lossless compression. For photos, lossy WebP at quality 80-85 produces files 25-35% smaller than JPEG at quality 85 with equivalent visual quality. This is the single biggest improvement you can make for image performance.
For PNG-style images (logos, graphics with transparency), lossless WebP is typically 26% smaller than equivalent PNG.
Here is a direct comparison from a real 2400x1600 photo:
| Format | Quality | File Size |
|---|---|---|
| JPEG | 100 | 1,450 KB |
| JPEG | 85 | 380 KB |
| WebP (lossy) | 85 | 260 KB |
| PNG-24 | lossless | 2,800 KB |
| WebP (lossless) | lossless | 2,100 KB |
The lossy WebP at quality 85 is 32% smaller than JPEG at 85 with the same visual quality. The lossless WebP is 25% smaller than the PNG original.
The Practical Compression Workflow
- Start with the highest quality source you have. For photos, that is the original camera JPEG or RAW export. For graphics, that is the PNG-24 export from your design tool.
- Compress with the Image Compressor. Adjust the quality slider and compare the preview against the original side by side.
- When you can no longer see a difference at normal viewing size, that is your quality setting. For most photos, this falls between 80 and 90.
- Convert to WebP with the PNG to WebP Converter for an additional 25-35% size reduction at the same visual quality.
Batch Processing for Sites with Many Images
For a site with 50 product photos, manual compression is impractical. The Image Compressor handles files one at a time for precision work.
For bulk operations, use command-line tools:
# Convert all JPEGs in a folder to WebP at quality 85
for f in *.jpg; do cwebp -q 85 "$f" -o "${f%.jpg}.webp"; done
# Resize all PNGs to max 1200px wide with ImageMagick
for f in *.png; do convert "$f" -resize 1200x "${f%.png}-resized.png"; done
The cwebp tool from Google and ImageMagick handle batch operations reliably. Node.js projects can use the sharp library for programmatic compression in build pipelines.
Try it yourself: open the Image Compressor. Upload a large JPEG photo. Slide the quality from 100 down to 85 and watch the file size drop by roughly half. At 85, compare the preview against the original. Then try quality 60 and look for blockiness in smooth gradient areas like skies.