WebP是Google在2010年發(fā)布的一種新型圖片格式,支持無損和有損壓縮。在無損壓縮方面,同質(zhì)量的WebP圖片比PNG的體積小26%,而在有損壓縮方面,同質(zhì)量的WebP圖片比JPEG小25-34%。WebP在不降低圖片質(zhì)量的同時(shí),減少了約三分之一的體積。
這里為您提供的是一款webp圖片轉(zhuǎn)換器(騰訊智圖webp圖片轉(zhuǎn)換器),使用非常簡單,只要將圖片拖到軟件里面就可以自動(dòng)為您轉(zhuǎn)換了。
WebP使用方案
判斷是否支持WebP
PC端,觸屏版:
前端JS方案——利用img標(biāo)簽加載一張base64的WebP圖片,在img標(biāo)簽的onload事件中判斷該圖片是否具有寬高的屬性,若有表示支持webP,若沒有表示不支持webP。后臺(tái)判斷方案——判斷瀏覽器請(qǐng)求頭Accept是否支持WebP,返回是否支持的標(biāo)示給前臺(tái)。
以上兩種方案中,前端方案為佳,當(dāng)JS被禁止的時(shí)候,可以使用后臺(tái)判斷方式執(zhí)行判斷。附上JS代碼截圖
iOS獨(dú)立版:
用戶直接拉取WebP格式的圖片(如果CDN有存儲(chǔ)),下載完成后在前端實(shí)時(shí)轉(zhuǎn)碼(前端開發(fā)的WebP sdk),將WebP圖片轉(zhuǎn)換為jpg或png圖片。展示給用戶的是普通圖片。
這樣做的好處在于下載WebP的時(shí)候節(jié)省了帶寬,雖然在轉(zhuǎn)碼的時(shí)候會(huì)耗時(shí),但是由于下載時(shí)間縮短中和了轉(zhuǎn)碼的時(shí)間,所以用戶基本感覺不出來差別。我們?cè)诓谎娱L用戶等待時(shí)間的同時(shí)縮小圖片體積,節(jié)省了帶寬。
安卓獨(dú)立版:
后臺(tái)判斷用戶機(jī)器系統(tǒng),當(dāng)系統(tǒng)版本大于4.0的時(shí)候返回支持WebP標(biāo)示(因?yàn)槠湓С郑岸死D片時(shí)后臺(tái)會(huì)根據(jù)這個(gè)標(biāo)示決定使用原格式圖片還是WebP格式的圖片。
兼容方案
對(duì)于不支持WebP的瀏覽器,可根據(jù)是否支持WebP的判斷來拉取jpg或者png圖片,也可以使用flash作為載體來加載WebP圖片(空間相冊(cè)兼容低端瀏覽器方案) 。
關(guān)于用戶下載圖片
PC和webview方案中,用戶若想將圖片另存為本地(可能本地不支持WebP預(yù)覽展示),可在用戶右擊“另存為”的時(shí)候,綁定右擊事件,加載當(dāng)前WebP圖片對(duì)應(yīng)的jpg圖片,然后直接下載jpg圖片(空間相冊(cè)方案) 。
雖然這樣的做法會(huì)導(dǎo)致多加載一張圖片,但是由于只在右擊時(shí)候觸發(fā)加載,而且用戶右擊“另存為”的行為較少,消耗可不計(jì)。
- PC官方版
- 安卓官方手機(jī)版
- IOS官方手機(jī)版