檢查瀏覽器支持Webp

Vixb 發布于2019-08-21 11:24 / 2290人閱讀

摘要：什么是是一種支持有損壓縮和無損壓縮的圖片文件格式，派生自圖像編碼格式。檢查瀏覽器對的支持使用使用有損無損透明動畫

什么是Webp？

Webp 是一種支持有損壓縮和無損壓縮的圖片文件格式，派生自圖像編碼格式 VP8。根據 Google 的測試，無損壓縮后的 WebP 比 PNG 文件少了 45％的文件大小，即使這些 PNG 文件經過其他壓縮工具壓縮之后，WebP 還是可以減少 28％的文件大小，支持透明，及動畫，對提高頁面的加載速度有很大的幫助。

檢查瀏覽器對Webp的支持 使用canvas

function checkWebpSupport() {
  const canvas = document.createElement("canvas");
  if (Boolean(canvas.getContext && canvas.getContext("2d"))) {
    return canvas.toDataURL("image/webp").indexOf("data:image/webp") === 0;
  }
  return false;
}

使用Image

/**
 * lossy 有損 lossless 無損 alpha透明 animation 動畫
 */
function checkWebpFeature(feature, callback) {
  const images = {
    lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA",
    lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",
    alpha: "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==",
    animation: "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA"
    };
  const img = new Image();
  img.onload = function() {
    const result = (img.width > 0) && (img.height > 0);
    callback(feature, result);
  };
  img.onerror = function() {
    callback(feature, false);
  };
  img.src = "data:image/webp;base64," + images[feature];
}

GPU云服務器云服務器檢查瀏覽器 html5 支持檢查 webrtc支持瀏覽器 webrtc瀏覽器支持

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86661.html

<轉載>圖片流量節省60%：基于CDN的sharpP自適應圖片技術實踐

摘要：開啟驗證上傳一張新圖片，使用手安卓版本訪問已支持域名的圖片，如果請求帶了，檢查返回圖片格式是否為如果舊的圖片未按預期返回，返回了或原圖可能是結點緩存，正常天后過期回源則會返回圖片。對于圖片較多的網站，本文結合具體案例給出了如何基于CDN的sharpP自適應圖片無痛接入方案，據統計效果可在原圖基礎上節省60%-75%的流量。作者：陳忱出處：騰云閣文章目前移動端運營素材大部分依賴圖...

JerryZou 2019-06-28 10:53 評論0 收藏0
【譯】 WebP 支持：超出你想象

摘要：的支持程度實際上比你想的可能要好得多。的安卓瀏覽器從版本起開始官方支持最初發布于年月，版本起開始部分支持。安卓版從起開始支持。而且目前并無添加支持的任何打算。瀏覽器市場份額截至年月的數據顯示，占有約的市場份額，以約位居第二。本文轉載自：眾成翻譯譯者：文藺鏈接：http://www.zcfy.cc/article/862原文：https://optimus.keycdn.com/sup...

Steven 2019-08-01 15:27 評論0 收藏0
判斷瀏覽器是否支持 webp 的幾種解決方法

摘要：實現方法方法二在服務端根據請求信息判斷瀏覽器是否支持谷歌瀏覽器上請求圖片是這樣的瀏覽器請求圖片是這樣的在圖片請求發出的時候，里有，服務端可以根據里面是否有進行判斷。我們都知道，WebP 是 Google 推出的 WebP 圖片格式，它是一種支持有損壓縮和無損壓縮的圖片文件格式，根據Google測試，相同的圖片，WebP 格式的圖片均能比 PNG，JPG 格式的圖片節約不少體積，但是其...

DobbyKim 2019-08-23 17:53 評論0 收藏0