How to Compress Images Without Losing Quality

A typical website wastes 50–70% of its image bandwidth on overcompressed-or-undercompressed files. Either the images are huge and slow, or they're so over-compressed they look amateur. The sweet spot isn't hard to hit it just requires understanding what each format does.

Here's how to compress images effectively for the web.

Step 1: Pick the Right Format

Format matters more than compression settings. The wrong format can't be saved by tweaking quality.

Image type	Best format	Why
Photos	WebP, then JPEG	Lossy compression handles photographic gradients well
Logos, icons, line art	SVG, then PNG	Lossless, sharp edges, transparency
Screenshots	PNG, then WebP	Lossless preserves text crispness
Animations	WebP, then GIF	WebP animations are 60%+ smaller than GIF
Photos with transparency	WebP, then PNG	WebP supports both lossy compression and alpha

For most modern websites: WebP for photos, SVG for icons, PNG for screenshots when text clarity matters.

Step 2: Resize Before Compressing

Compression won't help a 4000-pixel-wide image used at 800 pixels. The smartest size optimization happens at the resize step.

Rule of thumb: size your images at most 2x the largest display size (for retina). A 800-pixel-wide blog image needs at most a 1600-pixel source. Anything bigger is wasted bytes.

Use the image resizer to size images correctly before compressing. Drop the original, set the target width, lock the aspect ratio, download.

Step 3: Compress to the Right Quality

For lossy formats (JPEG, WebP), the quality setting controls the size/quality tradeoff. Most images have a "sweet spot" you can find empirically:

Quality 90–100: practically no visible difference from original. Wasted bytes.
Quality 75–85: sweet spot for most photos. 50–70% smaller than original, indistinguishable to most viewers.
Quality 60–75: noticeable on careful inspection but acceptable for thumbnails or background images.
Quality 40–60: visible artefacts (banding in skies, blocking in details). Avoid for primary content.
Below 40: clearly degraded. Only use for very small thumbnails.

The JPG compressor shows live before/after size comparison and a preview as you slide the quality. Find the lowest quality where the image still looks fine, then use that.

Step 4: Convert to WebP for Modern Browsers

WebP gives you 25–35% smaller files than JPEG at equivalent visual quality. Browser support is universal in 2026 every browser released in the last 5 years supports it.

The WebP converter handles JPEG/PNG → WebP conversion. Drop the file, select WebP output, set quality 75–85, download.

For maximum compatibility, serve WebP with a JPEG/PNG fallback using HTML's <picture> element:

<picture>
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Hero image">
</picture>

Modern browsers grab the WebP; older browsers fall back to JPEG.

Step 5: Strip Metadata

Photos from cameras and phones contain EXIF metadata: GPS coordinates, camera model, exposure settings, timestamp. This metadata can add 5–50 KB per photo and may leak privacy information (location data especially).

Browser-based image tools that re-encode through Canvas API automatically strip EXIF the Canvas doesn't preserve it. The JPG compressor and WebP converter both strip metadata as a side effect.

For maximum control, dedicated EXIF strippers exist, but for most use cases the re-encoding approach is sufficient and gives you a smaller file at the same time.

Step 6: Use Modern Encoding Settings (When You Can)

If you're working with command-line tools like cwebp or mozjpeg, you can tune advanced encoding parameters:

cwebp -q 80 -m 6 quality 80 with maximum compression effort
mozjpeg -quality 80 uses progressive encoding by default

Browser-based tools use the browser's built-in encoders, which are good but not as tunable. For a few critical images (hero shots, large product photos), command-line tools can squeeze out an extra 5–10%. For everything else, the browser's encoder is fine.

Step 7: Set Up Lazy Loading

Compression matters less if the user never sees the image. Modern browsers support native lazy loading:

<img src="hero.jpg" loading="lazy" alt="Hero">

Below-the-fold images load only when the user scrolls toward them. Combined with WebP and proper sizing, you can have a media-rich page that loads instantly.

A Practical Workflow

Pre-publishing an image for a blog post:

Resize the original to target width (e.g. 1600 px for a hero) using the image resizer.
Convert to WebP at quality 80 using the WebP converter.
(Optional) Compress the JPEG fallback at quality 75 using the JPG compressor.
Add the <picture> element to your post.
Verify the final file sizes a 1600-pixel hero should land somewhere between 80 KB (highly compressed) and 200 KB (high quality).

Total time: under 30 seconds per image once you've done it a few times.

Common Mistakes

Compressing a PNG with lossy compression

PNG is lossless. Re-saving as PNG doesn't compress further. To compress a PNG, either convert to WebP (lossy or lossless) or use a PNG-specific optimizer like pngquant.

Saving JPEG twice

Each JPEG re-encode loses quality (generation loss). If you're going to do multiple operations (crop, resize, then compress), do them in one pass on the original, not in three sequential JPEG saves.

Using max quality "just to be safe"

Quality 100 is rarely worth the extra size. The visual difference between 85 and 100 is usually invisible; the file size difference is often 2–3x.

Not testing on mobile

A small JPEG on desktop might still be too big on mobile data. Use Chrome DevTools' Network throttling to test how images load on slow connections.

For most images, the workflow is: resize → convert to WebP → done. The JPG compressor handles the cases where you need to stay in JPEG. Bookmark all three.