0

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

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

4

1 回答 1

0

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

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

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

您的替代方案是：

a) 提供一个指向单个 URL 的链接，该 URL 读取“接受”标头，然后决定是返回 webp 内容还是 png 内容，并获取正确的内容并设置正确的标头以将其返回给浏览器（好像它有直接请求图像文件） - 例如，这可以通过 PHP 脚本来实现。

b) 在 JSON 中为 png 和 webp 选项提供 URL，然后在显示图像时，使用 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/和https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture。

于 2021-06-25T15:10:50.463 回答