[英]Detect if browser supports WebP format? (server side)
今天,您应该检查image/webp
的accept
标头。 所有支持 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
链接到这个错误跟踪器: https : //code.google.com/p/chromium/issues/detail? id = 169182 又链接到这个: https : //code.google.com/p/chromium/issues /详细信息?id=267212
最终结果? 虽然它还没有实现,但很快谷歌浏览器就会明确地将image/webp
列为图像和非图像请求的可接受类型。 因此,为 HTML 提供服务的脚本可以对此进行检查。 Opera 已经将image/webp
作为其标准accept
标头的一部分发送(同样不管它是否是图像请求)。
所以,你可以这样检查:
if( strpos( $_SERVER['HTTP_ACCEPT'], 'image/webp' ) !== false || strpos( $_SERVER['HTTP_USER_AGENT'], ' Chrome/' ) !== false ) {
// webp is supported!
}
(您可能想改用preg_match
并添加单词边界检查和不区分大小写,但在现实世界中这应该没问题。您可能还想检查至少版本 6 的 Chrome,但几乎没有人跑出来-最新版本,所以没有太多意义)
Dave 的回答很好,但不适用于所有浏览器。 我用这个方法:
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 时更新此代码。
只是我在 Facebook 上注意到的一件小事 - 他们的 facebookexternalhit 机器人(当有人向其发布地址时会抓取您的网站的机器人)还不能识别 webp 图像。 因此,我添加了以下检查以禁用我客户网站中 Facebook 机器人的 webp 图像:
if (strstr(strtolower($_SERVER["HTTP_USER_AGENT"]), "facebook"))
return false;
否则,当一个网页被共享时,它会显示错误的图像(它会在页面中找到的第一个 JPG)。
就我而言,我使用的是 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">
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.