贊助商廣告

以下內容更新於 — 2020-04-26 的 19:07

這是一個關於WordPress媒體庫圖片分別儲存在主機以及Amazon S3儲存桶的苦主,卻想要使用WP Offload Media Lite外掛免費將主機裡的舊圖片重新產生新增的自訂略縮圖之後上傳到S3儲存桶,再使用ShortPixel外掛壓縮圖片的故事。
這篇文章要討論的工具與外掛包含:
Amazon S3儲存桶(雲儲存,以下簡稱S3儲存桶)
WP Offload Media Lite(將媒體庫連接雲儲存的外掛)
ShortPixel(圖片壓縮與優化外掛)
Regenerate Thumbnails(重新產生略縮圖的外掛)
reGenerate Thumbnails Advanced(重新產生略縮圖的外掛)

將媒體庫連接到雲儲存的外掛

像我這種不懂指令也不會使用終端機訪問資料庫的人,想要將媒體庫搬到Amazon S3Google Cloud Storage…等等的雲儲存裡面,通常都只能透過像是WP Offload Media Lite或者是Media Cloud這類型能夠《將媒體庫連接到雲儲存》的外掛。
如此一來,之後在WordPress後台所上傳的新圖片,都會直接被扔到S3儲存桶或GCS裡面了;當然,你可以選擇上傳到雲儲存之後,主機裡是否也要保留。

我目前就是使用WP Offload Media Lite這個外掛來連接媒體庫與S3儲存桶。

付錢才幫你把主機裡的舊圖片也上傳到S3

但是呢,使用外掛就意味著偶爾會伴隨著只能爽一半的遺憾!(笑)
因為這類型幫你把媒體庫連接到雲儲存的外掛,都會提供免費版與付費版;免費版的功能可以幫我們把新上傳的圖片扔到S3儲存桶裡面,我們只需要一如往常地從媒體庫或WordPress後台的任何地方上傳圖片即可,遺憾的是它們不處理以前就存在主機裡的那些舊圖片,也就是說,當你開始使用這類型的外掛將新上傳的圖片扔到S3儲存桶裡面,舊圖片還是一樣在主機裡面;如果想要把以前在主機裡的舊圖片也扔到S3儲存桶裡面,那就得購買外掛的付費版,這就是免費與付費之間最有感的差異。

免費把主機裡的舊圖片也上傳到S3儲存桶

我目前試過這三個圖片相關的外掛,都可以免費完成這件事情。雖然這並不是這些外掛的原意,但是我猜可能是因為它們所做的工作,剛好可以觸發那些《將媒體庫連接到雲儲存的外掛》認為這是一個《上傳新圖片》或者是《處理媒體庫圖片》的事件,於是便把那些透過這三個外掛處理過的主機裡的舊圖片認定為《新圖片》,進而將它們上傳到S3儲存桶裡面,我的蠢蠢理解大概是這樣的運作原理。

贊助商廣告

Regenerate Thumbnails最快速又妥當

如果只是單純想要把主機裡的舊圖片也上傳到S3儲存桶裡面,Regenerate Thumbnails是最不容易出錯的選擇。
它其實是《重新產生略縮圖》的外掛,一共有2個地方+3種選擇作為產生略縮圖的途徑。

  1. 從外掛頁面,有2種圖片種類選擇:
    一次處理所有的圖片
    一次處理所有的特色圖片
  2. 在媒體庫列表中☞只處理指定的單一圖片

無論是從哪裡處理、處理所有或單一圖片,一定要記得以下這二個選項要勾選正確

  • 不勾☐Skip regenerating existing correctly sized thumbnails (faster).|不要對已經擁有略縮圖的尺寸重新產生略縮圖。
  • 要勾✔Delete thumbnail files for old unregistered sizes in order to free up server space. This may result in broken images in your posts and pages.|刪除沒用的略縮圖。
how-to-offload-old-images-from-local-hosting-to-s3-bucket-with-plugin|如何設定Regenerate Thumbnails

第一項取消打勾(不勾)☞無論略縮圖是否已經存在,都要重新產生,所以不勾。
第二項一定要打勾(要勾)☞要刪除沒用的略縮圖,所以要打勾。
最後,點擊藍色按鈕《Regenerate Thumbnails》。
這裡有圖文教學

ShortPixel也行,但還是得搭配Regenerate Thumbnails

