為什麼你的網站圖片需要壓縮 | Bulk Image Compressor
如果你的網站載入時間超過幾秒鐘，人們就會離開。這不是一個意見。Google 自己的研究顯示，當頁面載入時間從一秒增加到三秒時，跳出率會增加 32%。而圖片幾乎總是頁面載入緩慢的最大原因。
大多數網站提供的圖片遠比所需的大得多。一張直接來自相機或圖庫網站的英雄圖片可以輕易達到 5MB 或更多。在良好的寬頻網路上，僅這一個檔案就需要幾秒鐘來載入。在行動 3G 網路上，你面臨的是一張圖片就要約 15 秒。現在想像一個有五到六張這樣圖片的頁面。
你的圖片到底有多大？
這裡有一個快速的現實檢查。打開你的瀏覽器開發者工具（F12），前往 Network 分頁，重新載入頁面，並按「Img」篩選。看看那些大小。你可能會發現至少有一些圖片超過 1MB。
作為參考，以下是典型未壓縮圖片的樣子：
- 用作英雄橫幅的 DSLR 照片：4 到 8MB
- 來自智慧型手機的產品照片：2 到 5MB
- 以全解析度下載的圖庫照片：3 到 10MB
- 儲存為 PNG 的資訊圖表或插圖：1 到 4MB
經過適當壓縮後，這些相同的圖片可以是 100KB 到 300KB，而品質沒有可見的損失。那是 90% 或更多的檔案大小縮減。
頁面速度和 Core Web Vitals
Google 使用 Core Web Vitals 作為排名信號，而圖片直接影響三個指標中的兩個。
Largest Contentful Paint（LCP） 衡量最大可見元素載入所需的時間。在大多數頁面上，那個最大元素是一張圖片。如果你的英雄圖片是 5MB，你的 LCP 會很糟糕。Google 認為超過 2.5 秒任何時間都是較差的 LCP 分數。壓縮後的圖片通常能將 LCP 保持在該閾值以下。
Cumulative Layout Shift（CLS） 衡量視覺穩定性。沒有定義尺寸的圖片在載入時會導致佈局位移。這更多是關於 HTML 屬性而非壓縮，但載入緩慢的過大圖片會使問題更糟，因為頁面會在佔位空間周圍呈現內容，而這個空間可能與最終圖片尺寸不符。
你可以使用 Google PageSpeed Insights 檢查你目前的分数。執行你的首頁和幾個內部頁面。如果你的效能分數低於 90，圖片很可能是問題的主要部分。
SEO 的關聯
頁面速度是確認的 Google 排名因素。自 2010 年以來對桌面端，以及 2018 年以來對行動端都是如此。2021 年 Core Web Vitals 的引入使其更加直接。
但影響不僅僅是速度信號。Googlebot 對慢速頁面的爬取頻率較低。Google 為每個網站分配一個「爬取預算」，如果你的頁面很慢，機器人會將其預算花費在等待回應上，而不是索引更多你的內容。對於擁有數百或數千個頁面的大型網站來說，這很重要。
還有一個通過使用者行為產生的間接影響。當人們從慢速頁面跳出時，Google 會注意到。高跳出率和低頁面停留時間會發送負面的參與信號，隨著時間推移可能影響你的排名。
使用者體驗和跳出率
人們在網上沒有耐心。Portent 的一項研究發現，每增加一秒的載入時間，轉換率平均下降 4.42%。如果你的電子商務網站需要五秒而不是兩秒來載入，你可能正在失去相當大比例的銷售。
行動使用者更不耐煩。超過一半的網路流量來自行動裝置，而行動連線通常比桌面連線慢。你的圖片需要小到足以在手機上使用蜂窩網路快速載入。
還有感知因素。一個快速的網站感覺更專業和值得信賴。一個慢速的網站感覺有問題，即使所有內容最終都會載入。第一印象發生在毫秒之間。
頻寬成本會累積
如果你使用共享主機或基本方案，你可能不會考慮頻寬。但對於有真實流量的網站，頻寬需要花錢。
讓我們做一些數學計算。假設你的平均頁面有 3MB 的圖片，你每月有 100,000 次頁面瀏覽。那是每月傳輸 300GB 的圖片資料。壓縮後，這些相同的頁面可能只有 400KB 的圖片，將傳輸量降到 40GB。這對主機成本和 CDN 帳單來說是一個顯著的減少。
對於高流量網站、媒體公司或擁有大型產品目錄的電子商務商店，這個差異每月可以節省數百或數千美元。
如何批次壓縮你的網站圖片
你可以在 Photoshop 或 GIMP 中一次壓縮一張圖片，但如果你有數十或數百張圖片，那就不現實了。批次壓縮是正確的方法。
使用 Bulk Image Compressor 你可以一次拖入所有網站圖片並一起壓縮。以下是一個實用的工作流程：
-
匯出你目前的圖片。 如果它們已經在你的網站上，下載它們。如果你正在建立一個新網站，收集所有你計劃使用的圖片。
-
選擇你的格式。 對於照片，JPEG 或 WebP 效果最好。對於具有透明度的圖形，使用 PNG 或 WebP。如果你不確定該選擇哪種格式，請參閱我們的 網頁效能圖片格式指南。
-
設定你的品質等級。 對大多數網站圖片來說，75% 到 85% 的品質設定可以在檔案大小和視覺品質之間取得良好的平衡。對於縮圖或背景圖片，你可以使用更低的設定。有關這種取捨的更多細節，請參閱我們的文章 如何在保持品質的同時減少檔案大小。
-
壓縮並下載。 該工具在你的瀏覽器中處理所有內容，因此你的圖片永遠不會離開你的電腦。用壓縮後的版本替換伺服器上的原始檔案。
-
也要設定尺寸。 不要在一個只有 800px 寬的容器中提供 4000px 寬的圖片。在壓縮之前或期間，將你的圖片調整為符合其顯示尺寸。僅此一項就能大幅減少檔案大小。
一個快速的前後對比範例
以下是一個典型網站的壓縮實際情況：
| 圖片 | 壓縮前 | 壓縮後 | 節省 |
|---|---|---|---|
| 英雄橫幅（JPEG） | 4.2MB | 210KB | 95% |
| 團隊照片（JPEG） | 3.1MB | 185KB | 94% |
| 標誌（PNG） | 890KB | 95KB | 89% |
| 部落格縮圖（JPEG） | 1.8MB | 120KB | 93% |
| 總計 | 10MB | 610KB | 94% |
這就是一個在一秒內載入的頁面和一個需要八秒載入的頁面之間的差異。
不要忘記新內容
壓縮你現有的圖片是一次性的修復，但你還需要一個持續處理新內容的流程。每次你或你的團隊新增一篇新的部落格文章、產品頁面或著陸頁時，這些圖片應該在發布前進行壓縮。
將圖片壓縮納入你的內容發布工作流程。這只需要幾分鐘，對你的網站速度和 SEO 的影響是真實且可衡量的。
你的網站圖片可能是你能做出的最大的單一效能改善。工具是免費的，過程是快速的，而結果會立即顯示在你的頁面速度分數中。
Ready to compress your images?
Bulk compress JPEG, PNG, WebP, and AVIF images right in your browser. No uploads, no sign-ups.
Try Bulk Image Compressor