[WordPress] 加速網站!處理縮圖的最佳外掛組合

當我們將圖片上傳到 WordPress 的媒體庫時,WordPress 會產生四種尺寸的內建縮圖,若您裝上 Stop Generating Image Sizes 外掛後,就可以看到內建的圖片尺寸設定。

WordPress 圖片尺寸設定
圖 1. WordPress 圖片尺寸設定

所以當您上傳了一個圖檔到媒體庫,從 FTP 登入 WordPress 的 upload 資料夾後,會到看很多不同尺寸的縮圖,但你有可能只會用到原始尺寸的圖片,而其他尺永遠都不會用到,但卻佔據了你的硬碟空間,雖然這些圖片的大小看起來不大,那是因為我原始的圖檔只有 55KB,但產生出來的圖檔總和大約 80KB,等於我要多花約 1.5 倍的空間來存放從來都用不到的圖片。

All-size-of-thumbnial
圖 2. 所有縮圖的尺寸

內建的縮圖使用在哪裡?

你在撰寫文章的時候,應該有用過插入圖片的功能,圖片插入後,在右側選單中可以選擇要使用的圖片大小,這就是透過內建的縮圖來完成:

bulid-in-picutre-sizes
圖 3. 內建的縮圖尺寸

停止內建縮圖 – Stop Generating Image Sizes

首先介紹第一個外掛叫做 Stop Generating Image Sizes,你可以在後台的外掛安裝中直接搜尋到,這個外掛的功能就是將 WordPress 內建的其他圖片尺寸關閉。安裝完成之後,你的左側選單就會有一個 “圖片尺寸” 的選項,點下去之後就會看到如圖 1 的畫面,可以把不必要的縮圖關閉。

如果你使用 Stop Generating Image Sizes 把其他圖片尺寸關掉後,再上傳新的圖片後,在插入到文章中時,就會發現沒有內建縮圖的下拉選單可以選,而是直接變成調整大小的方式,這種調整的方式並不會產生縮圖,而是用 HTML 屬性將圖片縮小,但在載入圖片時,還是必須載入原尺寸。

picture-without-resize
圖 4. 圖片尺寸

如果我們將上述的圖片直接指定為精選圖片,理論上來說,在首頁展示的時候,會讀取文章的精選圖片縮圖,但是因為已經停止縮圖,所以系統還是會直接載入原始圖片 (55KB),其實對首頁的流量來說,負擔滿大的。

Load origin picutre in index
圖 5. 首頁縮圖卻載入原始圖片

停止內建圖片的其他尺寸後,之後再上傳新的圖片就不會產生縮圖,之前已經產生的縮圖並不會被清除。

佈景主題所需要的圖片尺寸

減少縮圖後,是可以減少硬碟空間,但是每個佈景主題都會有不同的展示、縮圖尺寸,如果不產生這些縮圖的話,對於網路流量來說是很不利的,因為等於你每張圖都會載入原始尺寸,範例的這張圖片只有 55KB,實際上未壓縮的圖可能都在 500KB 以上。

每個佈景主題,其實都會跟你的 WordPress 登記自己的圖片尺寸變成內建,這樣你在上傳圖片的時候,就會產生佈景主題所需要的縮圖尺寸,例如啟用 twnetyseventeen 這個主題,然後在點選左側 圖片尺寸,就會看到 twnetyseventeen 所登記的縮圖尺寸:

twentyseventeen thumbnail size
圖 6. twentyseventeen 的縮圖尺寸

所以這個主題會需要 2000×1200 px 的精選圖片跟 100×100 的縮圖,換而言之,使用這個主題的話,你的精選圖片必須要大於 2000 x 1200 的大小,每一個主題都會有不同只寸的縮圖,啟用主題之後就可以到 Stop Generating Image Sizes 裡面查看。

重新產生縮圖 – Regenerate Thumbnails

若我們更換佈景主題時,所需要的縮圖尺寸可能會不同,這時候你就需要重新產生所縮圖,可以利用 Regenerate Thumbnails 這個外掛來完成,同樣的在 WordPress 後台就可以找到。

安裝好之後,隨便從媒體庫中開啟一張圖片,按下下方的重新產生縮圖,就可以為單張圖片產生縮圖,如果你沒有停止產生其他縮圖的話,按下重新產生縮圖就會產生所有尺寸的縮圖,如圖 7,而已停止其他縮圖的話,會看到如圖 8 的畫面:

Regenerate Thumbnails Plugin
圖 7. Regenerate Thumbnails Plugin
Stop Resize other thumbnails
圖 8. 已設定停止產生其他縮圖

如圖 8 中,您可以句選 “刪除舊版未註冊尺寸的縮圖…”,就可以清除所有舊的縮圖,但是你必須確認你在過去的文章、產品中,沒有使用到其他尺寸的縮圖,否則會產生破圖的情況,筆者建議停止產生縮圖,但不要清除舊的縮圖,除非你確定你過去沒有使用到其他縮圖 (如圖 3)。

