How to Convert Your Website Images to AVIF (With Fallbacks)

Why AVIF Beats Every Other Format Right Now

You've probably heard the pitch for WebP a dozen times. It's 25–34% smaller than JPEG, has near-universal browser support, and should be on every website. That's all still true — but AVIF has quietly overtaken it as the best format for most web images.

AVIF (AV1 Image File Format) is based on the AV1 video codec, originally developed by Google, Mozilla, Netflix, and others. Because the codec was designed for video — where compressing hundreds of frames efficiently is existential — it brings extraordinary compression power to still images. The result: AVIF files are typically 20–30% smaller than equivalent WebP files at the same visual quality, and roughly 50% smaller than JPEG with no perceptible difference.

As of April 2026, AVIF has ~93–95% global browser coverage: Chrome 85+, Firefox 93+, Safari 16+, and Edge 121+. That means the vast majority of your visitors can receive AVIF images today. The remaining 5–7% of browsers — mostly old iOS Safari and legacy Edge — can fall back to WebP or JPEG via the <picture> element.

If your site is still serving plain JPEG or PNG images, converting to AVIF (with fallbacks) is one of the highest-leverage performance improvements you can make. Faster page loads, better Core Web Vitals, and lower CDN bandwidth costs — all from switching image formats.

For a broader comparison of modern image formats, see our AVIF vs WebP vs JPEG XL comparison and the best image format for web SEO guide.

Understanding the AVIF Trade-Off

Before converting everything on your site, there's one important caveat: AVIF encoding is slow. A single high-resolution image can take several seconds to encode in AVIF, compared to milliseconds for JPEG or WebP. For a site with thousands of images, this matters at build time.

The trade-off is worth it for most sites, but you should plan your conversion strategy accordingly:

The decision framework is straightforward:

