How to compress images without losing quality (JPG, PNG, WebP in 2026)

The three levers you can pull

Every image tool exposes the same three variables:

1. Format - JPG, PNG, WebP, AVIF (each with different tradeoffs).
2. Quality - how aggressively the encoder throws away detail.
3. Dimensions - the actual pixel width and height.

Most people fixate on quality when the biggest win is switching format or shrinking dimensions.

Format cheat sheet

• JPG - best for photos. Lossy. Bad at transparency (doesn't have any) and text/edges.
• PNG - best for logos, icons, screenshots with sharp text. Lossless. Terrible for photos (files are massive).
• WebP - 25-35% smaller than JPG at the same visual quality. Handles both lossy (photo) and lossless (logo) modes. Supports transparency. Universal browser support since 2020.
• AVIF - even smaller than WebP (30-50% smaller than JPG) but slow to encode and support is Chromium-heavy. Great for hero images where a few extra encode seconds are acceptable.
• SVG - vector, so it scales infinitely. Only for logos, icons, and diagrams - not for photos.

Default choice in 2026: WebP for everything except icons (SVG) and edge cases where a downstream tool refuses WebP (increasingly rare).

The JPG quality sweet spot

The relationship between JPG quality and file size is not linear. Every popular photo library has independently found the same three thresholds:

• Quality 90+ - visually lossless; huge file. Only worth it for photos that will be printed or archived.
• Quality 75-85 - the sweet spot. No visible loss for 99% of viewers on 99% of screens. Files are typically 40-60% smaller than quality 95.
• Quality 60-75 - visible loss on smooth gradients (skies) but fine for most content photos and thumbnails.
• Below 60 - obvious artifacts. Avoid unless you deliberately want a heavily-compressed look.

Image Compressor defaults to 78 - right in the sweet spot.

The dimensions win nobody talks about

A 4K photo pushed to Instagram gets downscaled by Instagram's servers to a smaller size before display. Uploading the original 4K JPG wastes 90% of the bytes - Instagram just throws them away.

Rule of thumb: image dimensions should match display dimensions × 2 (for retina). If your website hero displays at 1200×600, upload a 2400×1200 image. Anything larger is wasted bandwidth and slower loads.

Image Resizer has presets for every social platform's actual displayed dimensions - Instagram feed (1080×1080), YouTube thumbnail (1280×720), Twitter card (1600×900), etc. Resize once, upload the right size.

The compression workflow that works

Three-step process that gets photos from a phone-camera 8MB down to a web-ready 200KB with no visible quality loss:

1. Resize to display dimensions × 2 with Image Resizer. Biggest single win.
2. Convert to WebP at quality 78 with Image Compressor. Second-biggest win.
3. Sanity-check the final file - if it's still >500KB for a small image, either the source has ridiculous detail (photograph of leaves) or the format choice is wrong.

Typical result: a 4-6MB phone photo becomes a 150-300KB WebP with no visible quality difference at normal screen viewing.

When PNG is still right

PNG stays the default for:

• Logos and icons with sharp edges - JPG smears edges into artifact halos.
• Screenshots with text - same reason. UI screenshots must be lossless.
• Anything with transparency - until you migrate to WebP.
• Favicons and app icons - Favicon Generator and App Icon Generator both export PNG for exactly this reason.

The one PNG optimization worth knowing: PNG has multiple compression levels, but they're all lossless - level 9 is smaller than level 1 but takes 10× longer to encode. Most tools default to 6.

For real PNG size wins, convert screenshots and logos to WebP lossless mode - you get PNG-equivalent quality at 40-70% smaller.

The lie about "PNG-24 vs PNG-8"

PNG-8 (indexed 256-color) can be dramatically smaller than PNG-24 (true color) for images with few colors - logos with 3 or 4 solid colors compress incredibly well as PNG-8. Most modern tools (including Image Compressor) don't expose PNG-8 explicitly because the format decision is made per-image. If a logo compresses badly as PNG, try SVG first - it's usually smaller and infinitely scalable.

Batch compression

For large batches (a whole folder of product photos), do the resize step first - the file size wins from resizing dwarf what compression can do. Image Compressor accepts multiple files at once and downloads them individually or as a batch. Everything runs in the browser via the Canvas API - files never upload.

The one thing to remember

If you take one thing from this guide: switch your default from JPG to WebP. Every browser you care about supports it, files are 25-35% smaller at the same quality, and CDNs happily serve it. The 8-year window where "WebP compatibility" was a real concern closed years ago.

Related tools you'll reach for in the same session:

• Image Compressor - the primary tool.
• Image Converter - for format-only changes (PNG → WebP without resizing).
• Image Resizer - for the dimensions step.
• Placeholder Image Generator - for mockups before real images exist.
• Favicon Generator - the multi-size favicon package.