检测浏览器是否支持WebP格式？ （服务器端）

Question

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

Answer 1

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

image/webp

（您可能希望使用if( strpos( $_SERVER['HTTP_ACCEPT'], 'image/webp' ) !== false ) { // webp is supported! } 来添加单词边界检查和不区分大小写，但在现实世界中这应该没问题）

---

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

“正确”的方法是检查已发送的preg_match标头，但Chrome中的错误意味着它不会列出accept，即使它确实支持它。

这是一个相关的论坛帖子：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/detail?id=267212

最终结果？虽然尚未实施，但很快Google Chrome会明确将image/webp列为图片和非图像请求的可接受类型。因此，为HTML提供服务的脚本可以检查它。 Opera已经发送image/webp作为其标准image/webp标题的一部分（无论是否是图像请求，都是如此）。

所以，你可以这样检查：

accept

（您可能希望使用if( strpos( $_SERVER['HTTP_ACCEPT'], 'image/webp' ) !== false || strpos( $_SERVER['HTTP_USER_AGENT'], ' Chrome/' ) !== false ) { // webp is supported! } 并添加单词边界检查和不区分大小写，但在现实世界中这应该没问题。您可能还想检查至少版本6的Chrome，但是有几乎没有人运行过时的版本所以没有太多的意义）

Answer 2

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

public MainWindow()
{
    InitializeComponent();

    // auto-size width, and save off value
    this.SizeToContent = System.Windows.SizeToContent.Width;
    var actualWidth = this.ActualWidth;
    // manual-size width
    this.SizeToContent = System.Windows.SizeToContent.Manual;
    // set value to what it was, when auto-sized
    this.Width = actualWidth;
}

检查浏览器后：

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

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

Answer 3

我在Facebook上注意到的一件小事-他们的facebookexternalhit机器人（当有人向其发布地址时抓取您网站的机器人）尚无法识别webp图像。 因此，我添加了以下检查以禁用我的客户网站上针对Facebook僵尸程序的webp图像：

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

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

Answer 4

就我而言，我使用的是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">
}