Transparent PNG's loses transparency with the Modern Image Formats

[callievg]

Bug Description

I tried the modern image formats plugin and when it converts my transparent png's to Exif AVIF it loses transparency. There should be a way to exclude transparent PNGs?

Steps to reproduce

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Screenshots

Additional Context

• PHP Version:
• OS: [e.g. iOS]
• Browser: [e.g. chrome, safari]
• Plugin Version: [e.g. 22]
• Device: [e.g. iPhone6]

[westonruter]

@callievg By Exif do you mean AVIF?

@adamsilverstein Does GD or Imagick not support transparency when generating AVIF perhaps?

[callievg]

@westonruter Sorry Yes AVIF

[westonruter]

@callievg Can you share your Site Health information? Specifically the Media Handling section. We should capture the specific versions of GD and ImageMagick that you have on your server.

[westonruter]

@callievg Here's some info on how to access your Site Health info: https://yoast.com/wordpress-site-health/

Specifically, then Info tab includes a Media Handling section like this:

You can also copy the text via the "Copy site info to clipboard" button.

[callievg]

screencapture-innovationsoftheworld-wp-admin-site-health-php-2024-10-09-09_49_24.pdf

Here you go!

Apologies - I missed your last message.

[westonruter]

OK, I am able to reproduce this issue even in the plugin's wp-env development environment. Specifically, this happens only with AVIF. When I am converting to WebP, then the transparency is preserved.

@adamsilverstein Do we need to have PNGs only convert to WebP for now?

[pbearne]

or check for transparency

[adamsilverstein]

@adamsilverstein Do we need to have PNGs only convert to WebP for now?

Only if we can't find a fix for the issue. I believe we tested for avif transparency

or check for transparency

We do directly check for transparency and try to apply that to output images for uploaded transparent images, see https://github.com/WordPress/wordpress-develop/blob/b5df5f08e0a43a05a2a52b5c151028e0c6a6d14d/src/wp-includes/class-wp-image-editor-imagick.php#L480-L494. maybe something is off with this logic.

I will give this a test locally to see if I can reproduce. if possible, please share the image(s) you are using to test.

[adamsilverstein]

Here you go!

@callievg Thanks for the details. It looks like your Imagick should be able to output AVIF images with transparencies.

I'm curious if you can test a couple of things:

• can you test uploading a transparent avif and verify the subsized/thumbnail images are also transparent? You can use this image from core for testing.
• Under settings->media change this output format to WebP. Are the output files correctly transparent?

[adamsilverstein]

This worked fine in my testing, I uploaded a PNG with transparency and all of the output AVIF images were also transparent background images, they looked just like the original. Here is the test image I used:

Here is my media info:

This may not be version specific, the doc block in core says:

Note that Imagick::getImageAlphaChannel() is only available if Imagick has been compiled against ImageMagick version 6.4.0 or newer.

@adamsilverstein Do we need to have PNGs only convert to WebP for now?

Maybe we can use the check from core and fallback to WebP if the upload has transparency, and the output format is AVIF, and Imagick is the editor and doesn't have support for transparency (ie. getImageAlphaChannel not defined).

[westonruter]

Report from a user on the support forum: https://wordpress.org/support/topic/avif-not-supporting-transparent-png/

[alexfacciorusso]

This affects me too. Using your latest (current) wordpress:php8.3-fpm docker image, and served through apache on a separate container.