This custom Drupal image effect converts images to AVIF first, then falls back to WebP, and finally falls back to the original uploaded format if neither are supported by the image toolkit.
This was created for a real project where:
- performance was important
- we wanted AVIF first
- WebP as fallback
- and if both failed, images should still display (no broken images)
Drupal core allows AVIF conversion, but only with a single fallback.
This plugin adds an extra automatic fallback layer.
When the image effect runs:
- Try converting to AVIF
- If AVIF conversion is not supported or fails → try WebP
- If WebP is also unavailable → keep the original format
No broken images. No missing derivatives.
-
Drupal 10 or Drupal 11
-
Image module enabled
-
Server must support at least one of:
- avif
- webp
(usually via GD or ImageMagick support)
If neither is supported, the original image format is used automatically.
Place the module here:
modules/custom/drupal_avif_image_effect
Enable the module:
drush en drupal_avif_image_effect -ydrush cr
-
Go to:
- Configuration → Media → Image styles
-
Edit an existing image style (or create a new one)
-
Add effect:
- Convert to AVIF/WebP (with fallback)
-
Save the image style
From now on, image derivatives will follow:
AVIF → WebP → Original
depending on toolkit support.
if AVIF supported:
convert to avif
else if WebP supported:
convert to webp
else:
keep original
Drupal core lets you:
- convert to AVIF
- choose one fallback format
But our requirement was:
AVIF → WebP → Original
The site had many images already uploaded, and editors were not manually optimizing formats.
This solution applies globally without requiring editors to change anything.
Images still appear as original format
This usually means:
- your server does not support AVIF
- and does not support WebP
In this case, fallback is working correctly.
Check status report:
/admin/reports/status
Look at image toolkit support.