Hi @simonjoy75
Sorry to hear about the troubles you’re seeing with AVIF. That surely sounds pesky. I did some digging and I’m happy to provide you some guidance, which I hope will fix these issues.
The issue with WordPress returning AVIF images as poorly compressed, poor-resolution JPEGs, may be due to the following reasons:
- Your server supports AVIF only partially (unlikely as you said that it runs PHP 8.3 with full AVIF support)
- WordPress uses JPEG as a fallback option when it cannot handle certain options such as AVIF resizing (most likely the cause of the issue)
- Lack of full AVIF support in the image library being used to generate AVIF (which is either GD or Imagick).
I did some research for you and can suggest the following solutions:
[Easiest Solution] Set up a custom plugin
I would suggest using the Modern Image Formats plugin from the WordPress Performance Team, which sets image uploads to AVID by default. Once the plugin is installed, you can regenerate your existing JPEG thumbnails to AVIF using something like Regenerate Thumbnails. I think this might be the shorest, and easiest fix for your issue.
With that said, if you want to get your hands dirty, here are a few additional steps (I recommend doing all three), which might also fix these issues…
Prevent JPEG Fallback
This can be done by adding a custom code like so in your functions.php file or a custom code snippet plugin (like this one):
add_filter('wp_image_editor_output_format', function($formats) {
$formats['image/avif'] = 'image/avif'; // Force AVIF output
return $formats;
});
This would prevent JPEG fallback altogether.
Improve Compression Quality
I see that your issue is with compression quality. You can hard set this with a snippet like so:
add_filter('jpeg_quality', function($quality) {
return 100; // Set to maximum quality
});
add_filter('wp_editor_set_quality', function($quality, $mime_type) {
if ($mime_type === 'image/avif') {
return 90; // Set AVIF quality to 90
}
return $quality;
}, 10, 2);
Set your Image Editor Library to Imagick
WordPress typically uses the GD Library or Imagick for image processing. Imagick is known to be much better compared to GD for AVIF. You might want to use a snippet like this to “force” Imagick for better compression:
add_filter('wp_image_editors', function($editors) {
return ['WP_Image_Editor_Imagick', 'WP_Image_Editor_GD'];
});
P.S. I have not tested this code on a live environment. I would strongly recommend that you try out any code in a local or staging environment before implementing it on a live site.
I hope that helps! Here’s wishing that all these issues with AVIF get sorted out asap!
