發佈日期 : 2026-02-02
網站速度影響用戶體驗，快等於少跳出率!
- Google 研究： 網頁加載時間從 1 秒增加到 3 秒，用戶跳出率（Bounce Rate）會急升 32%。如果是 5 秒，跳出率更會飆升至 90%。
- Amazon 發現： 網站每延遲 100 毫秒（0.1 秒），銷售額就會下降 1%。
- Walmart 案例： 他們發現網站速度每提升 1 秒，轉化率（Conversion Rate）就直接提升 2%。
速度就是金錢，而優化圖片，正是提升速度最直接的方法。
五大網站相片加速手法
我們可以將圖片優化歸納為三個方向：減輕負載（縮小檔案）、減少請求（少載入不必要的）和加快傳輸（縮短距離）。
1. 精準調整圖片尺寸（Resize）
網站常見嚴重錯誤：在只需顯示 300×300px 的位置，上傳了一張 4000×3000px 的原圖。
- 問題：雖然你可以用 HTML/CSS 將圖片「縮小」顯示，但瀏覽器仍需下載那張巨大的原圖，浪費大量頻寬與時間。
- 解決方案：在上傳伺服器前，務必將圖片裁剪至實際顯示的尺寸。例如產品列表頁只需 200×300px，詳情頁只需 800×1000px。
- 工具建議：使用線上工具進行裁剪與壓縮；或建立自動化圖片伺服器，根據網址參數實時輸出正確尺寸。
2. 選對格式：擁抱 WebP（Format Optimization）
JPG、PNG 和 GIF 是老牌格式，但在現代網絡環境下，您有更好的選擇——WebP。
- 優勢：WebP 由 Google 開發，結合了 JPG 和 PNG 的優點。在同等畫質下，WebP 的檔案大小比 JPG 小 30% 甚至更多。
- 例子：一張 70KB 的 PNG，轉為 WebP 可能僅需 6KB（視圖片內容而定）。
- 畫質平衡：圖片質量（Quality）設在 80–90 之間通常是最佳平衡點，肉眼幾乎看不出差別，但檔案大小會顯著下降。
- 兼容性：目前大多數現代瀏覽器已支援 WebP；對於舊版瀏覽器，可設定自動回退顯示 JPG。
3. 響應式圖片（Responsive Images）
全球近 60% 的流量來自流動裝置，忽略手機用戶體驗等同放棄生意。但手機網絡不穩定，且屏幕尺寸多變。
- 技術原理：使用 HTML 的
srcset和sizes屬性，讓瀏覽器根據螢幕大小選擇最合適的圖片下載。 - 高解像度螢幕（Retina / DPR）：可設定高密度屏幕下載 2 倍大小圖片保持清晰，普通屏幕下載 1 倍圖節省流量。
4. 延遲加載（Lazy Load）
為什麼要一次過加載用戶還沒看到的圖片？這會導致網頁初次渲染極慢。
- 原理：「滑到哪，載到哪」。只加載屏幕範圍內（Above the fold）的圖片；向下捲動後再載入下方圖片。
- 效果：假設頁面有 100 張產品圖，初始只需加載 10 張，可大幅釋放頻寬和 CPU 資源，讓網站更快可交互。
- 實作：現代瀏覽器可用原生 Lazy Load（
loading="lazy"），或使用 IntersectionObserver / 插件實現。
5. 使用 CDN 加速傳輸（Content Delivery Network）
即使圖片很小，如果伺服器在美國，香港用戶讀取仍會有物理延遲。
- 原理：CDN 是一組分佈全球的伺服器網絡，會將您的圖片緩存到世界各地。
- 場景：香港用戶訪問時，CDN 會從最近的香港節點傳送圖片，而不是從美國源站獲取，以減少往返時間（RTT）。
如何檢測您的網站是否達標？
想知道您的網站圖片是否拖慢了速度？您可以利用以下免費工具進行「體檢」：
- Google PageSpeed Insights / Lighthouse： Google 官方工具，能指出哪些圖片未優化、建議使用 WebP 格式，並提供具體節省容量估算。
-
ImageKit Website Analyzer：
專門針對圖片的分析工具，提供調整大小及格式的具體建議。
本文提及的工具:
