目錄
一、圖片優化
1、圖片選擇
| 格式 | 使用場景 | 壓縮插件 |
| JPEG | 顏色豐富的圖，不支持透明度，適合圖片展示。 | jpegtran |
| PNG | 體積較大、但是支持透明度，適合邊緣清晰，純色或者大塊相同顏色，例如背景圖片 | jdf-png-native || node-pngquant-native |
| GIF | 每個像素只有8bit，不適合色彩豐富的圖，但是可做動效。 | gifsicle |
| Webp | 不適合色彩比較豐富的圖像，適合圖形額半透明圖像（谷歌瀏覽器） |
2、圖片轉base64
將圖片轉成base64，隨着html或者css請求到本地，減少一些http請求。
3、雪碧圖 && Web Font
雪碧圖：將一些小的圖標合在一張圖片上 使用偏移來獲取圖標，減少請求。
Web Font：css 僞元素 ::before ::after自定義生成圖標。
4、圖片延遲加載
1）使用統一佔位符、低質量的佔位符（可使用lqip、sqip插件生成）、holder.js佔位等，等真實的圖片加載後，再替換掉佔位符（可使用lazyload插件）
2）佔位後懶加載、可視範圍再加載
5、縮略圖 && 響應式圖像
縮略圖：根據不同的網絡環境請求不同大小的圖片，可以通過url傳遞不同的參數來實現
響應式圖像：根據窗口尺寸來顯示不同尺寸的圖片，實現如下
1）CSS3 @media
2）img的scrset sizes參數
3）<picture>標籤
4）js控制
二、HTML結構優化
三、CSS、js優化
四、網絡和服務端優化
