AVIF vs WebP vs JPEG XL in 2025 — A Practical, Measured Comparison

As of 2025, the practical choices for modern image formats are AVIF, WebP, and JPEG XL (JXL). Using datasets close to production workloads, we compare them across:

• Bitrate vs. perceived quality (visual assessment)
• Objective metrics (SSIM/PSNR/Butteraugli, etc.)
• Decode time (CPU/mobile SoC) and memory footprint
• Browser/ecosystem support and integration into CDNs/optimization pipelines

Key takeaways

• For many photographs, efficiency tends to be AVIF ≥ JPEG XL > WebP. For textures/illustrations, WebP can perform surprisingly well.
• Decode speed tends to be WebP ≈ JPEG XL > AVIF. The gap widens on low‑end devices.
• Compatibility: WebP remains the safest bet. AVIF is widely supported by major browsers. JPEG XL is making a comeback, but staged rollout is pragmatic today.
• Rollout strategy depends on client support × image characteristics × performance KPIs (LCP/TTFB/CPU). Fallback design is critical.

Method and datasets

Datasets

• Photos: landscapes/portraits/night/food/product shots (1200–4000px)
• Illustrations/UI: vector‑like graphics, logos, screenshots
• Screen content: text‑heavy, code editors

Metrics and measurement

# Reference: pseudo script for conversion + objective metric calculation
for img in dataset/*.jpg; do
  avifenc --min 20 --max 35 "$img" "out/${img##*/}.avif"
  cwebp -q 75 "$img" -o "out/${img##*/}.webp"
  cjxl "$img" "out/${img##*/}.jxl" -d 1.2

  # SSIM / PSNR (pseudo commands)
  ssim "$img" "out/${img##*/}.avif" >> metrics.csv
  psnr "$img" "out/${img##*/}.avif" >> metrics.csv
done

Results at a glance

Rate–distortion (quality vs size)

• Photos: AVIF is often the smallest for equivalent visual quality, with 10–25% savings.
• Illustration/screens: WebP artifacts are less noticeable, so size gaps narrow. JXL excels at fine detail preservation.

Decode performance (perceived/measured)

• Mobile SoCs: WebP and JXL tend to paint earlier. AVIF slows down more as compression gets aggressive.
• LCP impact: Prefer WebP/JXL for hero images; a practical split is “Hero = WebP/JXL, in‑article = AVIF.”

Practical rollout guidance

Recommended presets and branches

{
  "photo": {
    "primary": "avif:q=28-32",
    "fallback": ["webp:q=75", "jpeg:q=80"]
  },
  "ui_illustration": {
    "primary": "webp:q=75",
    "optional": "jxl:d=1.2",
    "fallback": ["png:optimized"]
  },
  "screenshot_text": {
    "primary": "jxl:d=1.0",
    "fallback": ["webp:q=80", "png:optimized"]
  }
}

srcset/sizes and format negotiation

• Use CDN content negotiation via the Accept header to co‑optimize format and size.
• Design sizes accurately to prevent over‑delivery. Use /en/tools/srcset-generator.

Caching strategy

• Prefer Cache-Control: public, max-age=31536000, immutable (assuming filename hashing).
• If you vary by format, account for Vary: Accept and Content‑DPR.

Next.js integration (example)

// Extended loader (pseudo)
export function imageUrl(src: string, fmt: 'avif'|'webp'|'jxl'|'jpeg', w: number) {
  const u = new URL(process.env.NEXT_PUBLIC_IMG_CDN!);
  u.pathname = src;
  u.searchParams.set('w', String(w));
  u.searchParams.set('fmt', fmt);
  return u.toString();
}

Quality assurance (QA)

• A/B test LCP/FID, dwell time, and CTR.
• Visual regression with heat‑mapped diffs to catch breakage.

FAQ

• Q: Is it safe to use JPEG XL now?

• A: Stable support is progressing. A hybrid strategy is pragmatic: lead with WebP/AVIF and introduce JXL gradually while monitoring CDN/client coverage.

• Q: How do I handle slow AVIF decode on low‑end devices?

• A: Prefer WebP/JXL for hero images and use AVIF for in‑content images and thumbnails. Monitor LCP and tune thresholds accordingly.

• Q: Can I mass‑convert all my JPEGs?

• A: Photos usually benefit. UI/text needs more care. Use per‑use‑case presets and ship with visual regression gates.