如何检测支持 WebP 的浏览器以及如何为它们提供 WebP 图片？答案

【问题标题】：How to detect browsers supporting WebP and how to serve them WebP pictures?如何检测支持 WebP 的浏览器以及如何为它们提供 WebP 图片？
【发布时间】：2012-01-01 10:30:03
【问题描述】：

看到 WebP 图片的尺寸惊人地减小（对于无损 + alpha 图片，比“pngcrushed”PNG 小约 28%），我们希望将 WebP 图片提供给支持 WebP 的浏览器。

如何从 Java webapp 服务器检测客户端的浏览器是否支持 WebP？

这里有一个关于如何从 JavaScript 执行此操作的问题：

Detecting WebP support

但我想知道如何从 Java 中做到这一点。如果从 Java 执行意味着在客户端调用 JavaScript，那么我想知道如何做到这一点。

【问题讨论】：

标签： java jsp webp

【解决方案1】：

有一种简单的方法可以检测客户端上的 webP 支持。然后，您可以在客户端设置 cookie 并读取服务器上的值。

function testWepP(callback) {
   var webP = new Image();     
   webP.src = 'data:image/webp;base64,UklGRi4AAABXRUJQVlA4TCEAAAAvAUAAEB8wAiMw' + 
'AgSSNtse/cXjxyCCmrYNWPwmHRH9jwMA';
   webP.onload = webP.onerror = function () {
      callback(webP.height === 2);     
   }; 
};

testWebP(function(supported) {
   console.log((supported) ? "webP 0.2.0 supported!" : "webP not supported."); 
});

更多信息here。

【讨论】：

【解决方案2】：

您无法单独使用 Java 来确定 Web 浏览器的功能。 Java/JSP 在网络服务器中运行，而不是在网络浏览器中。您确实需要为此使用 JavaScript。您可以使用已在相关问题中找到的代码。您可以做的最简单的事情是让 JS 检查页面加载是否已经存在一些表明浏览器支持 WebP 的 cookie，然后相应地进行功能检测，最后通过 document.cookie 设置一个长寿 cookie 并重新加载按location.reload() 分页。

在服务器端，您只需通过 servlet 中的 HttpServletRequest#getCookies() 或 JSP 中的 ${cookie} 检查 cookie 和/或其值，然后发送/设置适当的图像 URL。

除了设置 cookie，你总是可以让 JS 将数据作为 ajax 请求的请求参数发送，但这意味着你必须在每个请求或会话上都这样做。

【讨论】：

+1：该死，这就是我所担心的......这并不像看起来那么容易。
这已经过时了吧？

【解决方案3】：

上面的答案似乎有点老了？看起来您可以检查 Accept 标头以查看它是否包含 webp 字符串...

   public boolean hasWebPSupport(HttpServletRequest req) {
        return req.getHeader("Accept").contains("image/webp");
    }

【讨论】：