提升圖片傳送效能

發布日期：2025 年 10 月 8 日

縮短圖片下載時間，可縮減使用者感知的網頁載入時間，並提升 LCP 指標的表現。

深入分析失敗的原因

洞察資料會醒目顯示下載大小不必要的圖片。系統會比較圖片的下載大小與圖片格式的有效位元組/像素比例，計算出預估節省的位元組數。

開發人員工具的「提升圖片傳送效能」洞察
開發人員工具改善圖片傳送深入分析

如何縮短圖片下載時間

這項洞察資料會根據圖片的顯示大小和檔案格式，建議幾種策略來縮短圖片下載時間。部署圖片 CDN 對於上述所有策略都非常有幫助。

提高圖片壓縮係數

大多數圖片格式都支援壓縮等級，可調整壓縮等級來縮減圖片檔案大小，但圖片品質會因此降低。您可以使用 ImageOptim、Squoosh 和 Imagemin 等圖片工具，調整圖片壓縮率。

使用新式圖片格式

AVIF 和 WebP 圖片格式的壓縮和品質特性，都優於舊版 JPEG 和 PNG。以這些新格式編碼圖片，是縮減圖片下載大小的好策略。

各大瀏覽器的最新版本都支援 AVIF，而且與其他格式相比，在相同品質設定下，AVIF 的檔案大小較小。如要進一步瞭解 AVIF，請參閱提供 AVIF 圖片程式碼研究室。

所有主要瀏覽器都支援 WebP，且這種格式可對網路圖片提供更出色的有損和無損壓縮檔案。如要進一步瞭解 WebP，請參閱「使用 WebP 圖片」。

使用影片格式的動畫內容

與影片相比，使用大型 GIF 檔案呈現動畫內容會降低網路傳輸效率。建議你改用 MPEG4/WebM 影片格式呈現動畫內容，或是使用 PNG/WebP 格式顯示靜態圖片，以減少網路傳輸的資料量。

如要瞭解如何以影片取代 GIF 圖片，請參閱「以影片取代 GIF 動畫，加快網頁載入速度」。

提供可自動調整大小的圖片

理想情況下，網頁放送的圖片不應大於使用者螢幕上顯示的版本。如果超過這個大小，只會浪費位元組，並減緩網頁載入時間。

其中一種策略是使用向量圖片格式，例如 SVG。可縮放向量圖形檔的程式碼有限，但可縮放至任何大小。詳情請參閱「以 SVG 取代複雜圖示」。

如果無法使用向量圖片，最好提供「回應式」圖片。使用回應式圖片時，您需要為每張圖片產生多個版本，然後使用媒體查詢、檢視區塊尺寸等，在 HTML 或 CSS 中指定要使用的版本。

舉例來說，<img> 元素具有 srcset 和 sizes 屬性，可指定不同大小的圖片網址：

如要完全變更圖片，可以使用 &lt;picture> 元素：

詳情請參閱「回應式圖片」和「圖片元素」。

堆疊專屬指南

這項洞察資料也會針對使用下列技術的網頁，提供堆疊專屬的指引：

AMP

  • 建議你以 WebP 格式顯示所有 amp-img 元件，同時為其他瀏覽器指定適當的備用格式。
  • 你可以對動畫內容使用 amp-anim，這樣一來，畫面外的內容即會盡量節省 CPU 用量。

Drupal

  • 建議你使用可自動最佳化及縮減透過網站上傳的圖片大小，並且不會影響畫質的模組。
  • 請確保網站上所有經轉譯的圖片都使用 Drupal 內建的回應式圖片樣式。

Joomla

建議使用能自動將已上傳圖片轉換為最佳格式的外掛程式或服務。

Magento

建議使用可最佳化圖片的第三方 Magento 擴充功能。

WordPress

建議你使用壓縮圖片時不會影響到畫質的圖片最佳化 WordPress 外掛程式。

資源