如何檢測支持WebP的瀏覽器以及如何爲他們提供WebP圖片？

我們希望將WebP圖片提供給支持WebP的瀏覽器，讓WebP圖片驚人地縮小尺寸（比「pngcrushed」PNG縮小約28％）。如何檢測支持WebP的瀏覽器以及如何爲他們提供WebP圖片？

如何從Java webapp服務器檢測客戶端的瀏覽器是否支持WebP？

還有的是一個問題在這裏瞭解如何從JavaScript做到這一點：

但我想知道如何從Java做。如果用Java來做就意味着在客戶端調用JavaScript，那麼我想知道如何去做。

2011-11-18 Cedric Martin

您無法單獨使用Java來確定Web瀏覽器功能。 Java/JSP在web服務器中運行，而不是在webbrowser中運行。你真的需要爲此使用JavaScript。您可以使用您已經在相關問題中找到的代碼。最簡單的做法是讓JS檢查頁面加載，如果沒有一些cookie存在，表明瀏覽器支持WebP，然後進行相應的功能檢測，最後通過document.cookie設置一個長生存Cookie並重新加載頁面location.reload()。

在服務器端，您只需在發送/設置適當的圖像URL之前，檢查JSP中的HttpServletRequest#getCookies()或JSP中的${cookie}是否存在cookie和/或其值。

除了設置cookie之外，您始終可以讓JS發送數據作爲ajax請求的請求參數，但這意味着您必須對每個請求或會話執行此操作。

來源

2011-11-18 17:43:41 BalusC

+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。

來源

2012-08-08 14:00:47

看起來像是鏈接到 – Greg

頁面上的更新src感謝Greg - 已更新代碼 –

如何檢測支持WebP的瀏覽器以及如何爲他們提供WebP圖片？

回答

相關問題