為什麼圖片大小比你想的更重要

一張未最佳化的首頁橫幅圖片可能比整個網頁的 HTML、CSS 和 JavaScript 加起來還重。圖片大約佔一般網頁總位元組的 50%，使其成為你改善效能最大的槓桿。然而圖片最佳化仍然是網頁開發和內容創作中最被誤解的面向之一。

影響遠不止載入速度。圖片大小影響你的搜尋排名、主機帳單、使用者的數據流量，甚至你的轉換率。

效能連結：Core Web Vitals 和 LCP

Google 的 Core Web Vitals 是一組直接影響搜尋排名的指標。其中，最大內容繪製（LCP） 測量最大可見元素在螢幕上渲染所需的時間。在大多數情況下，這個元素就是圖片。

Google 認為 LCP 在 2.5 秒以內為「良好」。2.5 到 4 秒為「需要改善」。超過 4 秒為「差」。在標準網路連線上，一張 3 MB 的首頁橫幅圖片很容易將 LCP 推過 4 秒門檻，拖累整個頁面進入「差」類別。

後果是具體的：

• SEO 排名下降 ——Core Web Vitals 是排名信號；慢頁面會失去排名
• 更高的跳出率 ——53% 的行動訪客在頁面載入超過 3 秒時會離開
• 更低的轉換率 ——每多一秒的載入時間，轉換率大約降低 7%

有損 vs 無損：理解取捨

所有圖片壓縮分為兩類，選錯會導致檔案臃腫。

無損壓縮通過找到更有效率的方式來編碼相同的資料來縮小檔案。每個像素都被精確保留。縮減幅度適中——通常 10-30%。PNG 使用無損壓縮。

有損壓縮丟棄人眼不太可能注意到的資訊。漸層中的色彩精度、細微紋理細節和微妙的色調變化都被簡化。縮減幅度驚人——通常 70-90%。JPEG 和 WebP（有損模式）使用這種方法。

關鍵洞察是，品質 80-85% 的有損壓縮對照片來說與原始版本在視覺上無法區分。感知差異基本為零，但檔案大小差異巨大。

許多人犯的錯誤是對攝影內容使用無損壓縮，或對重要視覺元素使用品質過低的有損壓縮。了解哪些圖片需要哪種處理是有效最佳化的關鍵。

格式很重要：同一張圖片，大小天差地別

圖片格式的選擇與壓縮等級一樣重要。一張照片以 PNG 格式儲存可能比同一張以 JPEG 品質 85% 儲存的大 5 到 10 倍，而沒有可感知的差異。

JPEG 仍然是照片的通用標準。它在任何地方都支援，為攝影內容提供出色的有損壓縮。

WebP 在同等視覺品質下比 JPEG 小 25-35%，還有支援透明度的額外好處。所有現代瀏覽器都支援它。它是目前網路上最佳的通用格式。

AVIF 是最新的競爭者，提供比 WebP 更好的壓縮（大約小 20%），但瀏覽器支援和編碼速度仍在追趕中。

PNG 只有在需要精確像素再現的圖片才是正確選擇——Logo、圖示、帶文字的截圖，或在 WebP 不可用時需要透明度的圖片。

頻寬和儲存：隱藏的成本

對個人部落格和小型網站來說，頻寬成本可能看似微不足道。但它們會迅速增長：

• 一個有 2 MB 圖片的頁面，每月瀏覽 10,000 次，每月傳輸 20 GB 的圖片資料
• 將這些圖片最佳化到總共 400 KB，你只傳輸 4 GB——減少 80%
• 對於按量計費的主機，這直接轉化為更低的帳單

儲存也會累積。一個有 5,000 個產品的電商網站，每個有 4 張 2 MB 的未最佳化圖片，僅產品照片就佔用 40 GB。最佳化到每張 200 KB，降至 4 GB。

響應式圖片與裝置問題

一張 1920 像素寬的圖片顯示在 375 像素寬的手機螢幕上，浪費了超過 96% 的像素。瀏覽器下載完整圖片，然後丟棄大部分資料以適應螢幕。

解決方案是響應式圖片——向不同裝置提供不同大小的圖片。行動訪客收到 400px 寬的圖片；桌面訪客收到 1200px 寬的版本。

延遲載入：不要下載看不見的內容

摺頁下方的圖片——不捲動就看不到的——不需要立即載入。延遲載入將它們的下載推遲到使用者捲動到附近時。這意味著初始頁面載入只包含螢幕上實際可見的圖片，大幅改善感知效能。

現代瀏覽器用一個 HTML 屬性就支援原生延遲載入。這是最簡單且最有效的最佳化之一。

CDN：從邊緣提供圖片

內容傳遞網路在全球分佈的伺服器上儲存你圖片的副本。東京的訪客從附近的伺服器取得圖片，而不是你在巴黎的源伺服器。這降低了延遲，改善了載入時間，並減少了你基礎設施的負擔。

許多現代 CDN 還提供即時圖片轉換——自動轉換為 WebP、為不同裝置調整大小，以及應用最佳壓縮，而你不需要動原始檔案。

延伸閱讀

圖片最佳化是一個小改進累積成顯著成果的主題。如果你想試驗壓縮等級並即時查看品質與大小的取捨，toolk.io 提供了一個完全在瀏覽器中處理的圖片壓縮器。壓縮圖片和格式之間轉換的教學也可在網站上找到。