ShortPixel是我用過壓縮效果最有感的圖片優化外掛,而且它與WP Offload Media Lite能夠搭配使用。即使已經將新上傳的圖片透過WP Offload Media Lite扔進s3儲存桶,一樣可以使用ShortPixel壓縮S3儲存桶裡面的圖片
雖然說ShortPixel能與WP Offload Media Lite搭配使用,壓縮S3儲存桶裡面的圖片;但是,如果你和我一樣,主機裡還有以前的舊圖片,又想要壓縮主機裡的舊圖片,就比較麻煩了。
假設在WP Offload Media Lite啟用的情況下,又想要使用ShortPixel壓縮主機裡的舊圖片,這時候就會發現,這些舊圖片被壓縮之後就會自動被上傳到S3儲存桶了! 是的,主機內的舊圖片就這樣透過壓縮圖片自動被《將媒體庫連接到雲儲存的外掛》上傳到S3儲存桶了。
但這不是一個完美的結局,因為隨後回到媒體庫列表中,就會發現圖片的小縮圖變成空白;除此之外,如果那張圖片同時也是文章的特色圖片,就會發現文章列表中的小縮圖變成破圖了!
但是也不用太擔心,只需要再透過【Regenerate Thumbnails】重新產生略縮圖,就可以讓讓小縮圖正常顯示囉~
但是要特別注意的是,Regenerate Thumbnails與ShortPixel這二個外掛可能會有衝突,所以請先停用其中一個,再啟用另外一個執行工作。
這裡有圖文教學

因為最後還是得靠【Regenerate Thumbnails】讓上傳到S3儲存桶的舊圖片恢復在媒體庫列表中的小縮圖。所以,如果想要靠ShortPixel優化舊圖片,建議先使用【Regenerate Thumbnails】來上傳主機內的舊圖片到S3儲存桶,再使用ShortPixel直接壓縮S3儲存桶裡面的圖片就可以了。

當然,如果已經先使用【Regenerate Thumbnails】將主機裡的舊圖片上傳到S3儲存桶了,那就可以正常使用ShortPixel來優化S3儲存桶裡面的圖片囉~

贊助商廣告

reGenerate Thumbnails Advanced也行,最後還是得靠Regenerate Thumbnails

reGenerate Thumbnails Advanced也是重新產生略縮圖的外掛,但是它的功能比【Regenerate Thumbnails】還要更多一點,最有用的功能就是它可以新增自訂的略縮圖尺寸。除此之外,reGenerate Thumbnails Advanced是由ShortPixel所開發,所以二者完全相容,可以同時啟用,互相支援。

因為WordPress預設能夠更改的略縮圖只有3個尺寸,如果想要增加其他的略縮圖尺寸,就可以使用reGenerate Thumbnails Advanced新增想要的略縮圖尺寸,並且重新產生略縮圖。

reGenerate Thumbnails Advanced和【Regenerate Thumbnails】一樣,都是在重新產生略縮圖的時候,將主機內的圖片透過那些《將媒體庫連接到雲儲存的外掛》自動被上傳到S3。
但是reGenerate Thumbnails Advanced不太穩定,有時候主機裡的圖片上傳到S3儲存桶之後,會和ShortPixel一樣,媒體庫與文章列表中的小縮圖會變成空白或破圖。但是大家不用擔心,就和前面處理ShortPixel的做法一樣,先將reGenerate Thumbnails Advanced停用,再啟用【Regenerate Thumbnails】重新產生略縮圖就可以再次解決了。

雖然reGenerate Thumbnails Advanced可以創建新的自訂略縮圖,但是如果想要用來將主機內的舊圖片也上傳到S3儲存桶,它就沒那麼穩定,有時候媒體庫裡的小圖示還是會變成空白,但是有時候卻不會。
除非有特別需要創建新的略縮圖,否則,如果想要將主機內的圖片自動上傳到S3,還是使用Regenerate Thumbnails重新產生略縮圖會比較簡單。

建議的使用順序

在我目前使用過的外掛中,Regenerate Thumbnails、reGenerate Thumbnails Advanced以及ShortPixel,這三個外掛都能夠在啟用WP Offload Media Lite的前提下,將主機裡的舊圖片上傳到S3儲存桶,但是Regenerate Thumbnails才是最不會出錯的選擇。
除非有其他需求,否則會建議使用Regenerate Thumbnails就好。

主機內的舊圖片自訂略縮圖尺寸+上傳到S3儲存桶+壓縮圖片

因為Regenerate Thumbnails無法新增自訂的略縮圖尺寸,這時候就得靠reGenerate Thumbnails Advanced了。
反正最後的結果還是得派Regenerate Thumbnails來解決媒體庫小縮圖不顯示的問題,所以我測試過好幾種組合順序,歸納出以下的結論:

  1. 先在主機裡處理新增的自訂略縮圖
  2. 再將主機裡的圖片(包含新增的自訂略縮圖)上傳到S3
  3. 最後再壓縮S3儲存桶裡面的圖片

後面會有詳細的操作步驟

