Detect if browser supports WebP format? (server side)

Question

There is already a thread about Detecting WebP support using client-side. How to detect WebP support using server side?

Answer 1

Today, you should check the accept header for image/webp. All browsers which support WebP will send this as part of their accept string for all requests (images and non-images). In short:

if( strpos( $_SERVER['HTTP_ACCEPT'], 'image/webp' ) !== false ) {     // webp is supported! } 

(you might want to use preg_match instead and add word boundary checks and case insensitivity, but in the real world this should be fine)

---

Here's my original answer from several years ago, when the above was not reliable

The "proper" way is to check the accept header which is sent, but a bug in Chrome means that it won't list image/webp even though it does support it.

This is a relevant forum thread: https://groups.google.com/a/webmproject.org/forum/#!topic/webp-discuss/6nYUpcSAORs

which links to this bugtracker: https://code.google.com/p/chromium/issues/detail?id=169182 which in turn links to this one: https://code.google.com/p/chromium/issues/detail?id=267212

End result? While it isn't implemented just yet, soon Google Chrome will explicitly list image/webp as an accepted type for both image and non-image requests. So your script which serves the HTML can check for that. Opera already sends image/webp as part of its standard accept header (again regardless of whether it is an image request or not).

So, you could check like so:

if( strpos( $_SERVER['HTTP_ACCEPT'], 'image/webp' ) !== false || strpos( $_SERVER['HTTP_USER_AGENT'], ' Chrome/' ) !== false ) {     // webp is supported! } 

(you might want to use preg_match instead and add word boundary checks and case insensitivity, but in the real world this should be fine. You might also want to check for at least version 6 of Chrome, but there's pretty much nobody running an out-of-date version so there's not a lot of point)

Answer 2

Dave answer is good but not working with all browsers. I use this method:

function GetBrowserAgentName($user_agent) {     if (strpos($user_agent, 'Opera') || strpos($user_agent, 'OPR/')) return 'Opera';     elseif (strpos($user_agent, 'Edge')) return 'Edge';     elseif (strpos($user_agent, 'Chrome')) return 'Chrome';     elseif (strpos($user_agent, 'Safari')) return 'Safari';     elseif (strpos($user_agent, 'Firefox')) return 'Firefox';     elseif (strpos($user_agent, 'MSIE') || strpos($user_agent, 'Trident/7')) return 'Internet Explorer';     return 'Other'; } 

So after checking browser:

  $BrowserAgentName = GetBrowserAgentName($_SERVER['HTTP_USER_AGENT']);   If ($BrowserAgentName == 'Chrome' || $BrowserAgentName =='Opera') {   // webp is supported!    } 

Here I just add Opera and Chrome, you can use deeper detector for browser version and add more agents to your if{}. But you need update this code as browsers update to support image/webp.