How to Serve Images in Next-Gen Formats

What is this?

Next-generation image formats like WebP and AVIF provide superior compression compared to JPEG and PNG. WebP typically produces files 25-35% smaller than JPEG at equivalent quality. AVIF can achieve even better compression.

Why it matters

• Performance: Smaller images load faster, improving LCP and overall page speed
• Bandwidth: Reduces data transfer costs for you and your users
• User experience: Faster image loading means less time waiting for visual content

How to fix it

Use the <picture> element for format fallback

<picture>
  <source srcset="/img/hero.avif" type="image/avif">
  <source srcset="/img/hero.webp" type="image/webp">
  <img src="/img/hero.jpg" alt="Hero image" width="1200" height="600">
</picture>

Nginx: automatic WebP serving

map $http_accept $webp_suffix {
    default   "";
    "~*webp"  ".webp";
}

location ~* \.(jpg|jpeg|png)$ {
    try_files $uri$webp_suffix $uri =404;
}

Convert images with CLI tools

# Convert to WebP
cwebp -q 80 input.jpg -o output.webp

# Convert to AVIF
avifenc --min 20 --max 30 input.png output.avif

# Batch convert with ImageMagick
mogrify -format webp -quality 80 *.jpg

WordPress

Use a plugin like ShortPixel, Imagify, or EWWW Image Optimizer. These automatically generate WebP versions of your uploads and serve them to supporting browsers.

Next.js

Next.js <Image> component automatically serves WebP when the browser supports it:

import Image from 'next/image';
<Image src="/photo.jpg" alt="Photo" width={800} height={600} />

Common mistakes

• Not providing a fallback for older browsers. Always include the original format as the <img> src.
• Over-compressing images and losing visible quality. Test with quality 75-85 for WebP.
• Forgetting to set correct Content-Type headers when serving WebP from a custom server.

Test your fix

After converting your images, audit your site on BeaverCheck to verify the performance improvement.