WordPress 圖片優化教學:尺寸、WebP、延遲載入與媒體庫管理

WordPress 圖片尺寸、壓縮與 WebP 優化示意圖

圖片通常是 WordPress 頁面中佔用流量最多的部分。直接上載相機原圖,不但拖慢首次載入,也會增加備份、搬家和媒體庫管理成本。有效的圖片優化不是把所有檔案壓到模糊,而是按實際顯示尺寸選擇格式、壓縮程度和載入時機。

先確認版面需要的最大尺寸

上載前先查看內容欄、特色圖片和全寬橫幅的最大顯示寬度。若版面最多顯示 1200 像素,便沒有必要上載 5000 像素的版本。高解像度螢幕可預留約兩倍尺寸,但應同時讓 WordPress 提供多個縮圖版本,由瀏覽器按裝置選擇合適檔案。

選擇 JPEG、PNG、WebP 或 AVIF

一般照片適合 JPEG、WebP 或 AVIF;需要透明背景或保留銳利圖形時可使用 PNG。WebP 通常比傳統格式細,並獲現代瀏覽器廣泛支援;AVIF 可能進一步減少檔案,但編碼速度和舊環境相容性要先測試。SVG 適合圖示和簡單向量圖,但上載來源必須可信並經過安全處理。

在上載前移除不需要的資料

相片可能包含相機型號、拍攝時間和 GPS 等 EXIF 資料。公開網站通常不需要保留這些資訊,移除後亦能略為減少檔案。特別是工作地點、住址或私人活動照片,上載前應確認沒有不必要的位置資料。

設定合理的壓縮品質

照片壓縮應在檔案大小與清晰度之間取得平衡。先以約 75 至 85 的品質輸出,再在實際頁面檢查人物皮膚、漸變、細小文字和產品邊緣。不要只比較檔案數字;若壓縮令主體出現色塊或光暈,便會降低文章和品牌的可信度。

利用 WordPress 響應式圖片

WordPress 上載圖片時會建立多個尺寸,並在前台輸出 `srcset`。瀏覽器可根據畫面寬度和像素密度下載較合適的版本。主題若直接固定載入原圖,便會失去這個優勢;建立自訂版面時應使用 WordPress 圖片函式或標準圖片區塊。

正確使用延遲載入

延遲載入會推遲畫面以下的圖片,減少首次下載量。但頁面最上方的主視覺或文章首張大圖通常不應延遲,否則可能令最大內容繪製時間變差。讓首屏重要圖片優先載入,其餘長文章圖片再使用 lazy loading,效果會較穩定。

避免同時使用多套圖片外掛

主機、CDN、快取外掛和圖片優化外掛都可能提供壓縮及格式轉換。多套工具同時處理,容易重複生成檔案、浪費儲存空間或造成網址不一致。先選定一個主要處理層,清楚記錄誰負責壓縮、WebP、延遲載入和 CDN 傳送。

為圖片加入有意義的替代文字

Alt Text 應描述圖片在文章中的用途,幫助使用螢幕閱讀器的訪客理解內容。裝飾圖片可留空,不要把關鍵字重複堆砌。若圖片本身包含重要文字,替代文字應傳達相同資訊;複雜圖表則可在附近提供較完整的文字說明。

控制媒體庫檔名與分類

上載前使用清楚、簡短的英文檔名,避免 `IMG_1234` 或包含大量特殊符號。檔名一旦被搜尋引擎收錄,不宜只為整理而頻繁更改網址。大型網站可建立圖片命名規則,並記錄原圖、裁切版本、授權來源和使用文章。

清理未使用圖片要先查引用

媒體庫顯示「未附加」不代表圖片沒有使用,因為頁面編輯器、主題設定或自訂欄位可能直接引用檔案。刪除前先備份上載目錄和資料庫,並在測試環境使用可靠工具掃描引用。清理後檢查首頁、舊文章、分享圖片和結構化資料。

重新生成縮圖的適用時機

更換主題或修改圖片尺寸後,舊圖片可能沒有新的裁切版本。可使用縮圖重新生成工具補回需要的尺寸,但大量媒體會消耗伺服器資源。先備份並分批處理,完成後清除快取,再檢查重要圖片有沒有被錯誤裁切。

結語

WordPress 圖片優化應從正確尺寸開始,再選擇格式、壓縮品質和載入策略。保留清晰原圖備份、避免多套工具重複處理,並建立檔名和替代文字規則,能同時改善速度、無障礙體驗和長期管理效率。

«
»
  • July 30, 2026
  • July 30, 2026
  • July 30, 2026
  • July 30, 2026
  • July 30, 2026
  • July 30, 2026
  • Cloudways Master Credentials 憑證頁面,IP、帳號及密碼已遮蔽
    July 30, 2026
  • Cloudways 伺服器監察畫面顯示 RAM、CPU、磁碟與頻寬,敏感資料已遮蔽
    July 30, 2026
  • July 30, 2026
  • July 30, 2026
  • July 30, 2026
  • July 30, 2026
  • July 30, 2026
  • July 30, 2026
  • Cloudways Master Credentials 憑證頁面,IP、帳號及密碼已遮蔽
    July 30, 2026
  • Cloudways 伺服器監察畫面顯示 RAM、CPU、磁碟與頻寬,敏感資料已遮蔽
    July 30, 2026