How to check if browser accepting webp images?

Question

I am using $_SERVER['HTTP_ACCEPT'] and after I can check if browser supporting webp images. But when I sending ajax request and trying to get the $_SERVER['HTTP_ACCEPT'] it's returning application/json, text/javascript, */*; q=0.01.

How can I check if client browser accepting webp images?

@brc-dd It's solving half part of my question. When user sending ajax request from his browser I need check are client browser accepting webp format. In this case `$_SERVER['HTTP_ACCEPT']` not working. — Karen Shahmuradyan, Jun 25 '21 at 14:21
Exactly what is the ajax request requesting? If it's requesting some HTML or JSON data to display on the page, then that's what it'll ask for in the accepts header. If the request is _specifically_ for the image (e.g. in the request generated by putting an ` — ADyson, Jun 25 '21 at 14:22
@ADyson I am getting data from database and returning as json. Can I request json and get is browser accepting webp format? — Karen Shahmuradyan, Jun 25 '21 at 14:29
No of course not, why would the browser tell the server it accepts webp when it's actually trying to get some JSON from it? That makes no sense. It would, theoretically, leave open the possibility that the server could legitimately return return an image file instead of the JSON text. Not helpful. The browser only tells what it's prepared to accept as a response _for the current request_. So anyway why, at the time you're returning JSON, do you need to know this? That also doesn't entirely make sense. Are you returning some links to images in the JSON, or something? — ADyson, Jun 25 '21 at 14:30
@ADyson because I need to know if browser accepting webp return webp format url if no return png format url . And except image I am returning data like name, description and etc.. — Karen Shahmuradyan, Jun 25 '21 at 14:35
Well you won't find out until the browser actually tries to request the image, as I explained earlier. So the webserver needs to read that request and respond with an image of appropriate file type. Alternatively you can generate HTML which will provide the browser with multiple possibilities depending on available support - see https://web.dev/serve-images-webp/ for that technique. See also https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture — ADyson, Jun 25 '21 at 14:41
Just whitelist the ones that CAN handle it, and if the browser isn't one of them - it probably can't. https://caniuse.com/webp you can detect the browser via the user agent header. the only drawback is that you have to maintain it and keep it up to date — HTMHell, Jun 25 '21 at 14:43
@HTMHell IMO better to let the browser handle it through the picture tag. Just give it all the options and let it decide. user agents have to be kept up to date, are horrible to work with, and easily spoofed. Not a rabbit hole you want to go down, when there's an alternative approach available. — ADyson, Jun 25 '21 at 14:45

score 1 · Accepted Answer · answered Jun 25 '21 at 15:10

The browser only tells the server what it's prepared to accept as a response for the current request it's making.

So if it's making an AJAX request to get some HTML or JSON data to display on the page, then that's what it'll ask for in the accepts header. If the request is specifically for the image (e.g. the request generated by putting an <img tag on the page), then it's that request which will contain the list of acceptable image file types.

If you're trying to decide whether to supply a webp or png image URL in your JSON, that isn't really going to work.

Your alternatives are:

a) provide a link to a single URL which reads the "accepts" header and and then decides whether to return webp content or png content, and fetches the correct content and sets the correct headers to return it to the browser (as if it had requested the image file directly) - this could be implemented by a PHP script for example.

b) provide URLs for both the png and webp options in your JSON, and then when you're displaying the image, use the HTML <picture> tag to provide the browser with both options (plus a fallback for browsers which don't support the picture tag either), and let the browser choose what to use, based on what it knows it supports.

e.g.

<picture>
  <source type="image/webp" srcset="flower.webp">
  <source type="image/jpeg" srcset="flower.jpg">
  <img src="flower.jpg" alt="">
</picture>

See https://web.dev/serve-images-webp/ and https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture for more info on option (b).

How to check if browser accepting webp images?

1 Answers1