Next-Gen Formats
Definition
Modern image formats like WebP and AVIF that offer superior compression compared to JPEG and PNG, reducing file sizes significantly.
What are Next-Gen Image Formats?
Next-gen image formats are modern file formats that offer better compression than traditional JPEG and PNG. They produce smaller files at the same visual quality – or better quality at the same file size.
The main next-gen formats are WebP, AVIF, and JPEG XL, though browser support varies.
Why Next-Gen Formats Matter
Significant File Size Reduction
- WebP is typically 25-35% smaller than JPEG
- AVIF can be 50% smaller than JPEG
At scale, these savings dramatically improve page load times.
Same Visual Quality
Modern compression algorithms achieve smaller sizes without visible quality loss.
Google Recommendation
PageSpeed Insights specifically recommends serving images in next-gen formats as a performance improvement.
Format Comparison
WebP
- Developed by: Google
- Browser support: Excellent (95%+)
- Strengths: Good compression, transparency support, animation support
- Best for: General web use, replaces both JPEG and PNG
AVIF
- Developed by: Alliance for Open Media
- Browser support: Good (85%+, growing)
- Strengths: Best compression available, excellent colour depth
- Best for: Maximum file size savings, high-quality images
JPEG XL
- Developed by: JPEG Committee
- Browser support: Limited (Safari only as of 2024)
- Strengths: Progressive loading, excellent quality
- Best for: Not recommended yet due to browser support
Implementing Next-Gen Formats
Picture Element
Serve next-gen formats with fallbacks for older browsers:
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
</picture>
CDN Automatic Conversion
Services like Cloudflare, Cloudinary, and Imgix automatically convert and serve the best format based on browser support.
Build-Time Conversion
Generate multiple formats during your build process and serve appropriately.
Practical Recommendations
Start with WebP
Near-universal browser support makes WebP the safe choice for immediate implementation.
Consider AVIF for New Projects
If you can handle the slightly more complex implementation, AVIF's compression advantages are worthwhile.
Always Provide Fallbacks
Some users still run older browsers. JPEG/PNG fallbacks ensure everyone sees images.
Don't Forget to Compress
Next-gen formats still benefit from compression optimisation. Format alone isn't enough.