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