CDN WebPerf How to use WebP with JPG PNG and Cloudflare, Cloudfront - Centminmod

Hello @eva2000

I have open a new topic to focus on WebP and Cloudfront Cloudflare.

---

I have test my config with and normally only WebP works with png, with jpg there was no webp.



Amazon AWS Cloudfront >> your distribution > Origins and Origin Groups >> edit and add custom header, like below.

Vary header value Accept,Accept-Encoding



and jpg works




For other of course your need 1st follow tutorial here:
Nginx Serving WebP Images Conditionally Demo

and recompile your nginx, option 5.

Summary:
With standard add_header Vary "Accept"; png works only, with custom header jpg works too.


Now the time for Cloudflare

 

Give me time to make a tests. I will update this topic.

 

Very often you will not find example only deep search and testing can show you.
In amazon there is many things hidden and visible only from API.
List use route53 and API to renew the Letsencrypt.

Now I want to test Cloudflare if it will really not works or there is a solution.

 

One last thing I disabled compression on Amazon Cloudfront side.

I did nit turn in on again for test, but for the first test there was some problems, so I thing extra you need disable compression.

My finding i did not read about it.

 

Hi @eva2000 I have tested a Cloudflare free account and I see that Couldflare serve webP in my end.

my config is
CDN - WebPerf - Webp - how to use?

With orange selected



I made a tests


from AWS Cloudfront


I have now with Cloudflare



First Byte Time (back-end processing): 49/100 Learn More
818 ms First Byte Time
317 ms Target First Byte Time

Leverage browser caching of static assets: 55/100 Learn More
WARNING - (3.8 hours) jpg

changed to 1 month


now I have





Any advise how to improve it - the first byte time?



PS. I don't know why my VPS is slower from 50ms to more then 200ms.
Maybe this is a reason.

 

OK, now it is clear for me. Thank you for the explanation.

I have test my website crossbrowsertesting.com and Browserling - Live interactive cross-browser testing

but it seems that there are pictures. For my nginx config for my website with cache on Cloudflare on.


OK I have check it on ream MAC and there is no images.

That testers websites are not reliable.

 

Hello @eva2000

what about to add a Nginx: Detecting WebP support with Header Vary Accept. Filename format: image.jpeg / image.webp
Nginx: Detecting WebP support with Header Vary Accept. Filename format: image.jpeg / image.webp

Code (Text):

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;
    }
}

What do you think?

 

I thought that if browser send information that it can handle webp format, it will receive webp images, otherwise it will receive jpeg. For older browser this means they will always receive jpeg and it need to be done on nginx side.

Is there no option to check on nginx side the compatibility with webp and serve even different jpg names?

 

Hello @eva2000 I have a discussion on Prestashop/Thirtybees forum about Webp.

What do you think? Has he right?