How Image Formats (WebP vs. AVIF) Affect Your Performance Scores

Images are typically the heaviest resources on a web page, accounting for 40-60% of total page weight. The format you choose has a direct impact on loading speed, LCP, and your Lighthouse score.

The Format Landscape in 2026

JPEG (1992)

The workhorse of the web for three decades. Lossy compression with decent quality. Still works everywhere.

PNG (1996)

Lossless compression, supports transparency. Great for icons and graphics. Terrible for photographs (huge files).

WebP (2010, Google)

Modern format with both lossy and lossless modes. Supports transparency and animation. 30-50% smaller than equivalent JPEG.

AVIF (2019)

Next-generation format based on the AV1 video codec. 50-80% smaller than JPEG at comparable quality. Supports HDR and wide color gamut.

Size Comparison

The same 1920×1080 photograph at similar visual quality:

Format	File Size	Savings vs JPEG
JPEG (quality 80)	450 KB	—
WebP (quality 80)	280 KB	38% smaller
AVIF (quality 60)	150 KB	67% smaller
PNG	2,400 KB	433% larger

For a page with 5 hero/product images, switching from JPEG to AVIF could save 1.5 MB — transforming a 4-second LCP into a 2-second LCP on mobile.

Browser Support in 2026

Format	Chrome	Firefox	Safari	Edge
JPEG	✅	✅	✅	✅
PNG	✅	✅	✅	✅
WebP	✅	✅	✅	✅
AVIF	✅	✅	✅ (16.4+)	✅

As of 2026, both WebP and AVIF have 95%+ global browser support. There's no longer a strong reason to serve legacy formats to most users.

When to Use Each Format

Use AVIF for:

• Hero images and large photographs
• Product images on e-commerce pages
• Background images
• Any image where file size has the biggest LCP impact

Use WebP for:

• Thumbnails and smaller images
• Images that need fast encoding (AVIF encoding is slower)
• Animated images (replacing GIF)
• Fallback for older browsers

Use PNG for:

• Simple graphics with sharp edges (logos, icons)
• Images requiring lossless quality
• Screenshots and UI mockups
• Any image with text that must remain crisp

Use SVG for:

• Icons and simple illustrations
• Logos that need to scale
• UI elements and decorative graphics
• Any graphic that can be described as vector paths

Implementation: The <picture> Element

Serve the best format each browser supports:

<picture>
  <source srcset="/hero.avif" type="image/avif">
  <source srcset="/hero.webp" type="image/webp">
  <img src="/hero.jpg" alt="Hero image"
       width="1920" height="1080"
       loading="eager"
       fetchpriority="high">
</picture>

The browser picks the first format it supports. Older browsers fall back to JPEG.

Implementation: Next.js Image Component

Next.js automatically serves modern formats:

import Image from 'next/image';

<Image
  src="/hero.jpg"
  alt="Hero"
  width={1920}
  height={1080}
  priority // For LCP images
/>

Next.js serves AVIF or WebP automatically based on the browser's Accept header.

Implementation: CDN-Based Conversion

Most modern CDNs can convert images on the fly:

• Cloudflare: Polish and Image Resizing
• Cloudinary: Auto-format with f_auto
• Imgix: Auto-format parameter
• Vercel: Built-in image optimization

Example Cloudinary URL:

https://res.cloudinary.com/demo/image/upload/f_auto,q_auto/hero.jpg

Quality Settings

Higher quality ≠ always better. Most users can't tell the difference between quality 75 and quality 95, but the file size doubles.

Recommended Quality Settings

Format	Recommended Quality	Visual Difference
JPEG	75-85	Imperceptible above 80
WebP	75-85	Sharper than JPEG at same size
AVIF	50-65	Much more efficient; 60 ≈ JPEG 85

Impact on Lighthouse Scores

Lighthouse penalizes oversized images through several audits:

• "Serve images in next-gen formats" — flags JPEG/PNG that could be WebP/AVIF
• "Properly size images" — flags images larger than their display size
• "Efficiently encode images" — flags images with excessive quality
• LCP metric — large images directly delay LCP

Fixing all image-related issues typically improves Lighthouse scores by 10-25 points.

Responsive Images

Don't serve a 1920px image to a 375px phone screen:

<img srcset="/hero-400.avif 400w,
             /hero-800.avif 800w,
             /hero-1200.avif 1200w,
             /hero-1920.avif 1920w"
     sizes="100vw"
     src="/hero-800.jpg"
     alt="Hero">

Compression Tools

• Squoosh (squoosh.app) — Browser-based, great for manual optimization
• Sharp (Node.js) — Programmatic conversion for build pipelines
• ImageOptim (macOS) — Drag-and-drop optimization
• cwebp / avifenc — CLI tools for batch conversion

Monitor Image Performance

New images are added to sites constantly — blog posts, product photos, marketing assets. Each one is an opportunity for performance regression.

Track image-related performance with BadPageSpeed →