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-Typeheaders when serving WebP from a custom server.
Test your fix
After converting your images, audit your site on BeaverCheck to verify the performance improvement.