support avif format

edit: this htaccess code seems to be working. but it won’t work if litespeed cache > image optimization settinge > image webp replacement is on. (I don’t know if this is the problem, faxt works when I turn this setting off)

<IfModule mod_mime.c>    
AddType image/avif            avif    
AddType image/avif-sequence     avifs
</IfModule>
<IfModule mod_rewrite.c>
RewriteEngine On
# AVIF deste?i varsa AVIF format?nda sun
RewriteCond %{HTTP_ACCEPT} "image/avif"
RewriteCond %{REQUEST_FILENAME}.avif -f
RewriteRule ^(.*).(jpg|jpeg|png|gif) $1.$2.avif [T=image/avif,L]
</IfModule>

With the option turned on: avif is skipped, only webp is served. with option turned off: if avif is available but webp is no longer served, original extensions are offered (png, jpg, jpeg etc)

Is there htaccess code to solve this problem? or another solution. thanks

(with Google translate)

Using avif image format isn’t as easy as you might think, and it’s not as easy to solve with a .htaccess rule.

First you have to be aware that the cache plugin is not avif ready. This also applies to the built-in crawler. If you want to use a 3rd party plugin for generating avif images, then assume that all of the ones I know work incorrectly because they use the wrong criteria to detect if a browser supports the avif format . With a 3rd party plugin, the entire function for image optimization and for saving the original images becomes inactive or irrelevant. In the sum of all problems, you can assume that everything that has to do with images will no longer work. But there is hope. A plugin will be available shortly that will completely replace the cache plugin with the important function of avif replacement.

This includes the optimization of the images, the cache functions for avif images, the built-in crawler, the lazy load function. This not only makes it better, but also faster, frees it from the bugs of the cache plugin and ultimately ensures a better PageSpeed Score. Explicitly programmed for LiteSpeed and the LiteSpeed Cache Plugin for WordPress. You just have to be patient. Next week it’s time.

• This reply was modified 1 year, 2 months ago by litecache.

please try this rule

<IfModule LiteSpeed>
RewriteEngine On
RewriteCond %{HTTP:Accept} image/avif
RewriteCond %{REQUEST_FILENAME} ^(.+)\.(jpg|jpeg|png|gif)\.webp$
RewriteRule .* - [E=FILENAME:%1,E=EXTENSION:%2]
RewriteCond %{ENV:FILENAME}\.%{ENV:EXTENSION}\.avif -f
RewriteRule ^(.*).(jpg|jpeg|png|gif).webp $1.$2.avif [T=image/avif,L]

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

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

requirement: you must have file named as something.jpg + something.jpg.webp and something.jpg.avif

it will then :

when request is something.jpg but something.jpg.avif exists, then force load to avif , if avif not exist but webp exists , force load to webp

when request is something.jpg.webp but avif exists , then also force load to avif.

@qtwrk Thanks for the support it works great. sorry i had to test for a few days, i’m not good at this.

I converted the image file with the extension “sample.jpg” into avife. the new extension became like this “sample.jpg.avif”

https://i.ibb.co/2cz66r2/IMG-20230729-WA0005.jpg

htaccess code and it shows sample.jpg.webp in gtmetrix, but the file type is marked as image/avif. would this be any problem? avif format works but the extension is webp.

Also, “replace image webp” setting is turned on in litespeed cache settings. will this make it work? should i turn it off?

I hope you will have full avif support in the near future. I am currently using ezgif and jpg to avif converter (manual). avif file size is much smaller than webp format.

(I used google translate ??

yes, this is forceful override for the file format , it doesn’t change the extension in URL , but as long as you get the content-type correct , that means it works

with the above rule , you don’t need to enabled webp replacement anymore

but no , this workaround will BREAK if you are also using CF CDN

because in your above example , that .webp is cached as avif format , when browser doesn’t support it , it will break.

@qtwrk never thought of that thanks ??

Do you have any solution suggestions? this really upset me. Is it still too early to use avif? Have a little Band-Aid until things get easier? ??

I like litespeed cache and its support. thanks

well , the way I see it , you got 2 options

1. get a CloudFlare enterprise plan , that supports a lot of customization , including vary header , but it’s bit of unrealistic due to high costs
2. use alternative CDN for static resources only , like BunnyCDN

@qtwrk Unfortunately, I can’t include a paid option for this in my life right now.

It seems that one should give up “avif or cloudflare”.

thanks for the answers. I wish you good work.