Images in AVIF format instead of WebP?

currently LiteSpeed Cache plugin itself does not support AVIF , but however , you can still use any 3rd party plugin for this purpose if you wish.

no , at this moment we do not have plan to add support for AVIF , as it will double the cache copies (one cache for avif , one cache for no-avif browser )

currently LiteSpeed Cache plugin itself does not support AVIF , but however , you can still use any 3rd party plugin for this purpose if you wish.

Thank you for youre response. Does this mean that I should disable the option to replace images with WebP using Litespeed and use another plugin for that?

I’m only interested in offering the option to load AVIF images in very specific parts of the theme I’m using, as they result in significantly smaller file sizes compared to WebP. Is there an alternative solution, such as using code like

<img srcset="elva-fairy-w.avif, elva-fairy-w.webp, elva-fairy-w.jpg" src="elva-fairy-w.jpg" alt="Elva dressed as a fairy"> , or would it not work when used alongside the LiteSpeed Cache plugin’s functionality?

• This reply was modified 1 year, 9 months ago by fotov60.

yes, it would be better to keep webp replacement enabled , this will create 2 cache copies, one for webp browser, one for non-webp , usually if browser supports webp it should supports avif as well , so it’s pretty much covered

unfortunately no , from LSCPW side, there is no filter or any code you could use to hook avif

And since you don’t have plans to incorporate AVIF support, as it will double the cache copies, could you perhaps find some middle ground option that allows filtering AVIF images from the conversion to WebP, for example, or specify the image paths where we wouldn’t want the conversion to be applied? These are just two quick ideas I’m proposing, and I’m not sure if they would be feasible.

hmmmmm? I got a quick idea you could try though

first of all you must generate the avif file somehow , since our plugin does not provide such feature

after that, the plugin has an API to modify the output after its modification and before send to browser , in where you can run some check and replace , e.g.

function remove_broken_style( $content ) {
/*
grab and generate a list of image inside of $content 
check if such image has avif file availeble , if so , replace the image URI , e.g  from /wp-content/uploads/2023/06/08/something.jpg to /wp-contnt/uploads/2023/06/08/something.avif
then return $content 
*/
    return $content ;
}
add_filter( 'litespeed_buffer_after', 'remove_broken_style', 0);

or another dirty workaround I used before through .htaccess rewrite rule , for webp replacement on some loading method plugin does not support

RewriteCond %{HTTP_ACCEPT} "image/avif"
RewriteCond %{REQUEST_FILENAME}.avif -f
RewriteRule ^(.*).(jpg|jpeg|png|gif) $1.$2.avif [T=image/avif,L]

this will check each request to webserver on its accept header, if it supports avif , and something.jpg.avif exists , then rewrite the URI to something.jpg.avif with force content type to image/avif , this does NOT change URI in browser, but under the hood it loads as image/avif with smaller size

the rewrite rule way will break with some CDN caching if it doesn’t support vary on accept