1. 不用圖片。很多時(shí)候會使用到很多修飾類圖片,其實(shí)這類修飾圖片完全可以用 CSS 去代替。
2. 對于移動端來說,屏幕寬度就那么點(diǎn),完全沒有必要去加載原圖浪費(fèi)帶寬。一般圖片都用 CDN 加載,可以計(jì)算出適配屏幕的寬度,然后去請求相應(yīng)裁剪好的圖片。
3. 小圖使用 base64 格式
4. 將多個(gè)圖標(biāo)文件整合到一張圖片中(雪碧圖)
5. 選擇正確的圖片格式:
對于能夠顯示 WebP 格式的瀏覽器盡量使用 WebP 格式。因?yàn)?WebP 格式具有更好的圖像數(shù)據(jù)壓縮算法,能帶來更小的圖片體積,而且擁有肉眼識別無差異的圖像質(zhì)量,缺點(diǎn)就是兼容性并不好小圖使用 PNG,其實(shí)對于大部分圖標(biāo)這類圖片,完全可以使用 SVG 代替照片使用 JPEG