只要重新產生縮圖,主題縮圖也會自動替換,不需要再次調整,以圖 5 的狀況,使用沒有縮圖的圖片當作精選圖片,只要重新產生縮圖,就會自動替換縮圖後的圖片。

產生縮圖後主題自動替換成縮圖
產生縮圖後主題自動替換成縮圖

如何處理文章的圖片與縮圖

1. 確認你的佈景主題所需要的尺寸

在選好你的佈景主題、安裝 Stop Generating Image Sizes 之後,點選左側 “圖片尺寸”,把內建的縮圖關掉,只保留佈景主題所需要的縮圖就好。

2. 撰寫文章的時候不要使用內建的縮圖

當你在撰寫文章的時候,先把圖片都處理好,先裁切並且壓縮,這樣就不需要使用內建的縮圖,就不須要產生縮圖,把每一張圖片的大小都先裁切好,建議長邊不要超過 1200,高度不要超過 640。

先壓縮之後再上傳到媒體庫中,撰寫文章的時候直接使用原始圖片。

3. 單獨產生精選圖片的縮圖

如果你沒有使用過內建的縮圖尺寸,那就不需要內建的縮圖,如果你是撰寫文章的部落客,已文章的類型來說,只有精選圖片需要不同尺寸的縮圖。

所以你可以把所有尺寸的縮圖都關閉,包含佈景主題的縮圖尺寸全部關閉,這樣你上傳圖片的時候就只有原尺寸。

然後,在工具 -> 重新產生縮圖 (Regenerate Thumbnails 外掛的功能) 的工具中,點擊 “僅為 OO 張精選圖片重新產生縮圖” 按鈕來產生精選圖片的縮圖,而文章中的其他圖片就不會有佔據額外的硬碟空間。但是!你要記得每次撰寫新的文章時,就必須手動產生精選圖片的縮圖,因為你已經把佈景主題的縮圖都關閉了。

4. 更換佈景主題時,請重新產生縮圖

每一個佈景主題都會需要不同尺寸的縮圖,如果你換了一個佈景主題,只有新上傳 的圖片會有新尺寸的縮圖,舊的圖片必須重新產生。

regenerate pictures for theme
針對佈景主題需要的精選圖片產生縮圖

在使用 Stop Generating Image Sizes 與 Regenerate Thumbnails 之後,圖片實際上就只會產生原圖 + 佈景主題所需要的縮圖,用 FTP 看檔案就少很多了:

Regenerate thumbnails after stop thumbnails
停止產生其他縮圖

如果你要批次重新產生所有圖的縮圖,從 工具 -> 重新產生縮圖 中產生即可。

結論

方便與節省的選擇

關閉圖片其他尺寸之後,雖然可以減少圖片佔據硬碟的空間,但是你在撰寫文章的時候就要自己處理圖片,或者是要自己產生縮圖,並且不能用內建的其他尺寸。如果不更動圖片的選項,在使用上來說會方便很多,但是越來越多的圖片就會佔據你的硬碟還有流量。

其他

利用 ImageMagic 在本地電腦處理縮圖。

# 將寬度大於 1200 的圖片縮成 1200,未滿 1200 的圖片不處理
$ mogrify -resize 1200">" *,*

# 將高度大於 640 的圖片縮成 640,未滿 640 的圖片不處理
$ mogrify -resize x640">" *.*

# 將圖片大小超過 200k 的再壓縮一次
$ find . -size +200k -exec mogrify -quality 90 {} \;

本站使用 Jetpack 的內建圖片加速選項,我發現滿好用的,你可以關閉所有縮圖,直接透過 Jetpack 產生不同尺寸的縮圖,並且還不會耗費你主機的流量,下次我們再來介紹。



2 thoughts on “[WordPress] 加速網站!處理縮圖的最佳外掛組合”

  • 你好,想請問如果取消所有的縮圖之後,才發現某一種尺寸是某一張圖片所必須的。那我能否再將Stop generating image sizes的設定中取消勾選那個尺寸之後,再針對那張圖片單獨執行Force generate thumbnail ?這樣是否新的Stop generating image sizes就會單獨套用到那張圖片上。之後再將Stop generating image sizes的設定調回不產生任何縮圖。這樣的操作方式是正確的嗎?一次新的Stop generating image sizes設定搭配一次Force generate thumbnail?

    • 你好,你的概念上是正確的,取消句選之後再重新產生縮圖就可以。但如文章中提到,其實有用到縮圖的大約只有精選圖片(還有產品會用到縮圖的機率比較高)。我覺得保留方便性的話,讓必要的那張圖片還是產生縮圖使用上可能比較方便一點。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *