Performance & Optimization

Image Formats

Modern image formats and optimization.

Image Format Comparison

WebP
• 25-35% smaller than JPEG/PNG
• Supports transparency
• Good browser support (97%)

AVIF
• 50% smaller than JPEG
• Better quality at low bitrates
• Growing browser support (85%)

JPEG
• Good for photos
• No transparency
• Universal support

PNG
• Lossless compression
• Supports transparency
• Larger file sizes

Picture Element

Serve modern formats with fallback

   srcset="image.avif" type="image/avif">
   srcset="image.webp" type="image/webp">
   src="image.jpg" alt="...">


Browser picks best supported format

Image Compression Tools

ImageOptim (GUI - Mac)
Drag & drop optimization

Squoosh (Web)
https://squoosh.app
Online image optimization

Sharp (Node.js)
npm install sharp

const sharp = require(sharp);
sharp(input.jpg)
  .resize(800)
  .webp({ quality: 80 })
  .toFile(output.webp);

CLI Tools

cwebp (WebP conversion)
cwebp -q 80 input.jpg -o output.webp

avifenc (AVIF conversion)
avifenc --min 0 --max 63 -a end-usage=q -a cq-level=32 input.jpg output.avif

ImageMagick
convert input.jpg -quality 85 output.jpg

jpegoptim
jpegoptim --max=85 *.jpg