Hello @datakick
have you test your solution with older browser or Safari e.g 12, which do not support webP?
"The problem with free Cloudflare it doesn't support HTTP Vary header for cache so when Chrome/Firefox webP supported browser populates Cloudflare cache and then next visitor uses Safari browser which doesn't support webP, then Cloudflare will serve a webP image for Safari user which will be a broken image. "
"Cloudflare cache not supporting HTTP Vary header"
With Chrome and Firefox everything will work. With older Safari no.
I have your code, I have changed it little and I see that it not works with Safari 12, with Safari 13 works.
Do not use any emulator or testing websites as there are false positive.
MAC or browser.
Have you test it? Safari browser:
http://appldnld.apple.com/Safari5/041-5487.20120509.INU8B/SafariSetup.exe
I am looking a solution:
location ~ (.+)\.(png|jpe?g)$ {
if ( $http_accept ~* webp ) {
set $webp "A";
}
if ( $request_filename ~ (.+)\.(png|jpe?g)$ ) {
set $file_without_ext $1;
}
if ( -f $file_without_ext.webp ) {
set $webp "${webp}E";
}
if ( $webp = AE ) {
add_header Vary Accept;
rewrite (.+)\.(png|jpe?g)$ $1.webp break;
}
}
https://gist.github.com/sergejmueller/7672727