如何检测支持WebP的浏览器并向其提供WebP图片？

Question

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

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

这里有一个关于如何使用JavaScript进行检测的问题： 检测WebP支持 但是我想知道如何从Java中进行检测。如果从Java进行操作意味着在客户端调用JavaScript，那么我想知道如何做到这一点。

- Cedric Martin

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

更多信息点击这里

。

- James Westgate

Answer 2

您无法仅使用Java来确定浏览器功能。Java/JSP在Web服务器上运行，而不是在Web浏览器中运行。您确实需要使用JavaScript来完成此操作。您可以使用已经在相关问题中找到的代码。最简单的方法是让JS在页面加载时检查是否已经存在某些cookie，指示浏览器支持WebP，然后相应地进行特征检测，并最终通过document.cookie设置一个长期有效的cookie，然后通过location.reload()重新加载页面。

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

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

- BalusC

---

+1：该死，这正是我所担心的... 那看来事情并没有想象的那么简单。 - Cedric Martin

这现在已经过时了，不是吗？ - Jonathan Laliberte

Answer 3

以上的答案似乎有点过时了？看起来你可以检查Accept header，以查看它是否包含webp字符串...

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

- Jonathan Laliberte