If you’re using Drupal 11, and you’re looking to speed up your site, it’s time to explore support for AVIF images — the next-gen format that beats JPEG and WebP in size and quality. This guide will walk you through everything you need to know about enabling support for AVIF image in Drupal 11, improving image optimization, and boosting performance.

“Faster websites. Better performance. Smaller file sizes. If that’s your goal — AVIF might be your new best friend.”

When you think about building a modern website, images probably aren’t the first thing that comes to mind. But the truth is, images are often the heaviest part of any webpage — and optimizing them can make a huge difference in load time, user experience, and even search rankings.

That’s where AVIF comes in — a next-gen image format that offers jaw-droppingly small file sizes without sacrificing quality. And if you’re using Drupal 11, here’s the good news: Yes, Drupal 11 supports AVIF images natively — but there’s a little setup involved.

Let me walk you through it — no jargon, just clear steps and real talk.

🖼️ What Even Is AVIF?

AVIF (short for AV1 Image File Format) is like JPEG or WebP, but way more efficient. It’s built on the same tech behind the AV1 video codec (used by platforms like Netflix and YouTube). What makes AVIF a game-changer?

📦 Much smaller file sizes (up to 50% smaller than JPEG)
💎 Sharp image quality
🔍 Transparency and HDR support
🌀 Even animated images (like GIFs — but better)

In short: you save bandwidth without losing quality — and that’s a win for mobile users, SEO, and performance all around.

🚀 So, Does Drupal 11 Support AVIF?

Yes, it does — starting with Drupal 11.2, but it depends on how your server is set up.

Drupal uses something called the GDToolkit (a built-in image processor), and it can now generate AVIF images through Image Styles, just like you would for WebP or JPEG.

But here’s the catch: it only works if your server’s GD extension supports AVIF.

🧱 What You Need to Make It Work

Before you jump into Drupal’s admin UI, let’s make sure your server has the right ingredients.

✅ Server Requirements:

PHP 8.1 or higher
GD extension compiled with libgd 2.3.2+
libavif installed (this is the real key for AVIF support)

If your server doesn’t support these, you won’t even see the AVIF image in Drupal 11 image styles. Shared hosting usually won’t have this by default — but platforms like Lando, DDEV, or a custom VPS/Docker setup let you enable it easily.

🧪 How to Check If Your Server Supports AVIF

Want to find out if you’re good to go? Here’s a quick way to check:

Create a PHP file (e.g., info.php)
Paste this code:

<?php phpinfo(); ?>

Visit the file in your browser and look for “AVIF Support” under the GD section.

If it says “enabled” — you’re golden! If not, it’s time to talk to your hosting provider or switch to a dev-friendly stack.

🛠️ How to Enable AVIF image in Drupal 11 (The Easy Way)

Once your server is ready, adding AVIF is actually really simple inside Drupal:

Go to Configuration > Media > Image Styles
Choose an existing style or create a new one
Click “Add effect”
Select “Convert to AVIF”
Save

💡 Pro tip: You can also keep the original JPEG/WebP as a fallback, which is smart since not all browsers fully support AVIF (yet).

🌐 What About Browser Support?

Most modern browsers play nice with AVIF, but a few stragglers are still catching up.

Browser	AVIF Support
Chrome	✅ Yes
Firefox	✅ Yes
Safari (v16+)	✅ Yes
Edge	✅ Yes
Safari < v16	❌ No
Older Android/iOS	❌ No

So yes — it’s worth serving AVIF, but don’t ditch JPEG/WebP just yet. Use the <picture> tag or responsive image modules to serve the right format to each user.

🔌 Want More Control? Use These Contributed Modules

Drupal core handles the basics well, but if you want more flexibility, check out these modules:

1. AVIF Module

Adds native AVIF support for media types
Lets you tweak AVIF compression, quality, and metadata settings

📦 AVIF Module on Drupal.org

🧠 Real-Life Example: The Picture Element

If you want full control over how your images are served (e.g., AVIF first, WebP fallback, then JPEG), you can use a <picture> tag like this:

<picture>
  <source srcset="example.avif" type="image/avif">
  <source srcset="example.webp" type="image/webp">
  <img src="example.jpg" alt="Optimized Drupal 11 AVIF image">
</picture>

And yes, there are modules to help automate this — like Responsive Image Formatter or Image Style Formatter.

📊 Why You Should Care About This as a Site Builder

If you’re building websites with performance in mind, AVIF is a must-have. It’s part of the modern web stack now, alongside lazy loading, WebP, and responsive design.

By enabling AVIF:

📈 Your images load faster
💻 Pages feel snappier
🔍 SEO improves (Core Web Vitals matter!)
📉 You use less bandwidth — and users love that, especially on mobile

✍️ Final Thoughts

AVIF might seem like a small technical tweak, but it has huge benefits. And Drupal 11 makes it easier than ever to adopt it — as long as your server is ready.

So if you haven’t already:

✅ Check your GD extension for AVIF support
✅ Enable “Convert to AVIF” in image styles
✅ Serve smart fallbacks for broader compatibility
✅ Explore contributed modules for even more control

Future-ready websites are built one smart optimization at a time — and AVIF is one of those upgrades you’ll wish you’d started using sooner.

📌 for the skimmers

Yes, Drupal 11 supports AVIF natively (from version 11.2+)
Server must have GD with libavif support
Add “Convert to AVIF” via Image Styles
Use fallbacks for Safari/older browsers
Contrib modules offer deeper control and automation

With native support for AVIF image in Drupal 11, faster websites are now easier to build than ever. If performance, SEO, and Core Web Vitals matter to you, enabling AVIF is a no-brainer.

You May Also Like:

How to Use AVIF Image in Drupal 11 for Faster Websites

Table of Contents