你的圖片可能太大了(修復方法在這裡)

上週我為朋友的攝影作品集網站做了審查。美麗的圖片。精彩的作品。

首頁載入花了 12 秒。

罪魁禍首?一張 8MB 的主視覺圖片。在手機連線上,訪客還沒看到任何東西就離開了。

這種情況比你想像的還要常見。所以讓我們談談如何修復它。

沒人注意到的問題

當你從 Photoshop 或手機匯出圖片時,它通常遠大於所需。一張 4000x3000 的相機直出照片可能是 15MB。

對於網站來說,你很少需要超過 200KB 的東西——有時更少。

差異很重要:

| 圖片大小 | 載入時間 (3G) | 載入時間 (4G) | |------------|----------------|----------------| | 5MB | 40+ 秒 | 8 秒 | | 500KB | 4 秒 | 1 秒以下 | | 100KB | 1 秒以下 | 瞬間 |

那個 5MB 的圖片不只是慢——它也在吃掉你訪客的數據流量。

步驟 1:先調整大小

在你壓縮任何東西之前,檢查尺寸。

如果你的網站以 800 像素寬顯示圖片,上傳 4000 像素的原圖沒有意義。你發送的資料比需要的多 5 倍。

找出圖片顯示的最大尺寸(在桌面上檢查——通常是最大的),然後調整到那個寬度。如果你想要,可以為視網膜顯示器增加大約 20% 的緩衝。

步驟 2:壓縮它

現在你的圖片是正確的大小,壓縮它。

現代壓縮演算法非常好。你通常可以在沒有可見品質損失的情況下將檔案大小減少 60-80%。認真的——把前後並排放在一起,試著找出差異。

需要知道的幾件事:

JPEG 品質 80-85 通常是最佳點。低於 70,你開始看到偽影。高於 90,你在浪費位元組來獲得看不見的改善。

PNG 是無損的,所以壓縮較少。但仍然值得通過壓縮器執行以去除元資料並優化編碼。

WebP 給你兩全其美——比 JPEG 更小的檔案,具有像 PNG 一樣的透明度支援。現在大多數瀏覽器都支援它。

步驟 3:選擇正確的格式

這比人們意識到的更重要。

使用 JPEG 於:

• 照片
• 有很多顏色和漸層的圖片
• 背景

使用 PNG 於:

• Logo
• 圖示
• 螢幕截圖
• 任何需要透明度的東西

使用 WebP 於:

• 所有東西,如果你的受眾使用現代瀏覽器
• 為舊瀏覽器回退到 JPEG/PNG

使用 SVG 於:

• 簡單圖形
• 圖示
• Logo(如果你有向量檔案)
• 任何需要無限縮放的東西

真實數據

這是我優化朋友作品集時發生的事情:

| 之前 | 之後 | |--------|-------| | 主視覺圖片:8MB | 主視覺圖片:180KB | | 縮圖網格:總共 12MB | 縮圖網格:總共 400KB | | 頁面載入:12 秒 | 頁面載入:1.8 秒 |

同樣的圖片。同樣的視覺品質。只是適當優化。

懶人方法

如果你上傳到 WordPress、Squarespace 或類似平台,它們通常會自動壓縮圖片。但「通常」不是「總是」,而且它們的壓縮並不總是足夠積極。

更好的方法:上傳前優化。你控制品質,而且不依賴平台決定做什麼。

每張圖片花 2 分鐘。你的訪客會感謝你——即使他們永遠不知道為什麼你的網站感覺很快。

快速檢查清單

上傳任何圖片之前:

1. 大小正確嗎? 不要在需要 800px 時上傳 4000px
2. 壓縮了嗎? 通過壓縮器執行它
3. 格式正確嗎? 照片用 JPEG,圖形用 PNG,可能的話用 WebP
4. 測試了嗎? 看看最終版本。如果看起來不好,降低壓縮

---

網站速度主要關於圖片。修復你的圖片,你就修復了一半的效能問題。其他一切都是邊緣優化。

從你最大的圖片開始。通常是主視覺橫幅和全寬照片。這些以最少的努力給你最大的成效。