PNG images are not transparent

likely an issue with transperancy of AVIF images in Chrome, try simply adding .png to the comma-separated image optimization exclusion list maybe?

Thanks, I added .png to “Optimization exclusions” and pngs are now showing transparent in Chrome again even if I have “Load WebP or AVIF in supported browsers?” checked. I also checked this on a separate computer and it’s showing fine as well.

OK great! You can now try to make the exclusions more specific to only the files (credit card logos in the headers, category buttons on homepage) from being optimized.

Alternatively I could provide you with a code snippet to not serve AVIF images if you want?

Hello,
Thanks for all your help.

Just making sure I understand this correctly. So say if I have a png image named sample.png that’s having this issue but other png images are just fine, so to fix the issue with that just that specific image, I would enter in sample.png in the “optimization exclusions” field. If I just leave it as .png, it’s going to exclude ALL the png files on the site, correct?

Sure, you can send me that code snippet if you want. I can try it out. Where exactly would put this code snippet on the site? (In the appearance > customize > additional CSS or like in the wp-config.php?)

Thank you!

to fix the issue with that just that specific image, I would enter in sample.png in the “optimization exclusions” field. If I just leave it as .png, it’s going to exclude ALL the png files on the site, correct?

100% correct ??

Sure, you can send me that code snippet if you want. I can try it out.

that would be:
add_filter( 'autoptimize_filter_imgopt_do_avif', '__return_false');

Where exactly would put this code snippet on the site? (In the appearance > customize > additional CSS or like in the wp-config.php?)

The easiest & safest solution is using the code snippets plugin.

Hello,
Awesome, thanks for confirming that and thanks for the snippet. I’ll try it out using that plugin. If I run into any issues, I’ll let you know.
Thanks a ton!

Question is, why is this issue appearing now and what is causing it?

I’ve been using Shortpixel CDN to serve “optimized” images for some time now and never had a problem. After starting work on a new site yesterday, I noticed the same as Deirdre (on several WP sites now), where using Shortpixel CDN via AO with the “Automatically serve “next-gen” WebP or AVIF image formats” option enabled is producing images with a black background instead of transparent (when original image is a transparent PNG). This issue only occurs in Chrome.

After some time practicing a bit of Google-fu to turn up some info, I’m still at a loss.

Thanks,

Brian

The reason is AO now also asks Shortpixel to convert the images to AVIF if the browser support the format (so currently only Chrome, soon also Firefox), and in the AVIF conversion logic the transparency seems to get lost.

Hence the workaround to either exclude those images from being optimized (you could also exclude them from being lazyloaded, as AO depends on its own lazyload to determine of webp or avif are supported) OR to use the code snippet to tell AO not to “do” AVIF.

hope this clarifies,
frank

But this isn’t exactly a new option, is it (serve AVIF)? Unless a recent update to the plugin has promoted the AVIF format?

With dozens of sites in production using the AO plugin, I’d like to figure out where, exactly, this issue is stemming from so I can hopefully resolve/prevent it before I’m responding to client complaints.

As I mentioned, I have some sites showing black backgrounds on transparent PNGs, whereas others are not exhibiting this issue (confirmed that Shortpixel CDN is serving AVIF image formats in both cases). All AO settings between the sites are similar, at least on the “Images” optimization tab. I’ve even flushed affected images from the Shortpixel CDN.

Is this issue something we should be reporting to Shortpixel?

I am taking this up with Shortpixel (but you can too).
AVIF support was introduced in AO 2.7.8, but the issue will only occur if:
1. you have image optimization active AND
2. you have lazyload and webp/avif active AND
3. you have png’s with transparancy set

frank

Hey! I have the same problem! The client wrote that the pictures do not work! I went in and all the pictures in png format became non-transparent ?? or even a black square! What has changed ??? please fix it! Or update the plugin without AVIF format, if it does not work already, then let it be only WebP

I’m sure many will soon have the same problems, especially when the cache is dropped (reset)! Just now, my colleague also wrote to me about this problem!

either add .png to the lazyload exclusion field or use this code snippet @kozak85

add_filter( 'autoptimize_filter_imgopt_do_avif', '__return_false');

frank

I conferred with Shortpixel and this is due to a recent technical change in their AVIF toolchain. They are looking at alternative solutions, but for now I would indeed suggest to either:

* add .png to the lazyload exclusion field
* or to use below code snippet to disable AVIF images;

add_filter( 'autoptimize_filter_imgopt_do_avif', '__return_false');

add_filter (‘autoptimize_filter_imgopt_do_avif’, ‘__return_false’);
If I install this, it will show everything in WebP format with lazy loading and without problems, I understand correctly? You let us know when the shortpixel fixes the error with avif ?!