AVIF Images Not Showing Previews in MODX Media Manager

Hi everyone,

I’m using MODX 2.8.7 with PHP 8.1, and I’m having trouble with AVIF images. I can upload AVIF files and use them on my site without any issues, but the Media Manager doesn’t show previews for these images. It’s making it tricky to manage and pick the right images.

Has anyone else experienced this? I’m wondering if there’s a setting I need to change or something else I might be missing. Thanks a lot!

Edit the media source (Menu “Media” → “Media Sources” or /manager/?a=source) and change the property imageExtensions to also include “avif”.

Thanks for your reply @halftrainedharry .
I’ve added the settings, but it’s still not working sadly. There’s probably something I’m missing somewhere.

By the way, are there any versions of phpThumb provide support for Avif images by any chance ?

Thanks anyways!

I’m not sure if the problem is the phpThumb library.

You could try using PHP 8.2.
MODX uses the PHP function getimagesize and in the documentation it says:

Version 8.2.0
Now returns the actual image dimensions, bits and channels of AVIF images; previously, the dimensions were reported as 0x0, and bits and channels were not reported at all.

1 Like

I’ve just tried with PHP 8.2, and the result is the same.
If I’m not mistaken, avif should be supported from version 8.1.

PS.
I have found some errors in my log
…model/phpthumb/phpthumb.class.php : 4460) PHP warning: imagecreatefromstring(): No AVIF support in this PHP build
…model/phpthumb/modphpthumb.class.php : 182) Error outputting thumbnail:
OutputThumbnail() failed because !is_resource($this->gdimg_output) in file “phpthumb.class.php” on line 702

Edit 2
I think the issue is not with Modx, but with the hosting itself. Still looking into it…

Edit 3
It seems that Plesk does not provide support for Avif at the moment which is a shame (https://support.plesk.com/hc/en-us/articles/16736571012503-Is-there-support-for-AVIF-image-files-in-Plesk)

1 Like

Image support in PHP is part of gd and Imagick libraries. It’s pretty common for those libraries to not be updated regularly. For years no new image formats came about, then we had webp and avif in a relatively short span. While support’s been there for a while, it’s not available everywhere yet. It’s dependent on the version of Imagick and gd libraries more than the PHP version. Then on the MODX side the phpThumb library shipped with Revo.

Another option if you’re stuck with your host is something like an image proxy service that will cache and transform the images at the edge rather than on the server. You uplaod whatever your server can handle and the proxy will transform and deliver the most efficient version of the image the client browser can handle. Cloudflare does this as do other services from the likes of ShortPixel.

3 Likes

Thanks for your reply!
Is there any guide on how to use Cloudflare as a proxy for MODX images?

It’s for a small website at the moment, but who knows, I may implement it in the future.

Carlo I’m itching to use AVIF myself but my web host doesn’t support it yet. It’s not just the version of PHP it also depends on whether AVIF has been compiled into PHP.
In the MODX dashboard you can look at “Manage > Reports > System Info”, then click ‘view’ next to phpinfo. If you see the build flag ‘–with-avif’ then you are OK. If you don’t but you see for example ‘–with-webp’ then your PHP does not include AVIF support.
If it does include ‘–with-avif’ then your problem must be somewhere else.

3 Likes

Hi @stormhike yes I checked, and it was definitely Plesk. However there’s some good news:

As of today, they support Avif!

Carlo good news. And you prompted me to look at my host where I find PHP 8.3 is now compiled with --with-avif.
I enabled AVIF in my code and it worked straight away.
The extra I’m using is pthumb (2.3.3-pl [14.06.2014]) and I have the setting phpthumbof.use_resizer set to No and pthumb.use_ptcache set to Yes.
I do use the PHP functions for avif … imagecreatefromavif() and imageavif().
I’m also using lightGallery by sachinchoolur, GitHub - sachinchoolur/lightGallery: A customizable, modular, responsive, lightbox gallery plugin. which worked straight away with AVIF.

1 Like

Glad to hear that!

I’ve done some tests on my own (nothing scientific), and it seems that a compression level of 86% with WebP is roughly equivalent to 50% with AVIF. AVIF images are much smaller for the same quality.

If you’re looking for an open-source image gallery (MIT license), you might want to check out https://photoswipe.com

I use 77% for WebP/JPEG and 55% for AVIF, I think 50% is pushing it a little too far. Photoswipe looks just like the lightbox I use. Personally I can’t stand transitions, and turn them all off except when actually swiping.