WebP vs JPEG vs PNG — Which Format to Use and How to Convert

WebP reduces file size by 25-34% compared to JPEG and up to 26% compared to PNG, at similar quality. Most sites should serve WebP for photos and graphics.

Use the Image Compressor to compress and convert images online.

Format comparison

When to use each

Photos (natural imagery):
  Prefer: WebP → AVIF (better quality at same size)
  Fallback: JPEG

Graphics with few colors, text, or transparency:
  Prefer: PNG (if transparency needed) or WebP
  Alternative: SVG (if vector)

Icons, logos, simple graphics:
  Prefer: SVG (resolution-independent)
  Fallback: PNG or WebP

Animations:
  WebP (smaller than GIF)
  Or CSS/JavaScript animation

Convert to WebP

Using cwebp (command line)

# Install: sudo apt install webp  or  brew install webp

# Convert JPEG to WebP (default quality 80):
cwebp input.jpg -o output.webp

# Set quality (0-100):
cwebp -q 85 input.jpg -o output.webp

# Lossless mode:
cwebp -lossless input.png -o output.webp

# Batch convert:
for f in *.jpg; do cwebp "$f" -o "${f%.jpg}.webp"; done

Using ImageMagick

convert input.jpg -quality 85 output.webp
convert input.png output.webp  # lossless by default for PNG input

Using Python (Pillow)

from PIL import Image

def convert_to_webp(input_path: str, output_path: str, quality: int = 85) -> None:
    img = Image.open(input_path)
    img.save(output_path, 'webp', quality=quality, optimize=True)

# Convert all JPEGs in a directory:
from pathlib import Path

for img_path in Path('images/').glob('*.jpg'):
    output = img_path.with_suffix('.webp')
    convert_to_webp(str(img_path), str(output), quality=85)
    original_size = img_path.stat().st_size
    webp_size = output.stat().st_size
    print(f'{img_path.name}: {original_size//1024}KB → {webp_size//1024}KB ({(1-webp_size/original_size)*100:.1f}% smaller)')

Node.js (sharp)

import sharp from 'sharp'; // npm install sharp

// Convert to WebP:
await sharp('input.jpg')
  .webp({ quality: 85 })
  .toFile('output.webp');

// Convert to AVIF:
await sharp('input.jpg')
  .avif({ quality: 60 })
  .toFile('output.avif');

// Batch conversion:
import { glob } from 'glob';
import path from 'path';

const files = await glob('public/images/**/*.jpg');
for (const file of files) {
  const webpPath = file.replace('.jpg', '.webp');
  await sharp(file).webp({ quality: 85 }).toFile(webpPath);
}

Serve WebP with JPEG fallback

<!-- <picture> serves WebP to supported browsers, JPEG as fallback: -->
<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Photo" width="800" height="600" loading="lazy">
</picture>

Next.js automatic WebP conversion

import Image from 'next/image';

// Next.js Image component automatically serves WebP where supported:
export default function Hero() {
  return (
    <Image
      src="/hero.jpg"
      alt="Hero"
      width={1200}
      height={600}
      priority
    />
  );
}
// Automatically: serves .webp to Chrome/Firefox, .jpg to Safari (older)
// After Safari 16+: serves .webp to all modern browsers

AVIF — the next step

AVIF (AV1 Image Format) offers 50% better compression than JPEG at equivalent quality, but is slower to encode:

# Convert to AVIF (avifenc):
avifenc --quality 60 input.jpg output.avif

# Python:
from PIL import Image
img = Image.open('input.jpg')
img.save('output.avif', quality=60)  # Requires pillow-avif-plugin

AVIF is supported in all modern browsers (Chrome 85+, Firefox 93+, Safari 16+). For new images, AVIF > WebP > JPEG.

Related tools

• Image Compressor — compress and convert images online
• Image Compression Guide — compression settings guide
• Responsive Images — srcset and sizes