Avif support broken - Githubissues

futtta / autoptimize

Official Autoptimize repo on Github

https://autoptimize.com/pro/

GNU General Public License v2.0

283 stars 87 forks source link

Avif support broken #392

Closed grzegorz-janoszka closed 1 year ago

grzegorz-janoszka commented 2 years ago

Hi, I have a plugin that modifies a link to each image with using a <picture> tag to serve also avif file. New AO broke the avif link. It looks like that now:

<source data-srcset="https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img/https://mysite.tld/uploads/2015/08/image-500x332.avif" type="image/avif" />

Please support the <picture> tag with <source srcset="file.avif"><img src="file.jpg></picture>. Much appreciated, thank you in advance!

futtta commented 2 years ago

"new AO broke it completely" implied this problem did not exist when still on 3.1.2 @grzegorz-janoszka ?

grzegorz-janoszka commented 2 years ago

The problem began precisely in the beginning of the week 41. Not sure which version was then.

futtta commented 2 years ago

week 41, that's approximately when you activated the AOPro Beta, which enabled lazyload and Image Optimization (which also does webp/ avif ) through Shortpixel, in which case indeed the srcset is changed to data-srcset.

what you can do;

disable AO lazyload
add avif or source to the lazyload exclusions
disable lazyload (and img opt) acting on picture/source elements with this filter; add_filter( 'autoptimize_filter_imgopt_dopicture', '__return_false' );

grzegorz-janoszka commented 2 years ago

It wasn't about serving images from the CDN, it was about the content of the data-srcset:

<source data-srcset="https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img/https://mysite.tld/uploads/2015/08/image-500x332.avif" type="image/avif" />

Is that a right syntax?

futtta commented 2 years ago

AO's lazyload changes <source srcset into <source data-srcset indeed

AO's image opt. changes https://mysite.tld/uploads/2015/08/image-500x332.avif into https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img/https://mysite.tld/uploads/2015/08/image-500x332.avif

grzegorz-janoszka commented 2 years ago

Ah, I know what the problem was. Some images are served as webp, some are avif, no idea why. When I was diagnosing it I saw the image served as webp, and then by mistake I checked the html code for another image (which was served as avif) and I assumed the avif link was broken. Sorry for false alarm.