如何生成WebP圖片

EternallyMaybe發表於2019-03-01
Web

什麼是Webp圖片

WebP是一種新的圖片格式，目標是減少檔案大小但達到和JPEG格式相同的圖片質量，能夠減少網路上的請求時間。

優勢與劣勢

WebP優勢

WebP相比於JPG擁有更小的檔案尺寸、更高的質量（相比於相同大小不同格式的壓縮圖片），抽取100張商品圖片採用80%壓縮，大約能減少60%的檔案大小。

WebP劣勢

根據Google的測試，目前WebP與JPG相比較，編碼速度慢10倍，解碼速度慢1.5倍。
編碼方面，一般來說，我們可以在圖片上傳時生成一份WebP圖片或者在第一次訪問JPG圖片時生成WebP圖片，對使用者體驗的影響基本忽略不計。
解碼方面，WebP雖然會增加額外的解碼時間，但由於減少了檔案體積，縮短了載入的時間，頁面的渲染速度加快了。同時，隨著圖片數量的增多，WebP頁面載入的速度相對JPG頁面增快了。

WebP相容性

下圖為相容性情況（資料來源於caniuse.com/#search=Web…）

如何生成WebP圖片

就目前而言，WebP支援Chrome和Opera瀏覽器以及部分手機瀏覽器

Webp生成方式

線上生成

canvas生成

var canvas = document.createElement(`canvas`),
    ctx = canvas.getContext(`2d`),
    img = document.getElementById(`img`);

    var loadImg = function(url, fn) {
        var image = new Image();
        image.src = url;
        image.onload = function() {
             fn(image);
        }
    }
    loadImg(`image url`, function(image) {
        canvas.height = image.height;
        canvas.width = image.width;
        ctx.drawImage(image, 0, 0);
        img.setAttribute(`src`, canvas.toDataURL(`image/webp`));
    });
複製程式碼

gulp-WebP或gulp-imageisux

通過使用gulp的兩個外掛來進行壓縮

  1. gulp-WebP
var gulp = require(`gulp`);
var webp = require(`gulp-webp`);

gulp.task(`default`, ()=> {
    gulp.src(`./*.{png,jpg,jpeg}`)
    .pipe(webp({quality: 80}))
    .pipe(gulp.dest(`./dist`));
});
複製程式碼

有失真壓縮圖片設定webp外掛的quality引數，無失真壓縮設定lossless引數為true即可

  1. gulp-imageisux
var imageisux = require(`gulp-imageisux`);
gulp.task(`default`, ()=> {
    gulp.src(`./*.{png,jpg,jpeg}`)
    .pipe(imageisux(`/dirpath/`, enableWebp));
})
複製程式碼

API 兩個引數，dirpath目標目錄以及enableWebp是否同時匯出對應WEBP格式圖片

  • dirpath: 如果未定義，會自動生成兩個目錄：`/dest/`目錄放壓縮後圖片，`/webp/`目錄放對應的webp格式壓縮圖片。
  • enableWebp : 若為true，則會同時輸出webp圖片；若為false，則只會有壓縮後原格式圖片。

相關文章