一、數位影像壓縮原理：有損壓縮 vs 無損壓縮

數位圖片本質上是由數百萬個具備 RGB 色彩數值的像素點所組成的二維矩陣。一張未經壓縮的 4K 解析度（3840×2160）24位元真彩色圖片，原始資料量高達 24.8 MB。在網頁載入與網路傳輸中，如此龐大的體積會造成嚴重的頻寬消耗與延遲，因此必須透過壓縮演算法進行資料精簡。

壓縮技術主要分為兩大類別：「無損壓縮（Lossless Compression）」如 PNG、無損 WebP，透過統計編碼（如 Deflate / Huffman 演算法）去除重複的資料排列，解壓縮後能 100% 還原原始像素，適合線條圖、截圖與包含文字的圖表；「有損壓縮（Lossy Compression）」如 JPEG、WebP、AVIF，利用人類視覺系統對高頻色彩細節較不敏感的生理特性（心理視覺模型），捨棄人眼難以察覺的細微色彩資訊，能在保持肉眼難辨畫質的前提下將檔案大小縮減 70% 到 90% 以上。

二、主流圖檔格式橫向評比：JPEG、PNG、WebP 與 AVIF

選擇適當的圖檔格式是現代網頁與應用程式開發的核心基本功：

1. JPEG / JPG：自 1992 年問世以來的長青格式，採用離散餘弦轉換（DCT），相容性達 100%，但在高壓縮率下容易出現方塊效應（Blocking Artifacts），且不支援透明通道（Alpha Channel）。

2. PNG：支援 8 位元與 24 位元真彩色及 Alpha 半透明通道，無損畫質但對於複雜的照片類影像檔案體積偏大。

3. WebP：Google 開發的現代網頁格式，同時支援有損與無損壓縮及透明通道。在相同視覺品質下，體積比 JPEG 小約 25% 至 35%，現已被全球所有主流瀏覽器全面支援。

4. AVIF：基於開源 AV1 視訊編解碼技術的次世代圖片格式，擁有目前業界最強大的色彩漸層保留能力與高動態範圍（HDR）支援，相較 JPEG 可節省高達 50% 甚至更龐大的體積，是新一代高效能網站的首選。

三、解析度、色彩取樣（Chroma Subsampling）與檔案大小的關係

影響圖片最終檔案大小的三大關鍵因子為：

1. 像素解析度（寬度 × 高度）：將解析度等比例縮小至目標顯示尺寸（例如手機螢幕或桌機內容寬度），檔案體積會呈平方級別下降。

2. 色彩取樣（4:4:4 vs 4:2:0）：多數 JPEG 與有損壓縮會將相鄰像素的色彩資訊合併（4:2:0 取樣），在人眼無感的情況下直接減少一半的色彩資料量。

3. 品質係數（Quality Factor 1-100）：實務上將品質係數設定在 75 至 85 之間，往往能在「極小檔案大小」與「極高視覺保真度」之間取得最完美的甜蜜平衡點（Sweet Spot）。

四、圖片優化對 Core Web Vitals（LCP）與 SEO 的關鍵影響

Google 搜尋引擎將「最大內容繪製（LCP, Largest Contentful Paint）」列為最重要的核心網頁體驗指標之一。70% 以上網頁的 LCP 元素都是頂部橫幅圖（Hero Image）。透過本工具精確估算與最佳化圖片尺寸，將 LCP 時間壓低至 2.5 秒內，能直接提升網頁在 Google 搜尋結果中的排名競爭力與使用者轉換率。