I spent last month migrating 23 client sites from JPEG/PNG to WebP and AVIF. Here's what I wish someone told me before I started.

---

AVIF vs WebP: the real numbers

AVIF is about 30% smaller than WebP at the same quality level. But Safari support is still patchy — if your traffic is 40%+ iOS, you need <picture> tags with WebP fallback. No way around it.

The biggest win wasn't the format

The single biggest reduction came from capping max image width at 1200px and setting quality to 80. One site went from 9.4MB to 318KB per page — a 97% reduction — just from those two settings plus lazy loading.

The format switch was the cherry on top, not the cake.

Tools I used daily

SmartImgKit — quick batch conversions in the browser. No uploads, no signup, drag and drop. Handles the 80% case where you don't need a CLI pipeline. Supports JPG, PNG, WebP, AVIF, GIF, BMP, TIFF.

ImageMagick — server-side batch jobs for when you need automation.

Squoosh — one-off fine-tuning with visual comparison.

Sharp (Node.js) — build pipeline integration.

The HEIC surprise

Every iPhone user's photos are HEIC. Most web tools crash on them. You need a converter that handles them before the pipeline — SmartImgKit's HEIC converter works locally in-browser, no uploads.

The 80/20 rule

Format + max width + lazy loading = 80% of the gain. Everything else is diminishing returns. Don't over-engineer it.