28

已经有一个关于使用客户端检测 WebP 支持的线程。如何使用服务器端检测 WebP 支持？

4

4 回答 4

69

今天，您应该检查accept标题中的image/webp. 所有支持 WebP 的浏览器都会将此作为其接受字符串的一部分发送给所有请求（图像和非图像）。简而言之：

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

（您可能想preg_match改用并添加单词边界检查和不区分大小写，但在现实世界中这应该没问题）

这是我几年前的原始答案，当时上述内容不可靠

“正确”的方法是检查accept发送的标头，但 Chrome 中的一个错误意味着image/webp即使它支持它也不会列出。

这是一个相关的论坛主题：https ://groups.google.com/a/webmproject.org/forum/#!topic/webp-discuss/6nYUpcSAORs

链接到这个 bugtracker：https ://code.google.com/p/chromium/issues/detail?id=169182又链接到这个：https ://code.google.com/p/chromium/issues /detail?id=267212

最终结果？虽然它还没有实现，但很快谷歌浏览器将明确列出图像和非图像请求image/webp的可接受类型。因此，您提供 HTML 的脚本可以检查这一点。Opera 已经将其作为其标准标头的一部分发送（同样无论它是否是图像请求）。image/webpaccept

所以，你可以像这样检查：

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

（您可能想preg_match改用并添加字边界检查和不区分大小写，但在现实世界中这应该没问题。您可能还想检查至少版本 6 的 Chrome，但几乎没有人跑出来-date 版本，所以没什么意义）

于 2013-08-10T16:53:44.003 回答
1

戴夫的回答很好，但不适用于所有浏览器。我使用这种方法：

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';
}

所以检查浏览器后：

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

  }

这里我只添加了 Opera 和 Chrome，您可以使用更深的浏览器版本检测器并为您的 if{} 添加更多代理。但是您需要在浏览器更新以支持图像/webp 时更新此代码。

于 2016-08-26T21:41:04.610 回答
1

就我而言，我使用的是 C# Asp.Net MVC。SO 没有指定技术，所以我发现自己在看这个线程。对于碰巧遇到这种情况的其他人来说，这是我想出的解决方案：

bool acceptsWebP = Request.AcceptTypes.Contains("image/webp");
string ext = Path.GetExtension(image.ImagePath);
string webP = image.ImagePath.Replace(ext, ".webp");
if (acceptsWebP)
{
    <img class="img-fluid lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" data-src="\Uploads\@webP" alt="@item.ProductName">
}
else
{
    <img class="img-fluid lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" data-src="\Uploads\@image.ImagePath" alt="@item.ProductName">
}
于 2020-10-30T19:40:00.600 回答
1

只是我在 Facebook 上注意到的一件小事——他们的 facebookexternalhit 机器人（当有人向其发布地址时抓取您的网站的机器人）还不能识别 webp 图像。因此，我添加了以下检查以禁用我客户网站中的 webp 图像以供 Facebook 机器人使用：

if (strstr(strtolower($_SERVER["HTTP_USER_AGENT"]), "facebook"))
    return false;

否则，当一个网页被分享时，它会显示错误的图像（它会在页面中找到的第一个 JPG）。

于 2020-04-03T12:17:23.203 回答