如何生成WebP圖片

什麼是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支持Chrome和Opera瀏覽器以及部分手機瀏覽器

Webp生成方式

在線生成

• 智圖 zhitu.isux.us/
• 又拍雲 www.upyun.com/webp
• CloudConvert cloudconvert.com/webp-to-any…
• iSparta isparta.github.io/index.html

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便可

2. 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，則只會有壓縮後原格式圖片。