Modern Image Formats: WebP & AVIF for Faster Sites

Reading time: 11 minutes

Quick Definition: WebP and AVIF are modern image formats that deliver the same visual quality as JPEG/PNG but with 30-80% smaller file sizes. Smaller files = faster page loads = better Core Web Vitals scores = higher rankings.

One stat: Switching from JPEG to WebP typically cuts image weight by 25-35%. AVIF cuts it by 50%+.

TLDR

WebP reduces image file sizes by 25-35% compared to JPEG. AVIF cuts them in half. Images make up half your page weight, so modern formats deliver the biggest performance wins. Use the picture element with AVIF, WebP, and JPEG fallbacks to support all browsers. Convert with Squoosh.app or command-line tools. Real example: an 850KB JPEG became a 280KB WebP and reduced LCP from 4.2 seconds to 2.1 seconds. Always include width and height attributes to prevent layout shift.

---

Why Image Formats Matter

Images Are Your Biggest Speed Problem

Typical website weight:

• Images: 50-70% of total page size
• JavaScript: 15-20%
• CSS: 5-10%
• HTML: 2-5%

Result: Optimize images = biggest performance win.

Impact on Core Web Vitals

Largest Contentful Paint (LCP):

• Heavy hero image = slow LCP
• Switch to WebP/AVIF = 30-50% faster LCP

Example:

Before: hero.jpg (850 KB) → LCP = 4.2 seconds 
After: hero.webp (280 KB) → LCP = 2.1 seconds 

---

Format Comparison

Format	Released	Compression	Browser Support	Best For
JPEG	1992	Good	100%	Photos (legacy)
PNG	1996	Lossless	100%	Graphics with transparency
WebP	2010 (Google)	Better (25-35% smaller)	97%	General use (modern)
AVIF	2019	Best (50%+ smaller)	85%	Cutting-edge (needs fallback)

---

WebP: The Modern Standard

What Is WebP?

Created by Google in 2010, WebP is now the default image format for modern websites.

Advantages:

• 25-35% smaller than JPEG (same quality)
• Supports transparency (like PNG)
• Supports animation (like GIF)
• 97% browser support (all modern browsers)

Disadvantages:

• Not supported in IE 11 (but IE is dead)
• Slightly higher CPU usage for decoding (negligible on modern devices)

Browser Support

Supported (97%):

• Chrome 32+ (2014)
• Firefox 65+ (2019)
• Edge 18+ (2018)
• Safari 14+ (2020)
• Opera 19+ (2014)

Not supported:

• Internet Explorer 11

Fallback strategy:

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description">
</picture>

Browser loads WebP if supported, falls back to JPEG if not.

Conversion Tools

Online (quick tests):

• Squoosh.app (Google’s image converter)
• CloudConvert

Command line (bulk conversion):

# Install cwebp (WebP encoder)
# Ubuntu/Debian:
sudo apt install webp

# Mac:
brew install webp

# Convert single image
cwebp -q 80 input.jpg -o output.webp

# Batch convert all JPEGs in folder
for file in *.jpg; do
  cwebp -q 80 "$file" -o "${file%.jpg}.webp"
done

Quality setting:

• -q 100 = lossless (large files)
• -q 80 = recommended (best balance)
• -q 60 = aggressive compression (noticeable quality loss)

---

AVIF: The Cutting Edge

What Is AVIF?

AVIF (AV1 Image File Format) is the newest format, offering the best compression.

Advantages:

• 50-60% smaller than JPEG (same visual quality)
• 20-30% smaller than WebP
• Supports HDR (high dynamic range)
• Supports transparency and animation

Disadvantages:

• Slower encoding/decoding (higher CPU usage)
• 85% browser support (newer than WebP)
• Limited tooling (compared to WebP)

Browser Support (85%)

Supported:

• Chrome 85+ (2020)
• Firefox 93+ (2021)
• Edge 121+ (2024)
• Safari 16+ (2022)
• Opera 71+ (2020)

Not supported:

• Older browsers (2019 and earlier)

Fallback strategy (AVIF → WebP → JPEG):

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description">
</picture>

Conversion Tools

Online:

• Squoosh.app

Command line:

# Install avif encoder
# Mac:
brew install libavif

# Ubuntu (requires building from source or use Squoosh)

# Convert to AVIF
avifenc -s 4 input.jpg output.avif

# Speed setting:
# -s 0 = slowest, best compression
# -s 4 = balanced (recommended)
# -s 10 = fastest, larger files

---

Format Decision Tree

Should you use AVIF?

Scenario	Use AVIF?
Hero images (large, important)	Yes (with WebP/JPEG fallback)
Product photos (e-commerce)	Yes (with fallback)
Blog post images	Maybe (WebP is easier)
Icons/logos	No (use SVG or WebP)
Thumbnails	Maybe (savings less impactful)

Should you use WebP?

Scenario	Use WebP?
Any JPEG on your site	Yes (97% support)
PNG photos	Yes (switch to WebP)
PNG graphics (icons, logos)	Consider SVG first
Animated GIFs	Yes (WebP animation is better)

---

Implementation Strategies

Strategy 1: <picture> Element (Recommended)

Full fallback stack:

<picture>
  <!-- AVIF for browsers that support it (smallest files) -->
  <source srcset="hero.avif" type="image/avif">

  <!-- WebP for browsers that don't support AVIF -->
  <source srcset="hero.webp" type="image/webp">

  <!-- JPEG fallback for old browsers -->
  <img src="hero.jpg" alt="Hero image description" width="1200" height="630">
</picture>

How it works:

1. Browser checks each <source> from top to bottom
2. Uses first format it supports
3. Falls back to <img> if no <source> is supported

