Images use WebP/AVIF format

images_modern_format

Checks if images use modern formats like WebP or AVIF.

What does this rule check?

Modern image formats (WebP, AVIF) provide significantly better compression than JPEG/PNG while maintaining visual quality. WebP offers 25-35% smaller files than JPEG. AVIF can be 50% smaller.

Why is this important?

Using legacy formats (JPEG, PNG, GIF) results in larger file sizes, slower page loads, and worse performance scores. Modern formats reduce bandwidth and improve loading speed.

How to fix

Convert images to WebP or AVIF format. Use the <picture> element to provide fallbacks for older browsers.

Examples

<img src="hero.jpg" alt="Hero image" />
<!-- 500KB JPEG file -->

<picture>
  <source srcset="hero.avif" type="image/avif" />
  <source srcset="hero.webp" type="image/webp" />
  <img src="hero.jpg" alt="Hero image" />
</picture>
<!-- 150KB with modern formats -->

Agent fix snippet

Copy this snippet and paste it into your AI coding agent to fix this issue automatically.

Convert images to WebP/AVIF format and use <picture> for fallbacks:

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