前言：網頁圖片優化的平衡藝術

網頁圖片優化本質上是在「畫質」與「檔案大小」之間尋找平衡點。加載速度優先的場合（如首頁大圖）需犧牲部分品質；品質優先的場合（如作品集細節圖）則可容忍較大體積。本文將系統介紹 Photoshop「存儲為 Web 所用格式」功能，幫助你根據不同場景做出最佳選擇。

核心觀念：無損 vs. 有損壓縮

所有圖片格式依壓縮原理可分為兩大類：

• 無損壓縮：完全保留原始像素資料，典型格式有 GIF、PNG、TIFF。
• 有損壓縮：透過捨棄人眼不敏感的資訊換取極高壓縮率，典型格式為 JPEG。

選擇原則：照片、漸變豐富的圖像優先用 JPEG；純色、線條銳利、需透明背景的 UI 元素優先用 PNG/GIF。

實操入口與介面概覽

在 Photoshop 中選擇 檔案 → 存儲為 Web 所用格式，或按快捷鍵 Ctrl+Alt+Shift+S。彈出的對話框左側為預覽區，右側集中所有優化設定：格式下拉選單、品質滑桿、色板選項、影像尺寸、元資料等。

圖 01：存儲為 Web 格式對話框

案例實戰：JPEG 壓縮品質對比

以一張 250 KB 的原始照片為例，分別套用「JPEG 低/中/高」三組預設：

• 低品質：檔案最小，但出現明顯馬賽克與色塊。
• 中品質：檔案約 30 KB，肉眼幾乎無損失，適合大多數網頁照片。
• 高品質：檔案稍大，細節保留最完整，適合高解析度展示。

圖 02：不同 JPEG 品質視覺對比

GIF 格式適用場景與限制

GIF 限於 256 色色板，適合：

• 純色圖示、按鈕、簡單插圖
• 需要單一透明色的舊專案（不支援半透明）
• 動畫圖片

同尺寸下，GIF 畫質優於低品質 JPEG，但色彩豐富度遠不如 PNG-24。

圖 03：GIF vs. JPEG 同尺寸對比

PNG：現代網頁的最佳選擇

PNG 結合無損壓縮與 Alpha 通道透明度，分為三種深度：

格式	色彩深度	透明度支援	典型用途
PNG-8	256 色（索引色）	單一透明/索引透明	小型 UI、簡單圖示
PNG-24	1670 萬色（真彩色）	不透明	高品質無透明圖片
PNG-32	真彩色 + 8-bit Alpha	256 級半透明	需柔和邊緣透明的 UI、圖示

PNG-32 雖體積較大，但在 Retina 螢幕與現代瀏覽器下表現最佳，已逐漸取代 GIF 成為透明圖片主流。

決策速查表

• 照片、複雜漸變 → JPEG 中/高品質
• 純色、銳利邊緣、需透明 → PNG-32
• 極小圖示、動畫 → GIF / PNG-8
• 列印級無損保存 → PNG-24 / TIFF

結語

善用「存儲為 Web 所用格式」的即時預覽與雙視圖對比（原圖 vs. 優化圖），配合上述決策邏輯，即可在畫質與速度間遊刃有餘，產出專業級網頁圖片資產。