If Chrome, use WebP

Question

Since only Chrome and Opera currently support WebP, I was wondering if I can target these two specific browsers and redirect them to get a different version of my site so that I can quickly optimize the site loading speed?

Thanks.

Answer 1

For a while, thumbor supports automatic web page conversion:

https://github.com/thumbor/thumbor/wiki/Configuration#auto_webp

You still have to configure the load balancer to pass the webp accepts header, but apart from that, thumbor will take care of everything for you.

Hope this helps!

Answer 2

I solved this problem as follows:

• Check if client declares "image / webp" in Accept header
• If WebP is supported, check if the local WebP file is on disk and serve it
• If the server is configured as a proxy server, add the header "WebP: true" and go to the backend
• Add "Vary: Accept" if the WebP service resource

in nginx:

location / { if ($http_accept ~* "webp") { set $webp "true"; } # Use $webp variable to add correct image. } 

In my case, I use thumbor software to convert images. https://github.com/globocom/thumbor

 pip install thumbor 

My conf:

 upstream thumbor { server 127.0.0.1:9990; server 127.0.0.1:9991; server 127.0.0.1:9992; server 127.0.0.1:9993; server 127.0.0.1:9994; } location / { if ($http_accept ~* "webp") { set $webp "T"; } if ($uri ~* "(jpg|jpeg)$") { set $webp "${webp}T"; } proxy_cache_key $host$request_uri$webp; if ($webp = "TT") { rewrite ^(.*)$ "/unsafe/smart/filters:format(webp)/exemple.com$uri" break; proxy_pass http://thumbor; add_header Content-Disposition "inline; filename=image.webp"; } if ($webp != "TT") { proxy_pass http://exemple.com; } }