❶先在主機裡處理新增的自訂略縮圖

如果想要新增自訂的略縮圖,是可以靠reGenerate Thumbnails Advanced這個外掛。
但是如果在WP Offload Media Lite啟用的情況下,它似乎只對新上傳的圖片才能產生新增的自訂略縮圖,我試過對已經在S3儲存桶裡面的圖片似乎無效?

但若是將WP Offload Media Lite停用,那麼它就可以對主機裡面的舊圖片新增自訂的略縮圖。倘若停用WP Offload Media Lite,就會讓已經在S3儲存桶裡面的圖片在前台無法正常顯示…

後來我發現只要在ShortPixel外掛設定中的Advanced,將《Optimize media on upload》這個選項打勾,就能防止reGenerate Thumbnails Advanced在重新產生略縮圖的過程中,將主機內的舊圖片上傳到S3儲存桶!
雖然不知道為什麼,不過這確實有用。

《Optimize media on upload》在ShortPixel的設定中,是為了讓新上傳的圖片在上傳過程中同時壓縮。因為重新產生略縮圖並不是上傳新圖片,所以即使勾選開啟這個功能,也不會有任何圖片被壓縮。

也就是說,為了讓使用reGenerate Thumbnails Advanced新增的自訂略縮圖尺寸也能上傳到S3儲存桶,那就先在主機裡面完成《重新產生自訂略縮圖》的工作。
為了防止執行reGenerate Thumbnails Advanced的時候,主機裡的舊圖片被自動上傳到S3儲存桶,所以ShortPixel外掛設定中一定要記得勾選《Optimize media on upload》這個選項。
後面會有詳細的操作步驟

因為若是想要直接使用reGenerate Thumbnails Advanced對主機裡面的舊圖片新增自訂的略縮圖,並且把它們上傳到S3儲存桶裡面,不但會發生媒體庫列表的小縮圖變成空白的問題之外,通常在上傳到S3儲存桶裡面之後,也沒有因此產生那些新增的自訂略縮圖;除此之外,當圖片已經在S3儲存桶,也無法再使用reGenerate Thumbnails Advanced產生新的略縮圖尺寸。
所以,如果想要使用reGenerate Thumbnails Advanced產生新增的自訂略縮圖,如果圖片在主機裡面,那就先在主機裡面完成這個工作,會比較順利。

❷再將主機裡的圖片(包含新增的自訂略縮圖)上傳到S3

這時候主機裡的舊圖片已經產生新的自訂略縮圖,再使用Regenerate Thumbnails將這些主機裡的主圖+略縮圖一次上傳到S3儲存桶。 在Regenerate Thumbnails重新產生略縮圖的頁面中,有二個選項一定要勾選正確,否則一樣會發生媒體庫小縮圖無法正常顯示的問題!

☐Skip regenerating existing correctly sized thumbnails (faster).

✔Delete thumbnail files for old unregistered sizes in order to free up server space. This may result in broken images in your posts and pages.

  • 第一個取消打勾(不勾)☞無論略縮圖是否已經存在,都要重新產生,所以不勾
  • 第二個一定要打勾☞要刪除沒用的略縮圖,所以要打勾

請注意,在啟用Regenerate Thumbnails之前,請先將reGenerate Thumbnails Advanced停用,因為這二個都是重新產生略縮圖的外掛,同時啟用一定會發生錯誤!除此之外,ShortPixel也一併停用

❸壓縮S3儲存桶裡面的圖片

這時候主機裡的舊圖片(包含新增的自訂略縮圖)都被上傳到S3儲存桶了,這時候就可以正常使用ShortPixel去壓縮這些圖片。

請注意,在啟用ShortPixel壓縮圖片之前,請先將Regenerate Thumbnails停用,並且將reGenerate Thumbnails Advanced啟用。
因為已經使用reGenerate Thumbnails Advanced產生新的自訂略縮圖,如果沒有啟用reGenerate Thumbnails Advanced的話,那新的自訂略縮圖將不會被納入壓縮的名單中。
而Regenerate Thumbnails則是因為可能會與ShortPixel以及reGenerate Thumbnails Advanced產生衝突,所以也要先停用。

詳細操作步驟

STEP 1確認WP Offload Media Lite已啟用

STEP 2確認Regenerate Thumbnails已停用

STEP 3啟用reGenerate Thumbnails Advanced

STEP 4在reGenerate Thumbnails Advanced設定好需要的略縮圖尺寸

STEP 5啟用ShortPixel

STEP 6
前往ShortPixel/ShortPixel Plugin Settings/Advanced
打勾Optimize media on upload(Automatically optimize Media Library items after they are uploaded.)
這裡一定要記得打勾(請放心,因為接下來要做的不是上傳新圖片,所以不會有任何圖片被壓縮。)

