如何幫你的 WordPress 圖片優化,瘦身媒體庫空間

20240705

許多部落格經營時間一長,媒體庫內圖片佔用的空間都會無比的龐大,明明只上傳了幾千張圖片,但主機卻顯示為上萬張或十萬張的圖片,甚至佔用了幾十 GB 的媒體庫空間,雖然網路上有許多透過外掛刪除多餘圖片或圖片優化的方法,卻似乎沒有可以完整解決問題的流程。

WordPress 圖片檔案過多或過大的原因

會造成 WordPress 圖片檔案數量過多或佔據太多空間的原因可以分為以下三個原因,也是此次 WordPress 圖片優化的重點,除了可以確保把媒體庫空間瘦身下來,也可以預防日後再發生同樣的事情。

錯誤的 WordPress 圖片優化方法

這應該是大部分部落客都會碰到的問題,就是不知道圖片應該要使用多大的尺寸才比較適合,有不少人直接用原尺寸上傳圖片,造成單一圖片寬度都是 3,000PX 起跳,總認為用原圖上傳才能讓照片更加清晰,造成每張圖都是 2MB – 3MB 以上。

也有一種說法,每張圖要控制在 200KB 以內,才是優化圖片最好的方法,也才能對 SEO 比較有利,這是一個非常錯誤的見解,也會讓照片變得模糊不清楚。

照片檔案方面許多人則是喜歡儲存成 PNG 檔,而非 JPG(JPEG),主要是擔心儲存成 JPG(JPEG)會造成照片模糊不清,是因為設定錯誤,而非 JPG(JPEG)檔案格式的問題。

PNG 檔案格式的檔案大小平均是 JPG(JPEG)的 2 倍或更大,會非常佔用媒體庫空間。

也有不少來試著把檔案儲存成 WebP 格式,檔案也確實可以比 JPG(JPEG)更小,也不會破壞照片品質,但得同時另外儲存一份 JPG(JPEG)檔案,避免一些老舊的瀏覽器不支援,造成媒體庫空間除了原本 JPG(JPEG)的檔案還要另外儲存一份 WebP 檔案,反而更消耗媒體庫空間。

正確的 WordPress 圖片優化方法

一、檔案格式

一律使用 JPG(JPEG),可以使用 PhotoScape X 來優化圖片,寬度則是建議 1,200PX,最大不要超過 1,500PX,平均一張照片的尺寸約 200KB – 500KB 之間。

二、優化軟體

有些人上傳圖片的時候會使用 ShortPixelEWWWSmush 等外掛來處理圖片的優化,這些我都不是很建議,還是會建議先在自己的電腦優化完圖片後再上傳的網站,優化軟體則是比較推薦 JPEGmini,優化的設定較簡單,也可以將圖片縮到最小又不會破壞品質。

因為 JPEGmini 目前免費的試用方案已經前述,軟體本身價格也不便宜,如果想要使用免費的優化外掛則是比較推薦 TinyPNG,在圖片的優化上表現也較不俗。

小叮嚀:上述優化軟體只要是金城事務所客戶,都會協助處理。

正確的 WordPress 圖片上傳方法

有不少部落客習慣將網站當作網路相簿在儲存檔案,在編輯文章的時候習慣先上傳 100 張照片,然後再挑選其中的 30 到 40 張照片放置到文章中使用,那其餘沒有使用到的照片就會造成媒體庫空間的浪費。

正確的使用方法應該是需要使用到哪些照片才上傳,如果已經上傳但發現不需要使用到的照片可以從媒體庫刪除,記得要點選「永久刪除」才能真正將圖檔從媒體庫中完全刪除喔。

主機端也要記得使用 Stop Generating Unnecessary Thumbnails 的外掛,將圖片時會產生其它尺寸縮圖檔的功能關閉。 150×150 的縮圖尺寸則是要保留可以產生,切勿完全禁止。

