關於前端中圖片的性能優化方案
- 2020 年 4 月 7 日
- 筆記
什麼是前端性能優化？
什麼是前端2-5-8原則?
所謂的「2-5-8原則」 ， 簡單說 ， 就是當用戶能夠在2秒以內得到響應時， 會感覺系統的響應很快 ；當用戶在2-5秒之間得到響應時 ， 會感覺系統的響應速度還可以 ；當用戶在5-8秒以內得到響應時 ， 會感覺系統的響應速度很慢 ， 但是還可以接受 ；而當用戶在超過8秒後仍然無法得到響應時 ， 會感覺系統糟透了 ， 或者認為系統已經失去響應 ， 而選擇離開這個Web站點 ， 或者發起第二次請求 。
如何性能優化？
優化的方式自然有很多種，今天呢，介紹一下圖片的優化方法。
圖片的文件形式以及應用場景
JPEG （Joint Photographic Experts Group）
JPEG 是一種大家最常見的圖片文件形式了。
它是一種"聯合影像專家小組是一種針對彩色照片而廣泛使用的有損壓縮圖形" .
介紹：柵格圖形。常用文件擴展名為 .jpg，也有 .jpeg、.jpe。JPEG 在互聯網上常被應用於存儲和傳輸照片。
我們一般在網路狀態不好的時候，會看到圖形從上到下一條一條線的慢慢往下載入，一般這種圖片就是JPEG 的格式的。
適用場景：色彩十分鮮艷的圖片、彩色圖、大焦點圖、banner以及結構複雜的圖形。
不適用場景：線條圖形和文字、圖形圖標，因為它的壓縮演算法不是很支援此類圖片；並且不支援透明度。
PNG（Portable Network Graphics）
攜帶型網路圖形是一種無損壓縮的點陣圖圖形格式，支援索引、灰度、RGB 三種種顏色方案以及 Alpha 通道等特性。
介紹：柵格圖形。PNG 最初是作為替代 GIF 來設計的，能夠顯示 256 色，文件比 JPEG或者 GIF 大，但是 PNG 非常好的保留了影像品質。支援 Alpha 通道的半透明和透明特性。最高支援 24 位彩色影像（PNG-24）和 8 位灰度影像（PNG-8）。
適用場景：純色、透明、線條繪圖，圖標；邊緣清晰、有大塊相同顏色區域；顏色數較少但需要半透明。
不適用場景：有網路不好的狀態載入較慢（因為是無損存儲格式）
GIF （Graphics Interchange Format）
影像互換格式是一種點陣圖圖形文件格式，以 8 位色（即 256 種顏色）重現真彩色的 影像，採用 LZW 壓縮演算法進行編碼
介紹：柵格圖形。支援 256 色；僅支援完全透明和完全不透明；如果需要比較通用的動畫，GIF 是唯一選擇。
適用場景：動畫，圖標。
不適用場景：每個像素只有 8 比特，不適合存儲彩色圖片。
Webp
Webp 是一種現代影像格式，可為影像提供無損壓縮和有損壓縮，這使得它非常靈 活。由 Google 在購買 On2 Technologies 後發展出來，以 BSD 授權條款發布。
介紹：優秀演算法能同時保證一定程式上的影像品質和比較小的體積；可以插入多幀，實現動畫效果；可以設置透明度；採用 8 位壓縮演算法。無損的 Webp 比 PNG 小 26%，有損的 Webp 比 JPEG 小 25-34％，比 GIF 有更好的動畫。
適用場景：半透明影像、圖形圖案等
不適用場景：彩色的圖片（因為最多處理256色）
好了，上面我們已經了解了各種圖片的格式，下面就讓我們來看一看優化的方案吧。
優化方案
1.使用工具進行圖片壓縮
壓縮 PNG圖片
工具：node-pngquant-native
優點：跨平台，壓縮比特別高，壓縮png24非常好。
官方文檔：https://www.npmjs.com/package/node-pngquant-native
使用node安裝：
npm install node-pngquant-native
接下來，給大家實際操作一下
壓縮JPEG圖片
工具：jpegtran
優點：同樣也是跨平台，但是壓縮的比率只有80-90%
官網：http://jpegclub.org/jpegtran/
安裝方法：npm install –g jpegtran
使用方法：
jpegtran -copy none -optimize -outfile out.jpg in.jpg
這是將'big.jpg' 變為'small.jpg'
下面讓我們來看一下示例
壓縮 GIF圖
工具：Gifsicle
通過改變每幀比例，減小 gif 文件大小，同時可以使用透明來達到更小的文件大小，目前公認的解決方案。
安裝：http://www.lcdf.org/gifsicle/
使用方式：
優化級別設置為不小於 2，1 的話基本不壓縮
gifsicle --optimize=3 -o out.gif in.gif
將透明部分截去 :
gifsicle --optimize=3 --crop-transparency -o out.gif in.gif
2.逐步載入圖片
這裡簡單介紹一下一些工具的使用方法
使用LQIP（Low Quality Image Placeholders） 工具
安裝：npm install lqip
源碼: https://github.com/zouhir/lqip-loader
在 index.js中寫入以下內容：
const lqip = require('lqip'); //將文件路徑 const file = './in.png'; //將輸入的圖片轉為base64 lqip.base64(file).then(res => { console.log(res); }); //color lqip.palette(file).then(res => { console.log(res); //這裡輸出的是base64的圖片地址 });
使用node index.js運行一下這個文件，可以輸出圖片的base64格式。
下面是原圖和經過lqip處理後的比較
使用 SQIP（SVG Quality Image Placeholders）
介紹：基於 SVG 的影像佔位符（SVG Quality Image Placeholders）
安裝：
npm install sqip
源碼：https://github.com/axe312ger/sqip
使用方法：
在 index.js中寫入以下程式碼
const sqip = require('sqip'); const result = sqip({ filename: './in.png', numberOfPrimitives: 10 //可根據不同應用場景設置大小 }); console.log(result.final_svg);
在本地執行 node index.js 後，將會輸出一串的<svg>標籤，將其直接放入HTML文件中即可。非常的方便
下面是兩個圖片的對比：
我們可以看到，這個方法的圖片會比lqip稍微清晰那麼一點點。
在實際使用中，我們經常會看到網頁會有這樣的模糊圖片效果，一般都是在網頁中先載入模糊的base64圖片或者是svg圖標圖，然後再載入高清大圖，這樣會給用戶更好的體驗。
3.響應式圖片
• JavaScript 綁定事件檢測窗口大小
• CSS 媒體查詢
@media screen and (max-width:640px) { my_image{ width:640px; } }
• img 標籤屬性
<img srcset="img-320w.jpg, img-640w.jpg 2x, img-960w.jpg 3x" src=「img-960w.jpg」 alt=「img」> （x 描述符：表示影像的設備像素
思考：我們真的需要圖片嗎？
web font 圖標代替圖片
精靈(雪碧)圖
使用DATA URL 代替圖片
SVG格式圖標
看了以上這些，你是否還會接著使用笨重繁瑣的圖片呢？
總結：以上就是關於前端靜態資源中的圖片資源的優化方案，希望大家看完以後能夠有所收穫，大家也可以動手去嘗試。
參考：極客時間《前端全鏈路性能優化》
