AVIF for Developers

Implementing AVIF

As a web developer, implementing AVIF can significantly improve your site performance. Here is everything you need to know.

HTML Implementation

Use the picture element for progressive enhancement:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Hero image" loading="lazy">
</picture>

Build Tools Integration

• Vite: Use vite-imagetools for automatic AVIF generation
• Webpack: image-webpack-loader supports AVIF
• Next.js: Built-in AVIF support with next/image
• Astro: Native AVIF optimization

Server Configuration

Ensure your server serves AVIF with correct MIME type:

# Nginx
types {
    image/avif avif;
}

# Apache (.htaccess)
AddType image/avif .avif