經營WordPress網站一段時間,很多人都會遇到的問題,
網站圖片越來越多,不僅吃掉網站空間,更影響網站速度,除了先前分享的:圖片壓縮教學,圖片最佳化,可加快網站讀取速度。
這裡分享怎麼將WordPress網站圖片上傳到Digital Ocean圖床,更進一步減輕WordPress 網站空間。
Digital Ocean是付費服務,但非常便宜,雲端存儲250GB 一個月只要 5 美金,按量計費,我的網站用 Digital Ocean 當圖床後,加上上傳時的優化,幾千張照片根本用不到 1 GB,算下來一個月都不到1 元美金(台幣約30元)。加入會員開始使用,需要先儲值5美元,每月依照容量扣款,會用儲值的錢扣,舉例: 200多MB平均一個月扣1美元。
如果您網站圖片不多,就還不需要用到圖床,先用原本主機空間就可以了
圖片優化順序,節省空間,加快速度
1.圖片上傳前,可使用圖片處理軟體優化
Caesium 免費 Windows 圖片壓縮器,最多可減少 JPG、PNG 相片大小 90%!
2.已上傳的圖片,可使用圖片壓縮外掛優化
免費好用圖片壓縮,全中文操作簡單-reSmush it外掛
3.若圖片很多,可使用圖床,圖片上傳圖床空間
圖片上傳Digital Ocean圖床減輕網站空間
就是本篇文章,如果您網站圖片不多,就還不需要用到圖床,先用原本主機空間就可以了
什麼是圖床主機?
簡單來說,圖床就是專門用來存放圖片的空間。
你可能會想,為什麼要這麼麻煩?直接放在網站空間不就好了嗎?這是因為圖片佔用的空間和流量超乎想像!
空間限制: 主機商提供的網站空間有限,圖片太多容易爆滿。
流量超支: 圖片載入會消耗大量流量,影響網站主機效能。
速度變慢: 圖片過多會拖慢網站速度,影響使用者體驗。
為什麼網站圖片要上載到圖床?
當網站經營越久,圖片也越來越多,這時候整個網站資料都會變大,讀取速度就會變得很慢,如果網站載入太慢,網頁體驗都會被 Google 扣分,網站排名也會跟著下降。
這時候找個外部存儲空間讓網站圖片當圖床,使用外連而非占用網站空間,加快網站讀取速度,是網站經營長久的人都會進行優化的一個動作。
圖床的優點
釋放網站空間: 將圖片搬到圖床,釋放網站空間,減輕負擔。
節省流量費用: 圖床提供獨立流量,避免網站流量超支。
提升網站速度: 圖片載入速度更快,提升使用者體驗。
使用 Digital Ocean 當圖床的優點
Digital Ocean超便宜!!
DigitalOcean的主機,每月只要5美元,250GB超大儲存容量,加上1TB的大流量 (=1024G流量),相當的足夠。價格請點此,點選Storage,點選Object Storage
比較好的網站用VPS主機空間,因為給的主機規格很高,相對會比較貴,一分錢一分貨,若有大量的圖片占用主機空間,逼得您不得加購大容量儲存,會增加很多錢。把圖片上傳到專門給圖片用的空間,簡稱【圖床】,可有效減輕原本主機的容量與效能。
把網站全部圖片上傳到 Digital Ocean 後 檔案再大也不可能超過 250 GB,一個帳號可以添加到 100 個節點(網站),只收取合計性的費用,而且費用真的超級便宜,每個月幾乎花不到什麼錢。若您有多個網站也適用,節省網站空間的好幫手
註冊 Digital Ocean
先註冊 DigitalOcean 帳號,使用推薦連結註冊,可免費獲得 200 元美金,使用限制 60 天。
註冊完後在 Digital Ocean 操作介面中左邊的 API 創建 Generate New Key,這兩個框中的 Key 要先存好,接著我們要回到 WordPress 中下載外掛進行設定。



註冊好後登入後台
1.點選左邊Spaces Object Storage
2.點選上方Buckets
3.點選Create Space Bucket


選擇主機位置,自行考量,(我是選新加坡)
Enable CDN可勾選,會比較快
名稱可自行取名,我是輸入我的網域,方便辨認,
(建議用一槓 ” – “符號,例如:mxpx-tw ,不要用點” . “,據說用點”.” 比較會有問題,例如mxpx.tw。)
點選下方綠色按鈕,新增付款方式和Create a Space Bucket

輸入完資料
點選下方藍色按鈕,新增付款方式和Create a Space Bucket

點選上方返回 Back to Spaces Object Storage

點選Access Keys
點選Create Access Key

有兩種設定方法
第一種: 點選Full Access
自行取名稱,我是填寫網域名稱
建議用一槓符號 “-” (例如: mxpx-tw) ,用點符號 “.” 據說容易會有問題
點選Create Access Key

第二種:點選Limited Access
指定特定Buckets
設定權限: 預設只有Read讀取
可改成: 讀取Read/寫入Write/刪除Delete
自行取名稱,我是填寫網域名稱
建議用一槓符號 “-” (例如: mxpx-tw) ,用點符號 “.” 據說容易會有問題
點選Create Access Key

