什么是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的兩個插件來進行壓縮

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

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

總結

以上是生活随笔為你收集整理的如何生成WebP图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。