最佳化圖片

當 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
cuppa.png (1,763 位元組)

convert cuppa.png -strip cuppa_converted.png

cuppa_converted.png
cuppa_converted.png (856 個位元組)

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
puzzle.jpg (13,501 個位元組)

convert puzzle.jpg -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace sRGB puzzle_converted.jpg

puzzle_converted.jpg
puzzle_converted.jpg (4,599 個位元組)

意見回饋

本頁內容對你是否有幫助？