AVIF Support in Drupal 11: A Small Tweak, Big Performance Win

#drupal #images #performance #webdev

If you're working with Drupal and performance matters to you, here's a small but impactful update — AVIF image support has landed in Drupal 11.2+.

I stumbled upon this while optimizing a Drupal site recently, and thought I'd share the practical side of getting AVIF working — plus a few caveats I ran into.

🖼️ Why AVIF?

AVIF is one of those next-gen image formats that actually delivers:

Smaller file sizes (often 30–50% smaller than JPEG)
Solid quality at low bitrates
Support for transparency, HDR, and even animation

For media-heavy sites, this means faster pages without quality compromises.

✅ Yes, Drupal Supports It — But Not Out of the Box

Starting in Drupal 11.2, the core GDToolkit lets you convert images to AVIF using Image Styles. But here’s the part that caught me off guard:

You won’t even see the “Convert to AVIF” effect unless your server has libavif support enabled in PHP GD.

That means:

PHP 8.1+
GD extension compiled with libgd 2.3.2+ and libavif

I checked this via phpinfo() — if AVIF isn’t listed, no dice.

🛠️ How I Got It Working

Once I confirmed AVIF support on my dev server, setting it up in Drupal was pretty smooth:

Go to Image Styles
Add effect: Convert to AVIF
(Optional but smart) Keep WebP or JPEG as fallback

That’s it. The AVIF versions are generated automatically.

For production, I wrapped it in a <picture> tag to serve fallbacks to browsers like Safari <16.

🧩 Helpful Modules I Found

While core support handles the basics, I explored a couple of modules that offer more control:

AVIF module — for tweaking compression levels
ImageAPI Optimize AVIF — for automated pipelines

These were useful when I needed finer quality tuning.

🌐 Browser Support Quick Check

Most major browsers support AVIF:

Browser	AVIF Support
Chrome / Firefox / Edge	✅ Yes
Safari 16+	✅ Yes
Older Safari/iOS	❌ No

So yeah — fallbacks are still necessary, especially for older Apple devices.

🧠 Final Takeaway

This feels like one of those "small effort, big gain" features. If your Drupal project is already on 11.2+, enabling AVIF is low lift — and the performance boost is immediate.

I wrote a full breakdown with steps, gotchas, and examples here if you're curious:

👉 nexgismo.com/blog/avif-image-in-drupal-11

Would love to hear if others are using AVIF in production, or if you’ve found better ways to manage fallbacks.