Benefits:

• Works in all browsers
• No JavaScript required
• SEO-friendly (crawlers see the <img> tag)

Strategy 2: Server-Side Content Negotiation

How it works:

1. Browser sends Accept: image/avif,image/webp,*/* header
2. Server detects format support
3. Server serves AVIF, WebP, or JPEG based on support

Apache (.htaccess):

<IfModule mod_rewrite.c>
  RewriteEngine On

  # Check if browser supports AVIF
  RewriteCond %{HTTP_ACCEPT} image/avif
  RewriteCond %{REQUEST_FILENAME}.avif -f
  RewriteRule (.+)\.(jpe?g|png)$ $1.avif [T=image/avif,L]

  # Check if browser supports WebP
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME}.webp -f
  RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp,L]
</IfModule>

Nginx:

location ~* \.(jpg|jpeg|png)$ {
  set $webp_suffix "";
  if ($http_accept ~* "image/webp") {
    set $webp_suffix ".webp";
  }
  if (-f $request_filename$webp_suffix) {
    rewrite ^(.+)$ $1$webp_suffix break;
  }
}

Benefits:

• No HTML changes needed
• Works with existing <img> tags

Downsides:

• Requires server configuration
• Can complicate caching

Strategy 3: WordPress Plugins

Recommended plugins:

1. ShortPixel Image Optimizer

   • Auto-converts to WebP/AVIF
   • Uses <picture> tags or .htaccess rewrite
   • Free tier: 100 images/month

2. Imagify

   • Auto-conversion to WebP
   • Bulk optimization
   • Paid: $5/month

3. EWWW Image Optimizer

   • WebP conversion
   • Lazy loading
   • Free with some limits

How they work:

1. Upload JPEG/PNG
2. Plugin auto-generates WebP/AVIF versions
3. Plugin serves modern formats to supported browsers

---

Quality Settings Guide

JPEG → WebP

# High quality (minimal compression)
cwebp -q 90 input.jpg -o output.webp
# File size: about 70% of original

# Balanced (recommended)
cwebp -q 80 input.jpg -o output.webp
# File size: about 60% of original

# Aggressive (noticeable quality loss)
cwebp -q 60 input.jpg -o output.webp
# File size: about 40% of original

Recommended: Start with -q 80, then compare visually.

JPEG → AVIF

# Balanced (recommended)
avifenc -s 4 -q 60 input.jpg output.avif
# File size: about 40% of original JPEG

# High quality
avifenc -s 4 -q 75 input.jpg output.avif
# File size: about 50% of original JPEG

Note: AVIF quality scale is different from JPEG. q 60 in AVIF ≈ q 80 in JPEG visually.

---

Testing Your Implementation

Check Format Delivered

Chrome DevTools:

1. Open DevTools (F12)
2. Network tab
3. Reload page
4. Click on an image
5. Check Type column (should show webp or avif)

Verify File Sizes

Before vs After:

hero.jpg: 850 KB
hero.webp: 280 KB (67% reduction)
hero.avif: 190 KB (78% reduction)

Check in DevTools:

• Network tab → Size column

Test Fallbacks

Disable WebP in Chrome:

1. Install Requestly extension
2. Block image/webp in Accept header
3. Reload page
4. Verify JPEG fallback loads

---

Common Mistakes

Not Providing Fallbacks

Problem:

<img src="image.webp" alt="Description">

Result: Image breaks in old browsers

Fix: Use <picture> with fallback

---

Over-Compressing

Problem:

cwebp -q 40 photo.jpg -o photo.webp

Result: Blurry, pixelated images

Fix: Use -q 75-85 range

---

Converting SVG to WebP

Problem: SVG icons converted to WebP/AVIF

Why it’s bad: SVG is vector (infinitely scalable), WebP is raster (pixelates when scaled)

Fix: Keep logos/icons as SVG

---

Missing Width/Height

Problem:

<img src="hero.webp" alt="Hero">
<!-- Missing width and height -->

Result: Layout shift (bad CLS score)

Fix:

<img src="hero.webp" alt="Hero" width="1200" height="630">

---

SEO Impact

Core Web Vitals Improvement

Real example:

Metric	Before (JPEG)	After (WebP)	Change
LCP	4.1s	2.3s	⬇️ 44% faster
Page weight	3.2 MB	1.4 MB	⬇️ 56% smaller
Mobile score	68/100	92/100	⬆️ +24 points

Rankings:

• Faster sites rank higher
• Google confirmed Core Web Vitals as ranking factor (2021)
• Mobile-first indexing prioritizes fast mobile sites

Image Search

Do WebP images appear in Google Images?

• Yes (Google supports WebP in Image Search)
• AVIF also supported
• No SEO penalty for modern formats

---

What Surmado Checks

Surmado Scan looks for:

• Images using modern formats (WebP/AVIF)
• Fallbacks provided for unsupported browsers
• Appropriate compression levels (not over-compressed)
• Width/height attributes present (prevent layout shift)

---

Quick Reference

Best practices:

• Use WebP for all photos (97% browser support)
• Use AVIF for hero images (with fallback)
• Always provide JPEG/PNG fallback
• Use <picture> element for maximum compatibility
• Compress at quality 75-85 (WebP) or 60-75 (AVIF)
• Keep SVG for logos/icons (don’t convert to raster)

Image format decision:

1. Logo/icon? → SVG
2. Photo/screenshot? → WebP (with JPEG fallback)
3. Critical hero image? → AVIF (with WebP and JPEG fallbacks)

---

→ Related: Image Alt Text & SEO | Lazy Loading | Core Web Vitals Explained