How to compress images without ruining them

Every webpage you ship is mostly images. Compress them and your site loads faster, your hosting bill shrinks, and your visitors stop seeing layout shifts while photos load in. The Image Compressor makes the tradeoff explicit.

Format quick-pick

• JPEG: the right answer for photos. Lossy; small. The original web image format and still the most compatible.
• PNG: the right answer for screenshots, line art, icons, and anything with crisp edges or transparency. Lossless; larger.
• WebP: the right answer for everything else, in 2026. Roughly 25–35% smaller than JPEG at the same visual quality. Supports both lossy and lossless and transparency. Universal browser support since 2020.
• AVIF: even smaller than WebP (often 50% smaller than JPEG), but encoder/decoder support is still imperfect on older systems. Use when you control both ends.

The compressor lets you pick the output format. If in doubt: WebP for everything, fall back to JPEG only if the target system doesn't accept WebP (some older email clients, some PDF embedders).

The quality slider

JPEG and WebP both use a quality setting from 1–100. Higher quality means bigger file size and less visible compression artifacts. The practical thresholds:

• 95–100: indistinguishable from the original. Files are big. Useful for archive copies.
• 80–90: visually identical to most viewers. This is your default. A 90% JPEG is ~30% the size of a lossless PNG of the same image.
• 70–80: still excellent for most photos. Save ~15% more.
• 60–70: starts being noticeable on smooth gradients (skies, skin). Fine for thumbnails.
• Below 60: visible artifacts. Use only when bandwidth is the dominant constraint.

The sweet spot for most uses is WebP at 80%. Halves the file size of a typical JPEG-from-camera, no visible difference.

Resize before you compress

The most underrated compression technique is resampling. A 4000×3000 photo displayed at 800×600 is wasting 95% of its pixels. Reducing the image to its actual display size before compression beats every quality-slider tweak.

A workflow that works:

1. Decide the largest size your image will ever be displayed at. For a typical blog post, 1600 pixels wide is generous.
2. Resize the source to that dimension.
3. Compress to WebP at 80%.
4. Ship.

If you want responsive images, generate two or three sizes (1600, 800, 400 wide) and use <picture> or srcset to pick the right one per device. That's beyond this tool, but the principle is the same: smallest pixels × decent compression beats biggest pixels × aggressive compression.

Three things to verify after compression

1. No banding in gradients. Skies, soft shadows, and skin tones are where over-compression shows first. Zoom in 200% and check.
2. No ringing around sharp edges. Crisp text inside a photo (a sign, a screen) gets faint "echoes" at low quality settings.
3. Transparency is preserved (if you needed it). JPEG strips alpha channels — converting a PNG with transparency to JPEG silently fills it with white. WebP preserves transparency; use it.

When to skip compression

If your image is already on the web and another service compressed it — compressing again loses quality for almost no size gain. JPEG-of-JPEG-of-JPEG accumulates visible artifacts. Always start from the highest-quality source you have.