🗜️
← 返回教學列表

網頁圖片壓縮最佳實踐

· 標籤: image-compression, best-practices, web-performance, quality-vs-size, seo

網頁圖片壓縮最佳實踐

圖片佔據了典型網頁上一半以上的資料。每個未最佳化的千位元組都會讓你付出載入時間變慢、跳出率提高和搜尋排名降低的代價。本指南涵蓋了專業網頁開發者用來在每種螢幕尺寸上提供清晰、快速載入圖片的最佳實踐。

1. 始終保留主副本

在套用任何壓縮之前，請儲存原始圖片的未壓縮主副本。主副本讓你可以自由地嘗試不同的品質等級，並在日後重新壓縮，而無需從頭開始。將主副本以無損格式（如 PNG 或 TIFF）儲存，然後壓縮副本用於生產環境。

2. 了解品質設定

壓縮品質通常以 0（最差）到 100（最佳）的尺度來衡量。最佳設定取決於你的圖片內容和效能目標。

JPEG 品質指南：

  • 80 到 85：對大多數網頁照片來說效果極佳。瑕疵幾乎無法察覺。
  • 60 到 75：適合縮圖和背景圖片。會出現一些壓縮瑕疵。
  • 低於 60：可察覺的塊狀感和條帶現象。僅在檔案大小是絕對優先時使用。

WebP 品質指南：

  • 75 到 85：以約小 25% 到 35% 的檔案大小，與 JPEG 品質相匹配。
  • 無損 WebP：非常適合需要逐像素精確輸出的圖形和螢幕截圖。

PNG 壓縮：

  • PNG 僅使用無損壓縮。位元深度降低（將 32 位元轉換為 8 位元色彩）是縮小純色圖形 PNG 而不造成可見品質損失的最有效方法。

AVIF 品質指南：

  • 50 到 70：產生的檔案比 JPEG 最多小 50%，且視覺品質相當。
  • 較高的編碼複雜度意味著壓縮速度較慢，但檔案大小的回報非常顯著。

3. 將壓縮與圖片內容匹配

並非每張圖片對壓縮的反應都相同。根據內容類型調整你的方法：

  • 照片： 有損壓縮（JPEG、WebP、AVIF）效果最佳。從品質 80 開始，向下調整直到找到可接受的閾值。
  • 螢幕截圖和 UI 模型圖： 無損壓縮（PNG、無損 WebP）保留清晰的文字和銳利的邊緣。這些圖片包含大面積的均勻區域，壓縮效率非常高。
  • 標誌和圖示： 無損格式保持類似向量的銳利度。如果原始圖片顏色較少，使用降低色彩深度的 PNG 可以非常小。
  • 產品照片： 品質 75 到 85 是最佳平衡點。與原始圖片的視覺差異幾乎看不見，但檔案大小的節省非常顯著。

4. 移除隱藏的中繼資料

數位相機和設計軟體會將稱為 EXIF 資料的中繼資料嵌入圖片檔案中。這可能包括相機型號、GPS 座標、時間戳和色彩設定檔資訊。移除中繼資料可以將檔案大小減少 5% 到 15%，且完全沒有視覺影響。

大多數壓縮工具都提供自動移除中繼資料的選項。除非你有特定理由需要保留版權或色彩設定檔資訊，否則請啟用它。

5. 以原始格式壓縮

現代圖片壓縮器允許你在保留原始格式的同時最佳化圖片。這是一個重要的能力，因為格式轉換通常是不必要且有時是不理想的：

  • PNG 保持為 PNG： 無損壓縮保留透明度和銳利邊緣。
  • JPEG 保持為 JPEG： 最佳化的霍夫曼表和量化提供更小的檔案，而無需重新編碼損失。
  • WebP 保持為 WebP： 有損和無損 WebP 都受惠於中繼資料移除和最佳化的編碼參數。
  • AVIF 保持為 AVIF： 進階壓縮調整可以進一步縮小已經很高效的 AVIF 檔案。

原地壓縮意味著你永遠不會透過格式轉換鏈降低品質，且你的工作流程保持簡單。

6. 自動化你的壓縮工作流程

手動壓縮無法擴展到超過少量圖片。對於生產網站，請將壓縮整合到你的建置流程中：

  • 建置時外掛程式： sharp、Squoosh CLI 和 imagemin 等工具可以在你的建置步驟期間執行。
  • CMS 自動化： 許多內容管理系統提供在上傳時壓縮圖片的外掛程式。
  • CI/CD 整合： 在你的部署流程中新增一個壓縮步驟，讓每張圖片在上線前自動最佳化。

7. 更積極地壓縮縮圖

縮圖和預覽圖片以較小尺寸觀看，因此壓縮瑕疵更不明顯。套用較低的品質設定：

  • JPEG 縮圖：品質 50 到 60
  • WebP 縮圖：品質 50 到 70
  • PNG 縮圖：如果圖片允許，降低到 8 位元色彩

8. 將壓縮與延遲載入結合

壓縮減少了每張圖片的大小，但延遲載入確保圖片僅在進入視窗時才下載。這種組合是可用的影響最大的效能最佳化之一。在你的 img 標籤中加入 loading="lazy"，讓瀏覽器處理其餘部分。

9. 使用真實世界指標進行測試

依靠視覺猜測並不可靠。使用客觀工具來衡量你的壓縮選擇的影響：

  • Lighthouse 報告圖片最佳化的機會並估算潛在的節省效果。
  • PageSpeed Insights 顯示圖片重量如何影響你的 Core Web Vitals 分數。
  • WebPageTest 提供每個圖片請求的瀑布圖，包括 Time to First Byte 和下載持續時間。
  • Squoosh 讓你在確定設定之前，並排預覽壓縮輸出與原始圖片。

融會貫通

一個現代的圖片最佳化工作流程如下所示：

  1. 儲存未壓縮的主副本。
  2. 在壓縮期間移除中繼資料。
  3. 以原始格式壓縮——不進行不必要的轉換。
  4. 為不同的視窗提供適當尺寸的版本。
  5. 在非關鍵圖片上啟用延遲載入。
  6. 測量效能並迭代。

立即使用我們的免費線上圖片壓縮工具開始應用這些最佳實踐。上傳你的圖片並在幾秒鐘內下載最佳化版本——所有操作都在保持原始格式不變的情況下完成。