分別將兩組Key分別複製下來,準備要貼到WP Offload Media Lite外掛的設定中
複製Acess Key ID,點選右邊的複製按鈕
複製 srcret key,點選右邊的複製按鈕
可先找個地方儲存起來,例如: 儲存在電腦記事本裡、google Keep
注意:srcret key只會產生一次,之後再進去看不到了,要先另外儲存起來
安裝WP Offload Media Lite外掛
將之後的圖片自動上傳到Digital Ocean 空間
這個外掛是「之後」 在 WordPress 網站有圖片上傳時,會直接將圖片存在 Digital Ocean 空間,而不是你的網站主機空間。
到WordPress後台
下載安裝WP Offload Media Lite外掛
[設定]->[WP Offload Media]

選擇DigitalOcean Spaces
選擇I understand the risks but I’d like to store access keys in the database anyway (not recommended分別貼上剛剛的兩組Key
貼上Access Key ID
貼上Secret Access Key
點選Save & Continue


之後會到設定頁面,檢查一下有沒有要修改的設定
有一個選項,自動上傳圖片後,刪除網站主機中的圖片,
Remove Local Media
設定好後WP Offload Media Lite外掛,會自動運作,
把您之後的新增的圖片,自動上傳Digital Ocean 空間,
上傳完會刪除您網站主機的圖片,達到節省主機空間的目的
如果您是從痞客邦搬家到自架站,要記得打勾,這樣之後您運行痞客邦搬家時,把痞客邦的圖片搬過來您主機,此外掛會自動把圖片上傳到Digital Ocean 空間,刪除主機中的圖片,這樣就不會占用到網站主機空間。就算您圖片很多也不用怕會超過主機容量。因您原本的圖片都存在痞客邦,相當於有備份,就算搬家失敗,您圖片還在痞客邦有存檔,不會不見。如果因操作錯誤,搬家失敗,大不了再重新搬家一次。不用害怕嘗試。有問題可以諮詢客服。
設定完儲存
一般使用WP Offload Media Lite外掛免費版即可
點選Tool
可看到WP Offload Media Lite外掛升級版功能,
若您需要進階功能,可考慮升級
若將來您想將圖床的圖片下載回主機,需要用到進階版,有一鍵下載。
Easily Manage Local and Offloaded Media
Whether you need to offload a library of existing media items or return offloaded files back to your local server, there’s a tool for every job. Upgrade to any license of WP Offload Media to take advantage of these powerful tools today.
offload icon
Offload remaining media
download icon
Download files from bucket to server
remove from bucket icon
Remove all files from bucket
remove from server icon
Remove all files from server
stars iconUpgrade now
輕鬆管理本地和卸載媒體
無論您需要卸載現有媒體項目的庫還是將卸載的檔案傳回本機伺服器,每個作業都有一個工具。升級到 WP Offload Media 的任何許可證 今天就利用這些強大的工具。
卸載圖示
卸載剩餘媒體
下載圖示
將檔案從儲存桶下載到伺服器
從儲存桶圖示中刪除
從儲存桶中刪除所有檔案
從伺服器圖示中刪除
從伺服器中刪除所有檔案
安裝reGenerate Thumbnails Advanced 外掛
將之前的圖片上傳到Digital Ocean 空間
這個外掛是將「之前」 已經上傳在 WordPress 網站的圖片都傳到 Digital Ocean 去。
左方點選[外掛]->[安裝外掛]->[搜尋]reGenerate Thumbnails Advanced
reGenerate Thumbnails Advanced 外掛
安裝並啟用外掛
左方點選[工具]->[Regenerate Thumbnails]
原理:
利用reGenerate Thumbnails Advanced外掛將網站的圖片,
重新產生縮圖 = 視為新增圖片
前面設定好的WP Offload Media Lite外掛會自動將新圖片上傳到Digital Ocean

先到右半邊設定
右邊全部打勾
輸入100
點選Save Settings

左邊的按紐會變成藍綠色,點選[Regenerate]按鈕
開始將你之前存在網站主機中的圖上傳到Digital Ocean,等待它傳完就可以了。
傳完後,從媒體庫查看圖片,或網址變成連到Digital Ocean就代表成功囉。
接著回到 Digital Ocean 介面中的 Space,可以查看每個網站已使用的空間。
之後上傳的照片,靠 WP Offload Media Lite 這個外掛就可以了。如果不放心的話,在設定完之後第一次上傳圖片,可以再次查看圖片網址是不是有自動存在 Digital Ocean。
注意: 圖片上傳後,網站不會自動瘦身
圖片上傳後,會複製圖片上傳儲存在digital ocean空間,而您原本的圖片還儲存在網站中,還是佔主機容量,所以還不會瘦身。但是圖片顯示改用抓取digital ocean的雲端顯示,需要將存在網站中的圖片都刪除,網站才會瘦身。刪除前請先確認都已經備份過了喔~
新增圖片測試一下
在WordPress後台,發表文章,新增一張新圖片,
再到DigitalOcean Spaces來檢查一下,確認新圖片檔案會自動上傳,代表設定成功。
當WordPress將檔案刪除時,在DigitalOcean Spaces也會同步一併刪除,這是透過FTP所無法辦到的。
以上就是Digital Ocean圖床教學~
感謝閱讀~
—
圖片優化順序,節省空間,加快速度
1.圖片上傳前,可使用圖片處理軟體優化
Caesium 免費 Windows 圖片壓縮器,最多可減少 JPG、PNG 相片大小 90%!
2.已上傳的圖片,可使用圖片壓縮外掛優化
免費好用圖片壓縮,全中文操作簡單-reSmush it外掛
3.若圖片很多,可使用圖床,圖片上傳圖床空間
圖片上傳Digital Ocean圖床減輕網站空間
如果您網站圖片不多,就還不需要用到圖床,先用原本主機空間就可以了




