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

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

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

iCMS 回答:如何检查浏览器是否接受 webp 图片?

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

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

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

您的选择是:

a) 提供一个指向单个 URL 的链接,该 URL 读取“accepts”标头,然后决定是返回 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

本文链接:https://www.f2er.com/194753.html

大家都在问