小叮嚀:任何關閉圖片上傳產生其它尺寸縮圖檔的外掛都無法百分百不產生其它尺寸圖片,偶爾還是會有漏網之魚。圖片寬度請勿超過 2,000PX,避免上傳時會另外產生 -scaled 的縮圖尺寸

WordPress 媒體庫優化的方法

上面已經分享了完整的 WordPress 圖片優化方法,也提到了各種會遇到的地雷,這些都是上傳圖片到 WordPress 時該注意的細節。接著要分享的是當我們的 WordPress 網站已經充斥了許多過大的圖片戰滿了整個空間,又該怎麼優化。

媒體庫多餘圖片檔案刪除的方法

優化圖片的第一步驟是先刪除多餘的圖片,這邊的多餘圖片並非多餘的尺寸,刪除多餘的尺寸是第二步驟。如先前提到:可能是之前上傳了太多圖片,但並非每張照片都會置入於文章中,所以就會產生有些圖片並沒有被使用到,卻還是佔據著媒體庫的空間。

WordPress 上有不少號稱可以刪除媒體庫多餘圖片的外掛,我比較推薦使用 Media Cleaner,掃描 10 萬張圖片的時間大約 3 小時左右(因主機效能而異)。

Media Cleaner 會很詳細列出完全沒有被使用到的圖片檔案,但是在刪除時還是會有一點點的小問題,如果這張照片並非置入於文章內,而是只被版型(例如 Logo)或是側邊欄(小工具)使用,那就可能會被誤判是沒被使用到的檔案而被刪除。

小叮嚀:執行 Media Cleaner 之前記得一定要先備份媒體庫的檔案,避免誤刪的狀況發生。我通常是都刪除完畢後,再補上被誤刪除的零星圖檔,通常不會超過 10 張。

小叮嚀:如果是購物車網站,建議購買 PRO 版本,不然會有非常嚴重的掉圖,感謝網友李秩鏵補充。

媒體庫多餘圖片尺寸刪除的方法

多餘圖片尺寸刪除的方法在網路上有非常多的外掛介紹與教學,推薦使用 Thumbnail Cleaner,可以將多餘的圖片尺寸完全刪除較乾淨,執行速度也較快。

執行 Thumbnail Cleaner 後一定要將文章內所有圖片的連結都更改為原始圖片連結,而非到裁切圖片的連結,例如原來圖片是連結到「/wp-content/uploads/20240705.jpg」,就要更改為「/wp-content/uploads/20240705.jpg」否則就會產生破圖。

媒體庫圖片優化的方法

完成上述兩個步驟後,接下來才是優化圖片的檔案大小,網路上有許多可以優化存在於媒體庫內圖片的外掛,例如 EWWW,個人比較不建議使用外掛優化已經存在於媒體庫內圖片這個動作,有可能讓主機太號效能或是造成網站當機。

如果有 FTP 權限,則是建議將 uploads 的檔案完全下載,使用 JPEGmini 優化後再重新上傳並覆蓋原來的圖檔,可以得到較小的圖片檔案,也不太容易產生因為優化圖片後照片畫質變差的問題。

金城老師觀點

圖片優化除了可以加快網頁的載入速度,也會間接影響到 SEO(雖然影響的分數不高),但千萬不要為了 pagespeed 上的分數,將圖片壓縮到太小的尺寸,造成照片畫質的不清晰。

雖然 WordPress 有提供許多優化圖片的外掛,我還是建議在上傳照片之前能夠用自己的電腦先優化好照片才是最好的選擇。

最後,好的圖片優化習慣,除了上述好處外,也能夠讓自己日後管理圖片或是備份圖片檔案來得更加方便,更能省下所多主機空間,不用為了過大的圖片空間而另外花錢升級主機。

參考資料

  1. Tutorial for Media Cleaner | Meow Apps
  2. How to delete & disable generating unused thumbnails in WordPress
  3. How To Remove Old WordPress Thumbnails