How to Use AVIF on Your Website: HTML, CSS, and CMS Guide

AVIF delivers 50 to 80 percent smaller image files than JPEG. This guide covers every method for deploying AVIF on your website: HTML inline images, CSS backgrounds, server-side format negotiation, and CMS-specific tools.

Step 1: Convert Your Images to AVIF

The first step is generating AVIF versions of your images. You have several options:

Online converter (easiest)

Use PngToAvif.com to convert JPEG, PNG, or WebP images to AVIF instantly. Supports batch uploads. No installation, no sign-up.

Command-line (ffmpeg)

ffmpeg -i input.jpg -c:v libaom-av1 -crf 30 output.avif

Sharp (Node.js)

const sharp = require('sharp');
await sharp('input.jpg')
  .avif({ quality: 70 })
  .toFile('output.avif');

Squoosh CLI

npx @squoosh/cli --avif '{}' input.jpg

Method 1: HTML with the <picture> Element

The <picture> element is the standard way to serve AVIF with fallback formats. Browsers select the first <source> they support and ignore the rest.

Basic AVIF with JPEG fallback

<picture>
  <source srcset="image.avif" type="image/avif">
  <img src="image.jpg" alt="Description" width="800" height="600">
</picture>

AVIF with WebP and JPEG fallbacks (maximum compatibility)

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description" width="800" height="600">
</picture>

Responsive AVIF with srcset

<picture>
  <source
    type="image/avif"
    srcset="image-400.avif 400w,
            image-800.avif 800w,
            image-1200.avif 1200w"
    sizes="(max-width: 600px) 400px,
           (max-width: 1000px) 800px,
           1200px"
  >
  <source
    type="image/webp"
    srcset="image-400.webp 400w,
            image-800.webp 800w,
            image-1200.webp 1200w"
    sizes="(max-width: 600px) 400px,
           (max-width: 1000px) 800px,
           1200px"
  >
  <img
    src="image-800.jpg"
    alt="Description"
    width="800"
    height="600"
    loading="lazy"
  >
</picture>

Include loading="lazy" on all below-the-fold images. Always include width and height to prevent layout shift.

Method 2: CSS Background Images

CSS does not support the <picture> fallback mechanism directly. Use @supports for CSS background images:

/* Default fallback */
.hero {
  background-image: url('hero.jpg');
}

/* WebP for supporting browsers */
@supports (background-image: url('x.webp')) {
  .hero {
    background-image: url('hero.webp');
  }
}

/* AVIF for supporting browsers */
@supports (background-image: url('x.avif')) {
  .hero {
    background-image: url('hero.avif');
  }
}

The @supports CSS feature query checks if the browser supports the given value. AVIF-supporting browsers apply the AVIF rule, which overrides the WebP and JPEG rules because it appears last.

Method 3: Server-Side Content Negotiation

Configure your web server to serve AVIF automatically when the browser's Accept header includes image/avif. This approach requires no HTML changes.

Nginx configuration

map $http_accept $img_suffix {
    default        "";
    "~*image/avif" ".avif";
    "~*image/webp" ".webp";
}

server {
    location ~* \.(jpe?g|png)$ {
        add_header Vary Accept;
        try_files $uri$img_suffix $uri =404;
    }
}

Apache .htaccess configuration

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTP_ACCEPT} image/avif
  RewriteCond %{REQUEST_FILENAME}.avif -f
  RewriteRule ^(.+)\.(jpe?g|png)$ $1.$2.avif [T=image/avif,L]

  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME}.webp -f
  RewriteRule ^(.+)\.(jpe?g|png)$ $1.$2.webp [T=image/webp,L]
</IfModule>

<IfModule mod_headers.c>
  Header append Vary Accept env=REDIRECT_accept
</IfModule>

Method 4: CMS and Framework Plugins

Next.js

The Next.js Image component handles AVIF automatically. Configure in next.config.js:

module.exports = {
  images: {
    formats: ['image/avif', 'image/webp'],
  },
};

WordPress

WordPress 6.5 and above supports AVIF uploads natively. For older installs or automatic conversion of existing images, use EWWW Image Optimizer (free) or ShortPixel (paid). Both plugins serve AVIF via the <picture> element automatically.

Nuxt.js / Vue

Use the @nuxt/image module, which generates and serves AVIF automatically:

<NuxtImg src="/hero.jpg" format="avif" width="800" height="600" />

Astro

Astro's built-in Image component serves AVIF by default for local images:

---
import { Image } from 'astro:assets';
import hero from '../assets/hero.jpg';
---
<Image src={hero} alt="Hero" format="avif" width={800} height={600} />

Get Your AVIF Files Now

Convert JPG, PNG, or WebP to AVIF for free. Download and deploy immediately.

Convert Images to AVIF