AVIF, WebP or JPEG: Picking an Image Format in 2026

Description and use

Choosing an image format (AVIF, WebP, JPEG) for product pages reduces file sizes by 30‑50 % on modern browsers while maintaining legacy support via the <picture> element.

Problem

Choosing an image format that balances file size, quality, and browser support for product pages.

Outcome

Serving AVIF first, then WebP, then JPEG cuts image sizes by 30‑50% for modern browsers while guaranteeing JPEG fallback for legacy browsers, with negligible runtime impact due to build‑time caching.

Workflow

• 1. Encode source image to AVIF, WebP, and JPEG at chosen quality settings.
• 2. Cache encoded outputs keyed on source hash and settings to avoid re‑encoding on unchanged images.
• 3. Generate <picture> markup with <source> elements for AVIF and WebP, followed by <img> fallback to JPEG, including width/height and alt attributes.
• 4. Insert generated markup into product page template.
• 5. Deploy build artifacts; browsers automatically select first supported format.

Evidence

AVIF cuts photo file size 30-50% below JPEG but encodes slower

Source

I shipped a product page last month with a hero photo that weighed 1.4MB as JPEG. Re-encoded as AVIF it dropped to 320KB with no visible loss.

Source

The picture element tries each format top to bottom automatically

Source

I handle this with a cache. I hash the source image plus the encode settings, and if nothing changed I reuse the output.

Source