「存儲為 Web 所用格式」是一門平衡藝術：在文件體積與圖像品質間尋找最佳平衡點。本文系統梳理格式特性、壓縮原理與 Photoshop 導出實操。

核心概念：無損 vs 有損壓縮

• 無損：GIF、PNG、TIFF。像素數據完全保留，適合線條銳利、文字清晰、需透明背景的圖形。
• 有損：JPEG。犧牲不可視細節換取極高壓縮率，適合照片、複雜漸變、大面積連續色調圖像。

Photoshop「存儲為 Web 格式」面板詳解

快捷鍵 Ctrl+Alt+Shift+S。面板提供預設（JPEG 低/中/高、GIF、PNG-8/24）、品質滑塊、優化選項、預覽窗口（原圖/優化後/2-up/4-up 對比）、文件大小預估、元數據保留等。

格式選擇決策指南

1. JPEG：照片首選

聯合圖像專家小組制定，壓縮效率極高。同一張 250KB 原圖，JPEG 中/高質量預設可壓至 30KB 以內，肉眼幾乎無差：

2. GIF：限色圖形/動畫首選

• 僅 256 色調色板，適合純色塊、圖標、簡單插圖。
• 支持單像素透明（不支持半透明）。
• 同尺寸下，無損 GIF 比 JPEG 更接近原圖，但受限於 256 色，照片會出現色帶：

3. PNG：現代無損王者

• PNG-8：類似 GIF，256 色，壓縮率通常優於 GIF。
• PNG-24：真彩色（1600 萬色）+ Alpha 通道半透明，無損品質。
• 銳利線條、文字、UI 切圖、需半透明的素材 → 首選 PNG-24。
• 缺點：照片體積遠大於 JPEG；早期瀏覽器兼容性稍弱（現已無障礙）。

實戰建議

1. 照片類 → JPEG 高/極高質量（60-80），開啟「優化」與「轉換為 sRGB」。
2. 圖標/按鈕/插圖（少色、銳利邊緣）→ PNG-8 或 PNG-24（需半透明）。
3. 簡單動畫 → GIF（或 APNG/WebP 現代替代）。
4. 必須原質傳輸（如設計稿交接、印刷源文件）→ PNG-24 或 TIFF。
5. 始終啟用「2-up」或「4-up」對比預覽，肉眼確認臨界品質點。

掌握格式特性與導出參數，讓你的網頁圖片既快又美。