網店圖片處理(網店圖片處理教程)

WebP是什么？

WebP 是一種同時提供了有損壓縮與無損壓縮的圖片文件格式。可以大大壓縮圖片的大小，并且圖片的質量和 png、jpeg 等相同。WebP 的無損壓縮比 png 格式的文件平均少了 45％ 的大小。

這里是使用了同一張圖片轉換為不同格式的圖片后，對圖片的大小進行對比的測試結果：

格式

webp

jpeg

png

gif

大小

1.65MB

2.24MB

7.51MB

4.64MB

使用 webp 壓縮后圖片大小減少百分比

↓ 26%

↓ 78%

↓ 64%

兼容性

目前大約 95.77% 的瀏覽器都支持 WebP 格式的圖片，其中 Safari 瀏覽器僅在 Big Sur 及以上的macOS 系統才支持 WebP；針對不兼容的情況下，我們需要進行相應的降級措施。

降級處理原則

判斷瀏覽器是否支持 webp 格式的圖片支持，展示 webp 格式的圖片不支持，使用圖片原始格式進行展示

降級處理方式

JS 處理 /** * 判斷瀏覽器是否支持 webp */ // 方法1: 通過嘗試加載一張 webp 格式的圖片來判斷 function isSupportWebp() { const imgUrl = 'https://img.alicdn.com/imgextra/i2/O1CN01uvFm6B1XMMrTkObKV_!!6000000002909-0-tps-520-280.jpg_q75_.webp'; const image = new Image(); image.src = imgUrl; image.onload = function() { // 加載成功，說明支持 webp return true; } image.onerror = function() { // 加載失敗，說明不支持 webp return fal; } } // 方法2: 通過判斷 HTMLCanvasElement.toDataURL() 返回的 dataURI 來判斷 function isSupportWebp() { const str = document.createElement('canvas').toDataURL('image/webp'); // 如果支持則會返回傳入的類型 image/webp --> data:image/webp;ba64,UklGRtgCAABXRUJQVlA4WAoAAAAwAAAAKwEAlQAASUNDUBgCAAAAAAIYAAAAAAQwAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAAHRyWFlaAAABZAAAABRnWFlaAAABeAAAABRiWFlaAAABjAAAABRyVFJDAAABoAAAAChnVFJDAAABoAAAAChiVFJDAAABoAAAACh3dHB0AAAByAAAABRjcHJ0AAAB3AAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAFgAAAAcAHMAUgBHAEIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFhZWiAAAAAAAABvogAAOPUAAAOQWFlaIAAAAAAAAGKZAAC3hQAAGNpYWVogAAAAAAAAJKAAAA+EAAC2z3BhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABYWVogAAAAAAAA9tYAAQAAAADTLW1sdWMAAAAAAAAAAQAAAAxlblVTAAAAIAAAABwARwBvAG8AZwBsAGUAIABJAG4AYwAuACAAMgAwADEANkFMUEgSAAAAAQcQEREQkCT+/x9F9D/tf0MAVlA4IIAAAABwDQCdASosAZYAPm02mUmkIyKhICgAgA2JaW7hdrEbQAnsA99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfasAAD+/9YAAAAAAAAAAA== // 如果不支持則會返回默認值 image/png --> data:image/png;ba64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADGSURBVHhe7cExAQAAAMKg9U9tCF8gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAONUAv9QAAcDhjokAAAAASUVORK5CYII return str.indexOf('image/webp') > -1; } /** * 選擇瀏覽器支持的圖片格式 */ function getImg(compresdImg, originalImg) { const isSupport = isSupportWeb(); return isSupport ? compresdImg : originalImg; } ``` 復制代碼HTML 處理：<picture> 元素 利用瀏覽器會選擇 <picture> 元素中最匹配的子 <source> 元素，如果沒有匹配的，就選擇 <img> 元素的 src 屬性中的 URL 這一特點。如果瀏覽器支持 image/webp 類型的圖片，則加載 <source> 元素中 srct 屬性指向的資源，如果不支持則跳過 <source> 元素，加載 <img> 元素。<picture> <source type="image/webp" srct="https://img.alicdn.com/imgextra/i2/O1CN01uvFm6B1XMMrTkObKV_!!6000000002909-0-tps-520-280.jpg_q75_.webp" /> <img src="https://img.alicdn.com/imgextra/i2/O1CN01uvFm6B1XMMrTkObKV_!!6000000002909-0-tps-520-280.jpg_q75.jpg"> </picture> 復制代碼

降級處理示例

拿淘寶首頁舉個例子

圖片 URL：img.alicdn.com/imgextra/i2…

在 chrome 中加載的是 webp 格式的圖片：

在 IE 中加載的則是 jpg 格式的圖片：

可以看出淘寶是對圖片的 URL 進行了特殊處理，通過在原始圖片后加上 _.webp 后綴來做降級處理，如果當前瀏覽器支持 webp 格式的圖片，則加載 webp 格式的圖片，若不支持則去掉 _.webp 的后綴加載 jpg 格式的圖片。

最后

如果你覺得此文對你有一丁點幫助，點個贊。或者可以加入我的開發交流群：1025263163相互學習，我們會有專業的技術答疑解惑

如果你覺得這篇文章對你有點用的話，麻煩請給我們的開源項目點點star: https://gitee.com/ZhongBangKeJi/CRMEB不勝感激 ！