前言

「存儲為 Web 所用格式」是 Illustrator 輸出螢幕端圖片的核心功能，目標是在檔案大小與影像品質間找到最佳平衡。本文系統梳理對話框操作、GIF、PNG-8、JPEG、PNG-24 五大格式特性與適用場景，助 UI 設計師精準輸出。

一、存儲為 Web 對話框全景解析

1. 三種預覽模式

• 原稿：僅顯示原始向量狀態，參考價值低。
• 優化：即時呈現當前設定下的輸出效果，主力模式。
• 雙聯：左右分欄對比原稿與優化後效果，直觀評估品質損失與檔案大小變化。

2. 關鍵界面元素

• 縮放控制：左下角下拉選單或快捷鍵縮放預覽，檢查細節銳度。
• 瀏覽器預覽：點擊「預覽」按鈕在預設瀏覽器開啟，可加入多瀏覽器測試跨平台顯示差異。
• 檔案大小即時顯示：每個預覽圖下方顯示格式與大小（如 AI 1.85MB → GIF 14.53KB），時刻監控體積。

二、GIF 格式：平面色塊的經典之選

特性

• 索引色模式，最多 256 色，適合平面插畫、圖標、簡單動畫。
• 無損壓縮（LZW），但色彩限制導致漸變易出現色階條紋。
• 支援單一透明度（全透明/全不透明），不支援半透明漸變。
• 可設定「雜邊」顏色，消除置於有色背景時的白邊/色邊。

關鍵參數實測

• 色數 128：品質尚可，檔案 13.71KB。
• 色數 8：檔案 8.7KB，但邊緣鋸齒明顯，因抗鋸齒需更多中間色。
• Web 安全色調色盤：強制映射至 216 色安全色板，確保舊裝置顏色一致，但現代螢幕已無此限制。
• 灰階+擴散：復古報紙風格，非一般 UI 需求。

其他實用選項

• 剪切至美術板：勾選則輸出尺寸等同美術板，否則自動裁切至物件邊界，可減小檔案。
• 圖像大小縮放：矢量優勢，放大輸出不失真，位圖軟體無法做到。
• 優化選項：「優化文字」針對可編輯文字銳利化，「優化圖稿」平滑所有邊緣。
• 色板編輯：雙擊色板直接替換顏色，快速產出多配色版本；右下角圖標可鎖定/轉安全色/刪除色板。

三、PNG-8：GIF 的現代替代者

• 同為 8 位索引色，支援 256 色、透明度、抖動。
• 壓縮算法無損且效率優於 GIF，輸出檔案更小。
• 歷史包袱：IE6 不支援，現代瀏覽器已全面相容，優先選擇 PNG-8 替代 GIF。
• 設定介面與 GIF 高度相似，遷移零成本。

四、JPEG：照片與漸變圖像的首選

• 24 位 RGB，支援 1600 萬色，適合連續色調影像、複雜漸變插畫。
• 有損壓縮，品質滑桿（0-100）平衡體積與偽影。
• 不支援透明度，背景必須填色。
• 「連續」選項（漸進式載入）與「模糊」選項屬舊時代產物，現代網速下無實質必要。
• 平面色塊插畫輸出 JPEG 易產生雜訊，不如 PNG-8/GIF。

五、PNG-24：透明度與高色深的完美結合

• 24 位色深 + 8 位 Alpha 通道，支援千萬色與完整半透明漸變。
• 無損壓縮，檔案較 JPEG 大，但保留透明背景靈活性（可置於任何紋理/顏色背景）。
• 適合：帶陰光暈的圖標、複雜漸變插畫、需疊加於動態背景的 UI 元件。
• 權衡：若不需透明背景，JPEG 同品質下體積更小；若為平面色塊，PNG-8 體積更小。

後記：決策樹速查

1. 需透明背景？→ 是 → 需半透明漸變？→ 是 → PNG-24；否 → 平面色塊？→ 是 → PNG-8；否 → PNG-24。
2. 無透明需求？→ 照片/複雜漸變？→ JPEG (品質 70-85)；平面插畫/圖標？→ PNG-8。
3. 動畫需求？→ GIF 或 APNG/WebP（現代替代）。

實務上請多實測「雙聯」模式，肉眼確認品質臨界點，再依專案效能預算定案。另存為 Web 雖在流程末端，卻直接決定用戶首屏載入體驗，值得每位設計師精進掌握。