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

Question

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

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

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

Detecting WebP support

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

Answer 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."); 
});

更多信息请参见此处。

Answer 2

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

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

除了设置 cookie 之外，您始终可以让 JS 将数据作为 ajax 请求的请求参数发送，但这意味着您必须在每个请求或会话中执行此操作。

Answer 3

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

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