WebP vs AVIF: Web Image Optimisation | Blog SEO Ighenatt

Images account for roughly half the total bytes transferred on an average web page, and most of those bytes are unnecessary. The same photograph served as a compressed WebP will look identical to the user whilst weighing 30% less than its JPEG equivalent. Serve it as AVIF and you can reduce that further still.

The format question is not purely theoretical. In practice, the decision affects LCP directly: a hero image that takes 3.5 seconds to load is the reason a page fails Core Web Vitals, not the JavaScript or the fonts. We have audited sites where converting the hero image alone moved LCP from 4.2s to 2.1s. That is not an edge case.

The choice between WebP and AVIF depends on your audience’s browsers and whether you have a CDN that can handle automatic format negotiation. Both are covered in detail below.

Next-Generation Formats: Benefits and Evolution

WebP: Google’s Standard Format

This format developed by Google offers both lossy and lossless compression, significantly reducing file sizes.

Advantages of the Google format:

1. Reduced size: Files are approximately 30% smaller than JPEG and 45% smaller than PNG with similar quality.
2. Transparency support: Like PNG, but with a smaller file size.
3. Animation support: Like GIF, but more efficient.
4. Wide browser support: The majority of modern browsers support it.

Example size comparison:

Implementation on your site:

<!-- Basic usage of the optimised format -->
<img src="image.webp" alt="Clear description of the image">

<!-- Usage with fallback for older browsers -->
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Clear description of the image">
</picture>

AVIF: The Future of Web Images

This newer format based on the AV1 video codec offers even more efficient compression.

Main advantages: superior compression (20–50% additional), better detail preservation, HDR support and advanced features such as transparency and animations.

Limitations: limited compatibility (though growing), longer encoding time and less mature tooling ecosystem.

Performance comparison:

Progressive Adoption Strategy

The key is to use both formats strategically with a progressive approach:

1. Basic level: Optimised JPEG/PNG for universal compatibility
2. Intermediate level: WebP with fallback to traditional formats
3. Advanced level: AVIF with fallback to WebP and traditional formats

<!-- Optimal implementation with graduated support -->
<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Detailed description of the image" loading="lazy">
</picture>

Conversion and Optimisation Tools

Image conversion:

For WebP: cwebp (official tool), Squoosh, ImageMagick, and WordPress plugins such as Express.

For AVIF: avifenc (official encoder), Squoosh (full support), and specialised online tools.

Additional optimisations:

• Responsive sizing with srcset
• Lazy loading for on-demand loading
• Specialist CDN (Cloudinary, Imgix, Cloudflare)
• CSS/SVG sprites for small icons

Conclusions and Recommendations

Adopting next-generation formats is a direct path to improving web performance. WebP offers an excellent balance between compatibility and efficiency, while AVIF represents the future with superior compression. Run PageSpeed Insights on your ten highest-traffic pages right now. If any return an LCP above 2.5 seconds or a CLS above 0.1, you have a specific problem to solve. Tell us what you found and we will tell you where to start.