Modern Image Formats: WebP, AVIF, and Beyond

· Performance Engineering · 18 minute read

Choosing the right image format can shave seconds off load time while keeping visual fidelity intact. We benchmarked modern codecs to help you deliver pixel-perfect flash preview experiences on every device.

1. Benchmark methodology

We tested AVIF, WebP, JPEG XL, and high-quality JPEG using a dataset of 120 product, portrait, architectural, and illustration assets. Each image was encoded at target quality levels (SSIM > 0.98) using libaom, libwebp, and libjpeg-turbo. Decoding tests ran on Chrome, Firefox, Safari Technology Preview, and a mid-range Android device.

Format Average size (KB) Decode speed desktop (ms) Decode speed mobile (ms) Browser support (Jan 2025)
AVIF 152 18 34 Chrome, Edge, Firefox, Android (partial Safari)
WebP 210 12 22 All major browsers
JPEG XL 168 20 36 Chrome Canary flag, Firefox nightly
JPEG 320 10 18 Universal

2. Choosing the right format

For flash preview, we recommend a tiered approach:

  • Primary: Serve AVIF to browsers with full support. It offers the best compression while retaining detail.
  • Fallback: Serve WebP to ensure compatibility with Safari 17 and older Android devices.
  • Legacy: Provide JPEG for long-tail browsers or email embeds.

Use the type attribute within <source> elements so browsers pick the best option. Pair with sizes and srcset attributes for responsive delivery.

3. Encoding tips

Encoding strategy matters as much as format choice. Follow these tips:

  1. Batch encode using Node.js or Go pipelines that integrate with your DAM.
  2. Enable grain synthesis for film or fashion imagery to prevent plastic textures.
  3. Store original RAW files separately and re-encode when codec libraries improve.
Developers analysing performance charts for image formats
Compression tweaks yield measurable gains. Track every change with your analytics dashboard.

4. Implementation checklist

  • Generate AVIF and WebP derivatives during build or upload.
  • Use Service Workers to cache derivatives locally for offline preview.
  • Integrate with our Metadata Lab to track which formats each asset has available.
  • Monitor Core Web Vitals weekly and re-encode when metrics degrade.

5. Accessibility and SEO considerations

Fast imagery is only part of the story. Maintain descriptive alt text, provide captions for complex visuals, and supply lazy-loading placeholders with dominant colour palettes to reduce layout shifts. Structured data (Product, ImageObject) helps search engines understand and feature your visuals in rich results.

6. Looking ahead

JPEG XL remains promising thanks to lossless compression and progressive decoding. While support is limited today, design your pipeline to add new formats quickly. Abstractions in your CMS or CDN make future adoption painless.