當 PageSpeed Insights 偵測到網頁上的圖片可供最佳化調整,以縮減檔案大小,且不會大幅影響視覺品質,就會觸發這個規則。
總覽
圖片通常佔了網頁上大部分下載的位元組。因此,將圖片最佳化通常可以節省大容量的位元組,並提升效能:瀏覽器必須下載的位元組越少,用戶端頻寬的競爭就越少,瀏覽器下載並轉譯內容的速度也就越快。
建議
想為圖片素材資源找出理想的格式和最佳化策略時,您需要仔細分析許多維度,包括編碼的資料類型、圖片格式功能、品質設定、解析度等等。此外,您也需要考量某些圖片是否最適合以向量格式呈現、可以透過 CSS 達到想要的效果,以及如何為每種裝置類型提供適當調整過的素材資源。
最佳化所有圖片類型
GIF、PNG 和 JPEG 圖片最佳化
使用 GIF、PNG 和 JPEG 格式,佔了整個網際網路圖片的 96% 流量。由於 PageSpeed Insights 的熱門程度很高,因此會提供具體的最佳化建議。為了方便起見,您可以直接從 PageSpeed Insights (使用 modpagespeed.com 的圖片最佳化程式庫) 下載最佳化圖片,十分方便。
您也可以使用 ImageMagick 產生的 convert 二進位檔等工具套用類似的最佳化效果,請參閱下方操作說明。
請注意,如果您使用第三方工具,由於圖片已經過最佳化調整,轉換可能會使圖片變大。如果發生這種情況,請使用你原本的文件。
GIF 和 PNG 是無損格式,因此壓縮程序不會對圖片進行任何視覺修改。就靜態圖片而言,PNG 能夠改善壓縮比例,並提升視覺品質。針對動畫圖片,請考慮使用 video
元素而非 GIF,以改善壓縮效果。
- 除非原始檔案為動畫或小 (不到數百個位元組),否則一律將 GIF 轉換成 PNG 格式。
- 針對 GIF 和 PNG 來說,如果所有像素都不透明,請移除 Alpha 管道。
舉例來說,您可以透過下列指令,使用轉換二進位值將 GIF 和 PNG 圖片最佳化 (括號內的參數為選用項目):
convert INPUT.gif_or_png -strip [-resize WxH] [-alpha Remove] OUTPUT.png
![cuppa.png](https://developers.google.cn/static/speed/docs/insights/images/cuppa.png?authuser=8&hl=zh-tw)
convert cuppa.png -strip cuppa_converted.png
![cuppa_converted.png](https://developers.google.cn/static/speed/docs/insights/images/cuppa_converted.png?authuser=8&hl=zh-tw)
JPEG 是有損格式。壓縮程序會移除圖片的細節,但壓縮比例可能比 GIF 或 PNG 多 10 倍。
- 如果品質較高,請將畫質降低至 85。畫質超過 85 時,圖片會變大,但視覺改善幅度較小。
- 將色彩取樣率降低至 4:2:0,因為與亮度相比,人類視覺系統對顏色的敏感度較低。
- 針對超過 1 萬位元組的圖片,使用漸進式格式。漸進式 JPEG 的壓縮比例通常比大型圖片基準 JPEG 高,擁有漸進式算繪的優點。
- 如果圖片為黑白,請使用灰階色彩空間。
舉例來說,您可以使用下列指令,使用轉換二進位值來最佳化 JPEG 圖片 (方括號內的參數為選用項目):
convert INPUT.jpg -sampling-factor 4:2:0 -strip [-resize WxH] [-quality N] [-interlace JPEG] [-colorspace Gray/sRGB] OUTPUT.jpg
![puzzle.jpg](https://developers.google.cn/static/speed/docs/insights/images/puzzle.jpg?authuser=8&hl=zh-tw)
convert puzzle.jpg -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace sRGB puzzle_converted.jpg
![puzzle_converted.jpg](https://developers.google.cn/static/speed/docs/insights/images/puzzle_converted.jpg?authuser=8&hl=zh-tw)
意見回饋
本頁內容對你是否有幫助?