如何將主機內的舊圖片透過外掛上傳到S3儲存桶+ShortPixel優化？

內容更新於 — 2023-06-17 22:19

這是一個關於WordPress媒體庫圖片分別儲存在主機以及Amazon S3儲存桶的苦主，卻想要使用WP Offload Media Lite外掛免費將主機裡的舊圖片重新產生新增的自訂略縮圖之後上傳到S3儲存桶，再使用ShortPixel外掛壓縮圖片的故事。

這篇文章要討論的工具與外掛包含：

• Amazon S3儲存桶（雲儲存，以下簡稱S3儲存桶）
• ‧WP Offload Media Lite（將媒體庫連接雲儲存的外掛）
• ‧ShortPixel（圖片壓縮與優化外掛）
• ‧Regenerate Thumbnails（重新產生略縮圖的外掛）
• ‧reGenerate Thumbnails Advanced（重新產生略縮圖的外掛）

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

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

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

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

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

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

• ShortPixel（圖片壓縮與優化外掛）
• Regenerate Thumbnails（重新產生略縮圖的外掛）
• reGenerate Thumbnails Advanced（重新產生略縮圖的外掛）

我目前試過這三個圖片相關的外掛，都可以免費完成這件事情。雖然這並不是這些外掛的原意，但是我猜可能是因為它們所做的工作，剛好可以觸發那些《將媒體庫連接到雲儲存的外掛》認為這是一個《上傳新圖片》或者是《處理媒體庫圖片》的事件，於是便把那些透過這三個外掛處理過的主機裡的舊圖片認定為《新圖片》，進而將它們上傳到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.｜刪除沒用的略縮圖。

第一項取消打勾（不勾）☞無論略縮圖是否已經存在，都要重新產生，所以不勾。
第二項一定要打勾（要勾）☞要刪除沒用的略縮圖，所以要打勾。
最後，點擊藍色按鈕《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?

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

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

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