控制細節，讓圖片在網路上跑得更快

壓縮與品質參數

ImgEasyResize 透過 quality slider 讓你即時預覽輸出；推薦做法：

• PNG 無損：如需極致小檔，可改 WebP Lossless；若色彩為 256 色內，可嘗試 Indexed PNG。
• JPEG：從 0.7 開始逐步調降並比較細節，避免一次拉到 0.4 以下造成 banding。
• AVIF / WebP：測試 0.45、0.6、0.75 三組，記錄檔案大小與視覺分數。

批次輸出時，建議建立簡單表格記錄「檔名 / 格式 / 品質係數 / 檔案大小」，方便向設計或利害關係人說明決策。

色彩空間與動態範圍

大多數網頁瀏覽器會在 SDR / sRGB 模式下顯示圖片。若原稿為 Display P3 或 HDR，請：

• 在輸出前於設計工具中轉換到 sRGB，避免瀏覽器自行轉換產生色差。
• 若要保留 HDR，可輸出 AVIF (10-bit) 並以 <picture> + type="image/avif" 提供，並備用 sRGB 版本。
• 檢查螢幕截圖是否包含 Gamma/ICC Profile，必要時在 ImgEasyResize 內重新輸出以確保一致。

命名、批次與版本控管

善用 ImgEasyResize 的佇列（Queue）可以快速為多張圖片複製設定：

• 加入所有素材後，先設定第一張的裁切、輸出格式與品質，再透過「下一張」沿用設定。
• 批次下載會沿用檔名，可搭配 hero-homepage@2x.avif 等命名規則。
• 把輸出參數記錄在版本控制的 README 或 issue 內，方便日後調整。

交付策略：載入與快取

要讓優化後的圖片真正發揮效果，需搭配載入策略：

• HTML：使用 <picture> + srcset 定義多種尺寸，並搭配 loading="lazy"。
• CDN：設定長時間快取（例如 30 天）並在網址中加上版本號，更新時即可強制刷新。
• Retina：對 2x / 3x 裝置輸出加倍尺寸，但在 CSS 中設定實際顯示尺寸，維持清晰度。

安全性與內嵌編碼

有些場景會使用 Base64 或 data URI 直接嵌入圖片。請評估：

• 文件大小：Base64 會放大約 33%，僅適合小型 UI 素材。
• 快取：內嵌圖片會跟著 HTML / CSS 更新，適合少量高頻元素。
• CSP：若啟用 Content Security Policy，需要加入 img-src data: 例外。

若網站採用白名單網域（ImgEasyResize 也採類似策略），請確保 CDN / 站點一一致列入允許清單，以避免圖片被阻擋。