AVIF for photographs where encode time is acceptable. WebP as the compatible fallback and the default for everything else raster. PNG only for flat graphics, screenshots and anything needing lossless transparency. SVG for logos, icons and diagrams — if it was drawn with vectors, never rasterise it. JPEG only where you need maximum compatibility with old clients.
1. cwebp -q 80 in.png -o out.webp — quality 80 is the usual sweet spot for photos; below 70 artefacts become visible on skin and gradients.
2. avifenc -s 6 --min 20 --max 40 in.png out.avif — speed 6 balances encode time against size; speed 0 is dramatically slower for a small gain.
3. oxipng -o4 --strip safe img.png — lossless PNG re-compression, multithreaded, safe to run in a build.
4. pngquant --quality=65-85 img.png — lossy palette reduction; often halves a PNG that oxipng barely touches.
5. jpegoptim --max=82 --strip-all *.jpg — re-encodes in place and removes EXIF, which also removes GPS coordinates from user uploads.
6. svgo --multipass icon.svg — but keep removeViewBox disabled, or the SVG stops scaling.
7. magick in.jpg -resize 1600x -quality 82 out.jpg — resize before you compress; a 4000px source at quality 60 is always worse than a 1600px source at quality 82.
8. Always set width and height attributes so the browser reserves space — this is the cheapest fix for layout shift.
9. loading="lazy" decoding="async" on everything below the fold; fetchpriority="high" on the single LCP image and never lazy on it.
10. Keep srcset to a short ladder — 400, 800, 1200, 1600 — and set sizes to the real CSS width, or the browser picks the largest candidate every time.
Content-hash filenames and serve with Cache-Control: public, max-age=31536000, immutable. Add Vary: Accept only if you negotiate format server-side; otherwise leave it off so the CDN cache stays intact. Never gzip or brotli an already-compressed image — you spend CPU to add bytes.
Compare rendered size against natural size in DevTools (serving 2400px into a 600px slot is the most common single waste). View the AVIF and WebP output side by side at 100% before trusting a quality setting. And confirm the total image weight of your heaviest page — if it is over a megabyte, the format is not your problem, the number of images is.