用工具進(jìn)行圖片壓縮
- 壓縮PNG
工具：node-pngquant-native
優(yōu)點(diǎn)：跨平臺(tái)衩匣，壓縮比高蕾总，特別適合壓縮png24 - 壓縮JPG
工具：jpegtran
有點(diǎn)：跨平臺(tái)，有l(wèi)inux琅捏、windows和Mac的解決方案 - 壓縮gif
工具：Gifsicle
通過(guò)改變每幀比例生百，減少gif文件大小，同時(shí)可以使用透明來(lái)達(dá)到更小的文件大小柄延，是目前公認(rèn)的最優(yōu)解決方案蚀浆。
優(yōu)化圖片的另一個(gè)思路
讓圖片的尺寸隨著網(wǎng)絡(luò)的變化而變化
簡(jiǎn)而言之就是在不同的網(wǎng)絡(luò)環(huán)境（Wi-Fi/4G/3G）下，加載不同尺寸和像素的圖片，通過(guò)在圖片URL后綴加不同參數(shù)而改變加載的圖片的尺寸杠输。
響應(yīng)式圖片
根據(jù)用戶的設(shè)備的尺寸和像素大小來(lái)展示不同尺寸的圖片。
- 利用JavaScript綁定事件秕衙，檢測(cè)窗口大小實(shí)現(xiàn)加載不同尺寸的圖片
- css的媒體查詢
@media screen and(max-width:640px){
...
}
- img標(biāo)簽屬性（html5的srcset）不支持的話默認(rèn)展示src的圖像
<img srcset="img-320w.jpg, img-640w.jpg 2x, img-960w.jpg 3x" src ="img-960w.jpg" alt="img">
x表示圖像的設(shè)備像素比
逐步加載圖片，增強(qiáng)用戶體驗(yàn)
方法1: 使用統(tǒng)一的占位符据忘，在每一張圖片后面加logo等方式，在用戶沒(méi)看到圖像之前先占位
方法2: 使用LQIP
- 低質(zhì)量圖像占位符（Low Quality Image Placeholders）
- 安裝：npm install lqip
const lqip = require('lqip')
const file = './in.png';
// image
lqip.base64(file).then(res => {
console.log(res);
})
// color 拿到關(guān)鍵色值
lqip.palette(file).then(res => {
console.log(res);
})
方法3：SQIP
- 基于SVG的圖像占位符（SVG Quality Image Placeholders)
- 安裝：npm install sqip
const sqip = require('sqip');
const result = sqip({
filename: './in.png',
numberOfPrimitives: 10,// 效果值
});
console.log(result.final_svg);
替代圖片
有些場(chǎng)景是不需要圖片的曼追。
- 用web font代替圖片
- 使用data uri代替圖片（base 64），把base64代碼用css文件的形式緩存到本地礼殊，這樣用戶就不用再請(qǐng)求圖片內(nèi)容
- 采用Image spirting （雪碧圖）
