Image Compression Formats — JPEG, PNG, WebP, AVIF Compared

Choosing the right image format before compressing can save 40–90% of file size. JPEG uses lossy compression optimized for photographs. PNG uses lossless compression for graphics with transparency. WebP and AVIF are modern formats that outperform both in most scenarios.

Use the Image Compressor to compress images in any format.

Format comparison at a glance

JPEG

Best for: Photographs, complex images with gradients and many colors.

How it works: JPEG uses Discrete Cosine Transform (DCT) to compress blocks of pixels. It discards high-frequency detail (fine texture) that human vision is less sensitive to.

Key characteristics:

• Lossy — every save degrades quality slightly
• File size vs quality controlled by “quality” setting (1–100)
• No transparency support
• Re-encoding from a JPEG adds more artifacts — always save from original

Quality settings:

Quality 100: Near-lossless, very large files
Quality 85:  Excellent quality, good compression (recommended)
Quality 75:  Good quality, significant compression
Quality 60:  Acceptable for web thumbnails
Quality < 50: Visible artifacts, use only for previews

File size examples (1920×1080 photo):

• Quality 100: ~800KB
• Quality 85: ~200KB
• Quality 75: ~120KB
• Quality 50: ~60KB

PNG

Best for: Logos, icons, screenshots, images requiring transparency, images with text.

How it works: PNG uses DEFLATE (zlib) lossless compression. It doesn’t discard any pixel data — the decoded image is identical to the original.

Key characteristics:

• Lossless — no quality loss on any save/encode
• Full alpha channel transparency (0–255 opacity per pixel)
• Not appropriate for photographs (files become huge)
• Best for images with flat colors, sharp edges, limited color palette

PNG variants:

• PNG-8: 256 colors (like GIF), good for simple graphics
• PNG-24: Full color, no transparency
• PNG-32: Full color + alpha transparency

File size examples (1920×1080 screenshot with text):

• PNG: ~400KB
• JPEG quality 85: ~150KB (but text artifacts visible!)
• WebP lossless: ~280KB

Text and graphics with sharp edges should always use PNG or WebP (lossless). JPEG’s artifacts are most visible on sharp text edges.

WebP

Best for: Most web images — replaces both JPEG and PNG on the web.

Created by: Google (2010), based on VP8 video codec.

Key advantages over JPEG/PNG:

• 25–35% smaller than JPEG at equivalent visual quality
• 25–45% smaller than PNG for lossless images
• Supports transparency (unlike JPEG)
• Supports animation (like GIF, but with much better compression)
• Both lossy and lossless modes

Browser support: 97%+ (all modern browsers). Only IE doesn’t support it.

Generating WebP:

# Using cwebp (Google's tool):
cwebp -q 80 image.jpg -o image.webp      # Lossy (quality 80)
cwebp -lossless image.png -o image.webp  # Lossless

# Using ImageMagick:
convert image.jpg -quality 80 image.webp

# Using Sharp (Node.js):
sharp('image.jpg').webp({ quality: 80 }).toFile('image.webp');

AVIF

Best for: Next-gen web images — best compression available for photos.

Created by: Alliance for Open Media (2019), based on AV1 video codec.

Key advantages over WebP:

• 50% smaller than JPEG at equivalent quality
• 20% smaller than WebP at equivalent quality
• HDR support
• Better at very high compression levels (less banding)

Browser support: ~93% (Chrome 85+, Firefox 93+, Safari 16+, Edge 121+).

The tradeoff: AVIF encoding is slow — 10–100x slower than JPEG. Fine for CDN pre-processing, not suitable for real-time user upload encoding.

# Using avifenc:
avifenc --quality 60 image.jpg image.avif

# Using Sharp (Node.js):
sharp('image.jpg').avif({ quality: 60 }).toFile('image.avif');

Serving modern formats with fallbacks

<!-- HTML picture element: browser chooses best supported format -->
<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description" loading="lazy">
</picture>

<!-- Browser priority: AVIF → WebP → JPEG -->

Next.js automatic optimization

import Image from 'next/image';

// Next.js automatically serves WebP/AVIF when browser supports it:
<Image src="/photo.jpg" width={800} height={600} alt="Description" />

Next.js converts and serves the optimal format per browser, caches the results, and handles responsive sizes automatically.

CDN-based optimization

Most CDNs (Cloudinary, Cloudflare, Imgix) automatically serve WebP or AVIF:

<!-- Cloudinary: auto format selection: -->
<img src="https://res.cloudinary.com/demo/image/upload/f_auto,q_auto/sample.jpg">

<!-- Cloudflare Images: automatic optimization: -->
<img src="/cdn-cgi/image/format=auto,quality=80/image.jpg">

Compression decision tree

Is it a photograph or complex image?
├─ Yes → WebP lossy (q80) or AVIF lossy (q60)
│        Fallback: JPEG q85
└─ No
   Is it a logo/icon that can be vector?
   ├─ Yes → SVG (smallest, infinitely scalable)
   └─ No
      Does it need transparency?
      ├─ Yes → WebP lossless or PNG-32
      └─ No
         Is it a simple graphic (few colors, sharp edges)?
         ├─ Yes → WebP lossless or PNG
         └─ Consider WebP lossy still (often smaller)

Related tools

• Image Compressor — compress any image format online
• Image Compression Guide — compression techniques
• PNG Compressor Online — PNG-specific compression