資訊專欄INFORMATION COLUMN
摘要：什么是是一種支持有損壓縮和無(wú)損壓縮的圖片文件格式，派生自圖像編碼格式。檢查瀏覽器對(duì)的支持使用使用有損無(wú)損透明動(dòng)畫(huà)
什么是Webp？
Webp 是一種支持有損壓縮和無(wú)損壓縮的圖片文件格式，派生自圖像編碼格式 VP8。根據(jù) Google 的測(cè)試，無(wú)損壓縮后的 WebP 比 PNG 文件少了 45％ 的文件大小，即使這些 PNG 文件經(jīng)過(guò)其他壓縮工具壓縮之后，WebP 還是可以減少 28％ 的文件大小，支持透明，及動(dòng)畫(huà)，對(duì)提高頁(yè)面的加載速度有很大的幫助。
檢查瀏覽器對(duì)Webp的支持 使用canvasfunction 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 無(wú)損 alpha透明 animation 動(dòng)畫(huà)
*/
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];
}
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/86661.html
摘要：開(kāi)啟驗(yàn)證上傳一張新圖片，使用手安卓版本訪問(wèn)已支持域名的圖片，如果請(qǐng)求帶了，檢查返回圖片格式是否為如果舊的圖片未按預(yù)期返回，返回了或原圖可能是結(jié)點(diǎn)緩存，正常天后過(guò)期回源則會(huì)返回圖片。 對(duì)于圖片較多的網(wǎng)站，本文結(jié)合具體案例給出了如何基于CDN的sharpP自適應(yīng)圖片無(wú)痛接入方案，據(jù)統(tǒng)計(jì)效果可在原圖基礎(chǔ)上節(jié)省60%-75%的流量。作者：陳忱 出處：騰云閣文章 目前移動(dòng)端運(yùn)營(yíng)素材大部分依賴圖...
摘要：的支持程度實(shí)際上比你想的可能要好得多。的安卓瀏覽器從版本起開(kāi)始官方支持最初發(fā)布于年月，版本起開(kāi)始部分支持。安卓版從起開(kāi)始支持。而且目前并無(wú)添加支持的任何打算。瀏覽器市場(chǎng)份額截至年月的數(shù)據(jù)顯示，占有約的市場(chǎng)份額，以約位居第二。 本文轉(zhuǎn)載自：眾成翻譯譯者：文藺鏈接：http://www.zcfy.cc/article/862原文：https://optimus.keycdn.com/sup...
摘要：實(shí)現(xiàn)方法方法二在服務(wù)端根據(jù)請(qǐng)求信息判斷瀏覽器是否支持谷歌瀏覽器上請(qǐng)求圖片是這樣的瀏覽器請(qǐng)求圖片是這樣的在圖片請(qǐng)求發(fā)出的時(shí)候，里有，服務(wù)端可以根據(jù)里面是否有進(jìn)行判斷。 我們都知道，WebP 是 Google 推出的 WebP 圖片格式，它是一種支持有損壓縮和無(wú)損壓縮的圖片文件格式，根據(jù)Google測(cè)試，相同的圖片，WebP 格式的圖片均能比 PNG，JPG 格式的圖片節(jié)約不少體積，但是其...
閱讀 3509·2023-04-26 02:31
閱讀 3662·2021-11-23 09:51
閱讀 1314·2021-11-17 09:33
閱讀 2474·2021-11-16 11:45
閱讀 2597·2021-10-11 11:12
閱讀 2444·2021-09-22 15:22
閱讀 2749·2021-09-04 16:40
閱讀 2611·2021-07-30 15:30
