Up until now Autoptimize, when performing image optimization, relies on JS-based lazyloading (with the great lazysizes component) to differentiate between browser that support different image formats (AVIF, WebP and JPEG as fallback).
As JS-based Lazyload is going out of fashion though (with native lazyload being supported by more browsers and WordPress having out-of-the-box support for it too), it is time to start working on <picture> output in Autoptimize to serve “nextgen image formats” where different <source> tags offer the AVIF and WebP files and the <img> tag (which includes the loading=”lazy” attribute) with JPEG as fallback.
if “Load WebP or AVIF in supported browsers?” is on, .png files with transparency will loose that transparency in browsers that support AVIF due to a recent technical change in Shortpixel’s AVIF toolchain.
Shortpixel is looking at alternative solutions, but until then as a workaround you can either:
add .png to Autoptimize’s lazyload exclusion field
or to use below code snippet to disable AVIF images;
Some people asked for documentation/ information on that new autoptimize_filter_imgopt_lazyload_from_nth filter which allows one to tell AO not to optimize the first X images found in the HTML, so here is an example code snippet that sees AO not lazyload the first 5 images:
PSA: WordPress 5.6 changes the filename of jQuery core. If you’re using Autoptimize and you have jQuery excluded (which is default) you will want to update your JS optimization exclusion list from js/jquery/jquery.js to js/jquery/jquery.min.js.
Update: Autoptimize 2.8 will automagically fix this, urgently looking for some testers to download https://github.com/futtta/autoptimize/archive/beta.zip (make sure 2.7.8 is disabled when enabling the beta). If all goes well and I get some confirmation the update (which has a lot more then just the fix) will go out today!
Update2: AO28 was released, all is (or should be) OK now :)