• Hero images, large photos, product shots → AVIF first (biggest file size wins)
• Icons, logos, line art → PNG or SVG (lossless accuracy matters more than size)
• Animated content → WebP or AVIF (both support animation)
• Email images → JPEG (email clients don't support AVIF)

Converting Images to AVIF Online

The fastest way to convert images to AVIF is using an online image compressor that supports AVIF output. Upload your JPEG or PNG, select AVIF as the output format, and download the result. For bulk conversion workflows, this works well for a few dozen images at a time.

If you need to batch-convert an entire site's image library, a command-line approach or build-tool integration will be more practical.

Converting with FFmpeg (Command Line)

FFmpeg, despite being a video tool, handles AVIF conversion reliably since AVIF is based on AV1:

# Convert a single JPEG to AVIF
ffmpeg -i photo.jpg -c:v libaom-av1 -crf 30 -b:v 0 photo.avif

# Convert PNG to AVIF with lossless encoding
ffmpeg -i image.png -c:v libaom-av1 -crf 0 -b:v 0 image.avif

# Batch convert all JPEGs in a folder
for f in *.jpg; do
  ffmpeg -i "$f" -c:v libaom-av1 -crf 30 -b:v 0 "${f%.jpg}.avif"
done

The -crf value controls quality. Lower is better quality (and larger files). A value of 25–35 is a good starting point for photographic content; 40–50 works for images where file size is the priority.

Converting with Sharp (Node.js)

If you're running a Node.js build pipeline, Sharp is the fastest option. It uses libvips under the hood and is significantly faster than libaom for batch conversions:

const sharp = require("sharp");
const fs = require("fs");
const path = require("path");

async function convertToAvif(inputPath) {
  const outputPath = inputPath.replace(/\.(jpg|jpeg|png|webp)$/i, ".avif");

  await sharp(inputPath)
    .avif({ quality: 65, effort: 4 }) // effort: 0-9, higher = slower but smaller
    .toFile(outputPath);

  const inputSize = fs.statSync(inputPath).size;
  const outputSize = fs.statSync(outputPath).size;
  const savings = ((1 - outputSize / inputSize) * 100).toFixed(1);

  console.log(`${path.basename(inputPath)}: ${savings}% smaller`);
}

// Batch convert
const images = fs.readdirSync("./images").filter((f) => /\.(jpg|jpeg|png|webp)$/i.test(f));
Promise.all(images.map((f) => convertToAvif(`./images/${f}`)));

Quality of 60–70 typically produces excellent results for photographic images. Effort level 4 is the default and balances speed vs. compression well; increase to 6–7 for your most important images.

Implementing the <picture> Element With Fallbacks

Converting images to AVIF is only half the job. You need to serve them correctly with fallbacks for browsers that don't support AVIF. The HTML <picture> element handles this elegantly:

<picture>
  <!-- AVIF: best compression, ~93% browser support -->
  <source srcset="/images/hero.avif" type="image/avif" />

  <!-- WebP: great compression, ~97% browser support -->
  <source srcset="/images/hero.webp" type="image/webp" />

  <!-- JPEG: universal fallback -->
  <img src="/images/hero.jpg" alt="Hero image" width="1200" height="600" loading="lazy" />
</picture>

Browsers read <source> elements in order and use the first one they support. If the browser supports AVIF, it gets the AVIF file. If it supports WebP but not AVIF, it gets WebP. If neither, it falls back to the <img src.

This means you need three versions of each image. That sounds like overhead, but the bandwidth savings on your AVIF files will outpace the storage cost many times over — especially if you're behind a CDN.

Responsive Images With AVIF

For responsive designs, combine <picture> with srcset for size variants:

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

This gives mobile users appropriately sized AVIF images, desktop users full-resolution AVIF, and everyone else gets WebP or JPEG — all with a single HTML block.

Next.js and Other Framework Integrations

If you're on Next.js 13+, the <Image> component handles AVIF automatically when you add it to next.config.js:

// next.config.js
module.exports = {
  images: {
    formats: ["image/avif", "image/webp"],
    // Next.js will serve AVIF to supporting browsers automatically
  },
};

Next.js converts and caches images on demand. The first request for each image triggers the conversion; subsequent requests are served from the cache. You don't need to pre-convert anything.

For WordPress, the ShortPixel, Imagify, and EWWW Image Optimizer plugins all support AVIF conversion and automatic <picture> element insertion. Enable AVIF output in settings and the plugins handle conversion and serving automatically.

For Gatsby, the gatsby-plugin-image component has built-in AVIF support — set formats={["auto", "avif", "webp"]} on your GatsbyImage components.

Batch Converting an Existing Image Library

If you have thousands of existing images to convert, a systematic approach prevents re-doing work:

1. Inventory — List all image files and their current sizes
2. Prioritize — Convert large, high-traffic images first (hero images, product photos, blog covers)
3. Convert — Use Sharp or a batch tool for speed
4. Verify — Check that AVIF files are actually smaller (occasionally AVIF is larger for very small or already-compressed images)
5. Deploy — Update <picture> elements or CDN rewrite rules
6. Measure — Check Core Web Vitals improvements via PageSpeed Insights

For sites with mixed content, it's practical to convert everything above 20KB. Images below that threshold may not see significant savings relative to the effort.

When to Keep WebP Instead of AVIF

Despite AVIF's advantages, there are cases where WebP is the smarter choice:

• Server-side rendering with dynamic images — WebP encodes much faster, making it more practical for on-the-fly image generation
• Animated images — Both formats support animation, but AVIF animated files have inconsistent browser support; WebP animation is more reliable
• Very small images (under 10KB) — The overhead of the AVIF container can negate compression savings at small sizes
• Sites with significant old Safari traffic — iOS Safari before version 16 doesn't support AVIF; if analytics show a large share of older iOS, WebP may be a more inclusive default

For a deeper look at the optimization techniques that complement format conversion, read our guide on optimizing images for your website.

Frequently Asked Questions

Is AVIF lossless like PNG?

AVIF supports both lossy and lossless compression modes. Lossless AVIF preserves pixel-perfect quality but produces files that are typically larger than lossless PNG. For web use, lossy AVIF (quality 60–80) is almost always the right choice — the difference is visually imperceptible but the file size savings are substantial.

Do CDNs support serving AVIF automatically?

Cloudflare, Fastly, and most major CDNs support AVIF now. Cloudflare's Polish image optimization feature can convert and serve AVIF automatically based on the Accept header. Check your CDN's documentation for image optimization settings.

Will AVIF hurt my SEO?

No. Google can index AVIF images just like JPEG or PNG. And because AVIF reduces page load times (a Core Web Vitals ranking factor), converting to AVIF is more likely to help your SEO than hurt it. Just make sure your alt attributes and surrounding content are well-optimized.

What's the difference between AVIF and HEIC?

AVIF and HEIC are both based on the HEIF container format with AV1-derived compression, but HEIC uses the H.265/HEVC codec while AVIF uses AV1. AVIF is the open, royalty-free version. HEIC is primarily used by Apple devices. For the web, AVIF is always the right choice. Use our HEIC converter if you need to convert HEIC photos from iPhone to web-friendly formats.

My AVIF files are larger than the original JPEG. Why?

This can happen with very small images, images that are already heavily compressed, or images with large amounts of fine detail and noise (like film grain). Run AVIF and WebP conversion on any questionable image and compare sizes — always serve the smaller of the two. Quality settings above 80 can also produce large files; try reducing quality to 60–70 first.

Conclusion

Converting your site's images to AVIF is one of the most impactful technical improvements you can make to page performance in 2026. The compression gains over JPEG (40–55%) and WebP (20–30%) are real and meaningful — they translate directly to faster load times, lower bandwidth costs, and better Core Web Vitals scores.

The implementation path is clear: convert your images using Sharp, FFmpeg, or an online image compressor, then serve them via <picture> elements with WebP and JPEG fallbacks. If you're on Next.js, WordPress, or Gatsby, your framework already has you mostly covered with a few config changes.

Start with your highest-traffic pages and largest images. Measure the improvement. Then work through the rest of your image library systematically.