STEP 7
到媒體庫列表中,在需要產生新的略縮圖的圖片下方點擊【Regenerate Thumbnails】。
因為在ShortPixel的設定中有勾選上傳時同時優化,所以這時候產生的新的略縮圖會出現在主機裡面,不會上傳到S3儲存桶。

STEP 8停用reGenerate Thumbnails Advanced

STEP 9停用ShortPixel

STEP 10啟用Regenerate Thumbnails

STEP 11
到媒體庫列表中,在需要上傳到S3儲存桶的主機裡的舊圖片下方點擊【Regenerate Thumbnails】。
接著會跳轉到【Regenerate Thumbnails】的頁面,以下二個選項一定要勾選正確,否則一樣會發生媒體庫小縮圖無法正常顯示的問題!
Skip regenerating existing correctly sized thumbnails (faster).
Delete thumbnail files for old unregistered sizes in order to free up server space.
第一個取消打勾(不勾)☞無論略縮圖是否已經存在,都要重新產生,所以不勾。
第二個一定要打勾☞要刪除沒用的略縮圖,所以要打勾 最後,點擊藍色按鈕《Regenerate Thumbnails》。

STEP 12
這時候主機裡的舊圖片(包含新增的自訂略縮圖)都會被上傳到S3儲存桶,媒體庫裡面的小縮圖也能正常顯示。
可以到S3儲存桶裡面檢查圖片,網址後綴與以往在主機裡一樣,只有前面的域名不同。
比如說,原本舊圖片在主機的路徑為wp-content/uploads/2018/10/image.jpg,就可以在S3儲存桶裡面的wp-content/uploads/2018/10/的資料夾裡面找到那組圖片。

STEP 13|停用Regenerate Thumbnails

STEP 14|啟用ShortPixel

STEP 15如果也想要壓縮新增的自訂略縮圖,請同時啟用reGenerate Thumbnails Advanced。

STEP 16到媒體庫列表中,在需要壓縮的圖片右方點擊藍色按鈕【Optimize Now】。

STEP 17 在S3儲存桶檢查,就能看到(包含新增的自訂略縮圖)都能正常被壓縮,因為是壓縮S3儲存桶裡面的圖片,所以媒體庫的小縮圖也能正常顯示。

其他情況

能否只壓縮主機裡的舊圖片,不上傳到S3?

Maintenance-Mode|網站維護模式外掛

如何使用ShortPixel壓縮主機裡的圖片,不需要將它們上傳到S3儲存桶?
在啟用WP Offload Media Lite的狀態下,主機裡的舊圖片無法直接用ShortPixel優化。
要嘛先暫時停用WP Offload Media Lite,但是S3儲存桶裡面的圖片會無法顯示;要嘛整個網站先開啟維護模式,但是訪客會無法瀏覽網站內容;要嘛將網站拉到Staging Site壓縮完再推送到Live Site,但是這個做法太大工程,而且會可能會影響購物網站的訂單。
即便各有難處,比較建議的做法還是將網站開啟維護模式;如果操作時間很短,暫時停用WP Offload Media Lite也是一個作法,大不了就是暫時性的S3儲存桶裡面的圖片無法正常顯示而已。
這裡有更詳細的說明

★延伸閱讀☞如何對S3儲存桶裡面的圖片重新產生略縮圖?

如何將主機裡的舊圖片也上傳到S3儲存桶的解套方式就介紹到這裡了!如果有任何問題,歡迎在下方的留言板討論指教囉~

好嘛好嘛…臨走前幫我拍拍手嘛
如果你願意免費幫助我,請在下方圓形按鈕幫我拍拍手,最多可以按5下,那就幫我按5下吧!算我求你啦啦啦~~~謝謝你、我愛你❤
臉書或Google帳號都可以快速登入喲…

facebook留言板|文章相關問題歡迎留言討論唷~
IMG_2349-miriammibao-100px

▍關於作者|MiriamMibao温唯

2019.02.11,我開始了這裡…
不懂css、不懂php,當然-也不知道誰是Nginx、誰又是Apache…
硬要WordPress架站,一切自己來,所有的細節,從0開始,自己架站會遇到的問題,遇到了才知道!這一路走來,跌跌撞撞,摸索過國內外能夠解決問題的資料…
是不是該好好紀錄這一段跌跌撞撞的探索日記?或許,也能帶給你們一些幫助...

咖啡贊助計畫

buy me a coffee-icon

我願意《將我所知道的一切,仔細地、真實地分享給你》
你願意《請我喝咖啡》嗎?
你的一杯咖啡,是我最溫暖的支持❤
用實際行動支持我創作更多好作品吧