圖片係網站內容嘅重要組成部分，但亦係拖慢速度嘅「頭號殺手」——一張未經優化嘅高清圖片（例如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→開啟自動壓縮同批量壓縮→啟用延遲載入（排除首屏圖片）。
記住，圖片優化嘅原則係「夠用就好」：唔使追求極致壓縮率，亦唔使上傳超高解像度圖片，喺畫質同速度之間搵到平衡，等用戶既可以睇清內容，又可以快速載入，先係最佳狀態。