圖片通常佔網頁總傳輸量的 50–70%，是影響載入速度最直接的因素。壓縮圖片不代表一定要犧牲畫質——只要了解壓縮原理、選對格式、調整正確的品質參數，多數情況下人眼幾乎感受不到差異，但檔案大小可以縮減 60–80%。
一、有損壓縮 vs 無損壓縮：原理與取捨
圖片壓縮分為兩大類，選擇哪一種取決於圖片的用途：
| 類型 | 原理 | 代表格式 | 適用場景 |
|---|---|---|---|
| 有損壓縮 | 捨棄人眼不易察覺的高頻細節，壓縮後無法完全還原 | JPEG、WebP（有損模式）、AVIF | 照片、寫實風格插圖、社群媒體 |
| 無損壓縮 | 找出資料中的重複模式並編碼，壓縮後可完全還原 | PNG、WebP（無損模式）、GIF | 截圖、Logo、圖示、需要精確顏色的設計稿 |
常見誤解：「PNG 一定比 JPEG 品質好」。品質和格式無關，和壓縮類型有關。PNG 是無損格式，適合截圖和圖示；JPEG 是有損格式，適合照片。把照片存成 PNG 不會讓它更清晰，只會讓檔案更大。
二、品質參數（Quality）到底代表什麼？
JPEG 和 WebP 有損模式都有一個 0–100 的品質參數。這個數字並非線性，而是對應不同程度的細節捨棄量：
- 85–95：與原始圖片幾乎無差異，適合需要印刷或放大的場合，但檔案較大
- 75–85：網頁照片的黃金範圍，人眼幾乎察覺不到差異，檔案大小可縮減 40–60%
- 60–75：縮圖、社群媒體圖片可接受的範圍，在小尺寸顯示時效果仍不錯
- 低於 60：壓縮痕跡（artifact）開始明顯，只適合極低頻寬的特殊場合
一個實用的工作流程：從 80 開始，放大到 100% 檢視是否出現明顯色塊或模糊邊緣，若沒有則繼續降低，找到「剛好看不出壓縮痕跡」的最低值。
三、WebP：現代網頁的首選格式
WebP 是 Google 在 2010 年推出的圖片格式，目前主流瀏覽器（Chrome、Firefox、Safari 14+、Edge）均已支援。與傳統格式相比：
| 比較項目 | JPEG | PNG | WebP |
|---|---|---|---|
| 有損壓縮 | 支援 | 不支援 | 支援，同品質比 JPEG 小 25–35% |
| 無損壓縮 | 不支援 | 支援 | 支援，比 PNG 小 26% 左右 |
| 透明度（Alpha） | 不支援 | 支援 | 支援 |
| 動畫 | 不支援 | 有限（APNG） | 支援 |
| 瀏覽器支援 | 所有瀏覽器 | 所有瀏覽器 | 主流瀏覽器（IE 不支援） |
如果你的使用者不需要支援 IE（Internet Explorer 已於 2022 年終止支援），WebP 是照片和插圖的最佳選擇。需要支援透明背景但又想要更小的檔案？WebP 無損模式是 PNG 的直接替代品。
四、不同場景的最佳格式選擇
照片（風景、人物、產品）
首選 WebP 有損模式（品質 75–85），後備 JPEG（品質 80–85）。不要用 PNG——檔案會大好幾倍，且有損壓縮的品質已足夠。
Logo、圖示、截圖
首選 WebP 無損模式或 SVG（向量圖），後備 PNG。不要用 JPEG——銳利邊緣和文字在 JPEG 有損壓縮下會產生明顯的模糊和色塊。
帶透明背景的圖片
首選 WebP（支援透明），後備 PNG。JPEG 不支援透明背景，存成 JPEG 後透明區域會變成白色或黑色。
動畫
WebP 動畫比 GIF 小 64%（有損）至 19%（無損）。如果場景允許，優先考慮 CSS 動畫或短視頻（MP4），效能通常更好。
五、響應式圖片：不同裝置顯示不同尺寸
除了壓縮，另一個常被忽略的優化是「解析度適配」。在手機上顯示一張 2400×1600 的圖片是一種浪費——手機螢幕通常只顯示 400px 寬，下載一張比顯示尺寸大 6 倍的圖片是多餘的流量消耗。
HTML 的 srcset 屬性可以讓瀏覽器根據螢幕尺寸和解析度自動選擇最合適的圖片：
<img
src="photo-800.webp"
srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1600.webp 1600w"
sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1600px"
alt="描述文字"
>
這樣設定後，在手機上瀏覽的使用者只下載 400px 版本，桌機使用者才下載 1600px 版本，在頻寬和畫質間取得最佳平衡。
六、圖片壓縮與 PDF 中的圖片
PDF 檔案過大，很多時候是因為裡面的圖片沒有壓縮。PDF 格式本身就支援 JPEG 壓縮的圖片資料流，現代的 PDF 工具在「壓縮 PDF」時，實際上主要是在壓縮其中嵌入的圖片。
如果需要在 PDF 中嵌入高品質圖片，建議先將圖片壓縮到合適的品質（75–85），再嵌入 PDF，而不是嵌入原始大圖後再依賴 PDF 工具壓縮——後者的壓縮效果通常不如預期，且可能進一步降低畫質。
七、用校驗碼確認圖片完整性
在批次轉換或壓縮大量圖片後，有時需要確認轉換是否成功、檔案是否損毀。計算原始圖片和壓縮後圖片的 MD5 或 SHA 校驗碼，可以快速確認兩個檔案是否完全相同（無損壓縮）或確認特定版本的檔案沒有被意外修改。
總結
- 有損壓縮（JPEG、WebP）適合照片；無損壓縮（PNG、WebP 無損）適合截圖、Logo、圖示
- JPEG/WebP 品質參數建議從 80 開始調整，找到「看不出壓縮痕跡」的最低值
- WebP 是現代網頁的最佳選擇：同畫質比 JPEG 小 25–35%，且支援透明和動畫
- 響應式圖片（srcset）確保不同裝置只下載適合自己解析度的圖片版本
- 嵌入 PDF 前先壓縮圖片，效果比事後再壓縮 PDF 更可控