圖片是網站內容的重要組成部分，但也是拖慢速度的「頭號殺手」—— 一張未經優化的高清圖片（如 5MB）可能導致頁面加載時間增加 3-5 秒，直接讓用戶失去耐心。好在圖片優化操作簡單，通過「壓縮體積」和「延遲加載」兩個核心手段，就能減少 50% 以上的圖片加載時間。本節將用外掛實現全自動優化，新手無需任何技術知識也能搞定。
一、為什麼圖片必須優化？3 個扎心數據
- 圖片通常佔網站總載入體積的 60%-80%（遠超文字、程式碼等其他內容）。
- 加載時間每增加 1 秒，用戶流失率上升 20%（尤其移動端用戶對速度更敏感）。
- 未優化的圖片會直接拉低 Google PageSpeed 評分（影響 SEO 排名）。
核心目標：在不明顯損失畫質的前提下，將圖片體積壓縮 50%-80%，並讓非首屏圖片「按需載入」。
二、方法 1：圖片壓縮（用外掛程式自動減小體積）
圖片壓縮的原理是去除冗餘數據（如拍攝設備資訊、未顯示的像素細節），同時保持肉眼可見的畫質基本不變。推薦用「Smush」外掛實現全自動壓縮，支援批次處理已有圖片和自動壓縮新上傳圖片。
步驟 1：安裝並啟用 Smush 外掛程式
- 登入 WordPress 後台，進入「外掛→安裝外掛」。
- 搜尋「Smush」，找到標有「由 WPMU DEV 開發」的外掛，點擊「安裝」→「啟用」。
步驟 2：配置自動壓縮（新圖片無需手動處理）
激活後，插件會自動跳轉到設置頁面，按以下步驟配置：
- 啟用自動壓縮：在「設置」標籤頁，確保勾選「自動壓縮新上傳的圖片」（預設已勾選），這樣日後上傳的圖片會被自動壓縮，無需手動操作。
- 選擇壓縮模式：
- 新手推薦「無損壓縮」（預設選項）：只去除冗餘資料，畫質無損失，壓縮率約 30%-50%。
- 若追求更大壓縮率（如圖片體積仍過大），可選擇「有損壓縮」：輕微損失畫質（肉眼幾乎看不出），壓縮率可達 60%-80%（需點擊「高級設置」開啟）。
- 保存設定：點擊頁面底部「保存設定」。
步驟 3：批量壓縮已有圖片（一次操作，全網優化）
若網站已有大量未壓縮的圖片（如之前上傳的文章配圖），用「批量壓縮」功能一鍵優化：
- 在 Smush 外掛頁面，點擊左側「批次 Smush」標籤。
- 點擊「立即開始」，插件會自動掃描媒體庫中的所有圖片。
- 掃描完成後，點擊「應用 Smush 到 XX 張圖片」，系統會批量壓縮（過程可能需要幾分鐘，無需等待，可後臺運行）。
- 查看壓縮效果：壓縮完成後，會顯示「總節省空間」（如「已節省 12MB」），每張圖片的壓縮前後體積對比也會列出。
三、方法 2：延遲加載（讓圖片「按需加載」）
延遲加載（Lazy Load）的原理是：只有當用戶捲動到圖片位置時，圖片才會開始載入。這樣首屏（打開頁面時第一眼看到的區域）圖片會優先載入，非首屏圖片（如下方的文章配圖、頁腳圖片）暫時不載入，大幅減少初始載入時間。
用 Smush 外掛一鍵開啟延遲載入（無需額外外掛）
Smush 已內建延遲載入功能，無需單獨安裝外掛，設定步驟：
- 在 Smush 外掛頁面，點擊左側「延遲載入」標籤。
- 勾選「啟用延遲加載」，並按以下推薦配置：
- 「延遲載入圖片類型」：全選（圖片、頭像、縮略圖等）。
- 「排除首屏圖片」：建議勾選（首屏圖片不延遲，確保用戶打開頁面時能快速看到核心內容）。
- 「載入動畫」：保持預設（顯示輕微動畫提示使用者圖片正在載入）。
- 點擊「保存設定」，延遲載入立即生效。
驗證延遲載入是否生效
- 打開網站任意文章頁（包含多張圖片），按 F12 打開瀏覽器「開發者工具」。
- 點擊「網絡」標籤，刷新頁面，觀察圖片加載情況：
- 初始加載時，只有首屏圖片會顯示在「網路」列表中。
- 向下捲動頁面，當非首屏圖片進入視野時，「網路」列表中才會出現這些圖片的載入記錄，說明延遲載入生效。
四、新手必知的圖片優化額外技巧
1. 選擇正確的圖片格式（比壓縮更基礎）
上傳圖片前，選擇合適的格式能從源頭減少體積：
- 照片 / 複雜圖像：用 WebP 格式（體積比 JPG 小 30%-50%，且畫質更好），Smush 外掛可自動將 JPG/PNG 轉為 WebP（在「進階設定」中開啟「自動轉換為 WebP」）。
- 簡單圖形 / 圖標：用 PNG 格式（支援透明背景，體積小），避免用 JPG。
- 堅決不用 BMP、TIFF 格式：這些格式體積巨大，不適合網頁使用。
2. 控制圖片尺寸（別用「大圖片縮小顯示」）
很多新手會直接上傳相機拍攝的高畫質圖片（如 3000×2000 像素），再通過 WordPress 設定顯示為 300×200 像素 —— 這是錯誤的！因為瀏覽器仍會載入原始大圖片，浪費頻寬和時間。
正確做法：
- 上傳前用圖片工具（如電腦自帶的「畫圖」、線上工具「Canva」）將圖片尺寸裁剪為實際顯示尺寸（如首屏橫幅圖寬 1200 像素即可）。
- 若不會使用圖片工具，可安裝外掛「Imsanity」，自動將上傳的大圖片壓縮到指定尺寸（如最大寬度 1200 像素）。
3. 避免濫用圖片（不是越多越好）
- 能用文字說明的內容，就不要用圖片（如簡單的步驟說明）。
- 多張連續的圖片可合併為輪播圖（如產品展示），減少同時加載的圖片數量。
五、常见问题的解决方法
1. 壓縮後圖片畫質明顯變差？
- 若使用「有損壓縮」，可在 Smush 設定中降低壓縮強度（「高級設定」→「壓縮強度」調至 50%）。
- 建議優先用「無損壓縮」+「WebP 格式」，平衡體積和畫質。
2. 延遲載入導致圖片顯示異常（如空白、錯位）？
- 檢查是否排除了首屏圖片（未排除可能導致首屏圖片延遲載入，出現短暫空白）。
- 若某些圖片必須立即載入，可在 Smush「延遲載入」設定中，在「排除」框輸入圖片的 CSS 類別名稱（需具備基本程式碼知識，新手可暫時關閉該圖片所在頁面的延遲載入）。
3. 優化後速度提升不明顯？
- 用 GTmetrix 重新測試（參考 检测网站速度的工具），查看「瀑布圖」確認圖片載入時間是否減少。
- 若仍慢，可能是其他因素（如伺服器回應慢、外掛過多），需結合後續最佳化方法（如啟用快取）。
总结一下
圖片優化是網站速度優化中「投入產出比最高」的操作 —— 通過 Smush 外掛，花 10 分鐘設定，就能減少 50% 以上的圖片載入時間。核心步驟是：安裝 Smush→開啟自動壓縮和批量壓縮→啟用延遲載入（排除首屏圖片）。
記住，圖片優化的原則是「夠用就好」：不必追求極致壓縮率，也不必上傳超高清圖片，在畫質和速度之間找到平衡，讓用戶既能看清內容，又能快速加載，纔是最佳狀態。