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;
Last Sunday-evening while making the beds, listening to Charlotte Adigéry’s very enjoyable radioshow on Stubru, I heard “At last I Am Free”. Turns out Robert Wyatt actually covered this pretty uncharacteristic Chic-song, but I prefer his version: