如何检查浏览器是否接受 webp 图片？

Question

我正在使用 $_SERVER['HTTP_ACCEPT']，之后我可以检查浏览器是否支持 webp 图片。但是当我发送 ajax 请求并尝试获取 $_SERVER['HTTP_ACCEPT'] 时，它返回 application/json, text/javascript, */*; q=0.01.

如何检查客户端浏览器是否接受 webp 图片？

Answer 1

浏览器只告诉服务器它准备接受什么作为响应对于它正在发出的当前请求。

因此，如果它正在发出 AJAX 请求以获取一些 HTML 或 JSON 数据以显示在页面上，那么这就是它在接受 header。如果请求专门用于图像（例如，通过在页面上放置 <img 标记生成的请求），那么该请求将包含可接受的图像文件列表类型。

如果您要决定是在 JSON 中提供 webp 还是 png 图像 URL，那实际上是行不通的。

您的备选方案是：

a) 向读取“接受”header 的单个 URL 提供 link，然后决定是 return webp 内容还是 png 内容，并获取正确的内容并将正确的 headers 设置为 return 到浏览器（就像它直接请求图像文件一样） - 这可以通过 PHP 脚本实现例如。

b) 在 JSON 中为 png 和 webp 选项提供 URLs，然后在显示图像时，使用 HTML <picture> 标签为浏览器提供两种选项（加上不支持图片标签的浏览器的回退），并让浏览器根据它所知道的支持选择使用什么。

例如

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

有关选项 (b) 的更多信息，请参阅 https://web.dev/serve-images-webp/ and https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture。

如何检查浏览器是否接受 webp 图片？

How to check if browser accepting webp images?

javascript

php

image

http

http-accept-header