Hope avatar can support avif format files

oppoo

When uploading an avatar in avif format, I received a prompt that "the file type can only be jpeg, jpg, png, bmp, gif".
Compared to other formats, avif has a higher compression ratio and image quality, and I can't find a reason to reject it.
I'm sure my infrastructure can handle this type of file, hope to see an update in the next version, or where do I need to modify to lift the file type restriction.

Thanks!

Valeyard

oppoo When uploading an avatar in avif format, I received a prompt that "the file type can only be jpeg, jpg, png, bmp, gif".
Compared to other formats, avif has a higher compression ratio and image quality, and I can't find a reason to reject it.

Avif is not a lossless format, so its usefulness for avatar uploads is very limited as all avatars are converted to PNG. Therefore the preferred upload format is a lossless format - BMP/TIF/ICO/PNG/GIF/PSD (although all of those formats can be compressed by pallet/colour quantisation). There isn't much need to support lossy formats beyond JPEG.

You can always compress or optimise them yourself on the back-end.

clarkwinkelmann

Which formats are supported is dictated by the formats supported by the Intervention Image library for both Imagick and GD (which we use to resize avatars and convert them to PNG) https://image.intervention.io/v2/introduction/formats

It seems like we could enable webp support since it should now be supported by both.

We could dynamically enable TIF, ICO and PSD when Imagick is used.

Unfortunately avif format does not appear on the list.

However the release notes page shows support for AVIF since 2.6.0 https://image.intervention.io/v2/introduction/release-notes It's unclear which drivers support it and how to load such a file though. If the support is native or in both drivers we could consider bumping the version requirement and whitelisting the MIME type. This would require some tests on a development copy of Flarum with modified MIME whitelist.

oppoo

clarkwinkelmann
Hello, thank you for your detailed answer!

The information I found shows that both GD (in php8.1) and Imagick (ImageMagick ≥ 7.0.25) already support avif files：
https://avif.io/blog/tutorials/imagemagick/
https://php.watch/versions/8.1/gd-avif
Imagick/imagick356

oppoo

clarkwinkelmann We could dynamically enable TIF, ICO and PSD when Imagick is used.

Does this mean that these file types are automatically supported when I enable the Imagick module, or do I need to do something extra, thanks!

oppoo

clarkwinkelmann which we use to resize avatars and convert them to PNG

Then I notice here that the image is automatically converted to PNG format, is it possible that we can choose the desired target format ourselves, thanks!

clarkwinkelmann

oppoo Does this mean that these file types are automatically supported when I enable the Imagick module, or do I need to do something extra

Currently no. You would have to add more allowed MIME types for images in the AvatarValidator. This file shouldn't be manually edited though as changes will be lost. It might be possible to use the Validator extenders of Flarum to change those, I had written examples here but I'm not sure this is actually applicable to avatar validation because the Laravel validator isn't used in the same way internally https://discuss.flarum.org/d/29506-custom-user-validation-rules-examples If that doesn't work you would need a service provider to replace the entire validator class.

oppoo Then I notice here that the image is automatically converted to PNG format, is it possible that we can choose the desired target format ourselves, thanks!

No, this is not possible at the moment. An extension might be able to change that by replacing some of Flarum's classes still.

oppoo

clarkwinkelmann
Got it, thanks!

oppoo

clarkwinkelmann You would have to add more allowed MIME types for images in the AvatarValidator

Thanks a lot, after I tried adding avif to AvatarValidator.php, it worked fine, although the file size increased after converting to png format (11.9K --> 16K)

    protected function getAllowedTypes()
    {
        return ['jpeg', 'jpg', 'png', 'bmp', 'gif', 'avif'];
    }

oppoo

Valeyard
Hi,
Due to server storage and bandwidth resources, I needed a smaller file size with satisfactory image quality, and AVIF was a good choice.
Then you can also test the performance of the different formats here(https://squoosh.app), and I think AVIF has an amazing balance of file size and image quality compared to traditional formats

clarkwinkelmann

Valeyard its usefulness for avatar uploads is very limited

I think supporting more (input) file types is always better for user experience. If we can process a file, we should probably have it enabled, because it's that less friction for the user that somehow has an image in that format.

Making the avatar output format configurable is currently not on our roadmap. I assume PNG was chosen as a good balance for the average avatar, but it's true that it would be useful if Flarum could choose the best format for every single image to minimize its file size. This could be implemented with a community extension. Browser and operating system needs to be taken into consideration here, I'm not sure avif would be supported on all devices? A switch between PNG and JPG would be a good start.