身為一個部落客,擁有一個「穩定、快速、好管理、可備份」的圖床是一件必須的事,圖片絕對不允許「損毀、遺失,或無法正常瀏覽」,若圖片遺失了,多年的心血可能都沒了,所以挑選一個圖床空間是一件非常重要的事,如果沒有這方面的經驗,可以參考阿豪推薦的「Google Drive」,Google Drive 是一個雲端硬碟服務,相信大家對它不會太陌生,如何善用這個優質、穩定的服務,讓它變成圖床空間,就交給阿豪下面帶來的教學!
網站就能上傳圖片,為什麼不用?
許多部落格系統都支援「圖片上傳」,為什麼我們不直接傳到網站上,還要另外建立一個「圖床」呢?簡單來說,直接上傳網站不是不可行,但是你要非常確定你不會「離開那裡」,例如我的部落格建立在 Google Blogger 上,現在要搬家到 WordPress,遷移圖片就是一件很麻煩的事,一方面圖片可能會遺失,另一方面有圖片的分類可能就此被打亂!
不只搬家時可能遇到麻煩,如果使用個別圖床空間,我們還可以統一管理檔案,而且可以建立很完整、好辨識的目錄,比喻我可以依「文章」分類圖片,也可以依年、月、日分類圖片,若圖片直接上傳到網站空間,不使用圖床,可能就沒辦法這麼分辨,等網站久了,圖片就會變的非常的雜亂!
再者,直接將圖片上傳到網站,可能會受到嚴苛的「空間、流量」限制,也許圖片空間可以加購,但售價都不會太便宜,最厭惡的是無法加購空間,若遇到流量限制,當網站人氣提升,流量就會跟著提升,到時候可能被站方限制,造成圖片無法正常存取,因此釀成悲劇。
其實還有非常多的因素,雖然 Google Drive 也有空間限制,但免費就提供了 15GB 的空間,而且沒有流量限制,阿豪還會教您搭配免費圖片 CDN 服務加速圖片,就算您的 Google Drive 空間爆滿了,加購空間也是非常便宜的!
Google Drive 空間加購價
在選用 Google Drive 當圖床前,我們必須先瞭解空間的售價,雖然我們可能連免費 15GB 都用不完,但圖片的數量是會變多不會變少的,可能哪天就不知不覺的超過了 15GB,因此知道一下 Google Drive 的售價是件必須的事。
Google Drive 的售價在「雲端硬碟」市場算是「非常便宜」的,100GB 空間只需要 $1.99 美金一個月,1TB 空間只需要 $9.99 美金一個月,跟 Dropbox 100GB 每月 $15 美金比起來划算許多!
空間售價、升級連結:https://www.google.com/settings/storage
下圖為 Google Drive 空間售價,標價均為「美金」:
一、建立圖床專用資料夾
圖床的目錄「分類」是非常重要的,Google Drive 是一個雲端硬碟,所以我們只需要把圖床分成「一個目錄」,因為我們要在網路上分享,所以還要額外設定一下權限,不然圖片沒辦法外連,也沒辦法讓其他人看到。
1. 首先,我們先打開「Google 雲端硬碟」,然後點左上角的「建立」,在選「資料夾」,先在雲端硬碟建立一個資料夾,如果你沒用過 Google Drive,可以把它想成電腦上的硬碟,可以建立資料夾、檔案,我們現在要建立一個放圖片專用的資料夾。
2. 資料夾的名稱基本上我們看的懂就好,可以取「圖床專用」之類的詞,讓我們之後看到它就知道這是放圖片的。
3. 建立好資料夾後我們必須設定權限,大家才能看到它,圖片才可以外連,對剛剛建立的資料夾「點右鍵」,然後選擇「共用」下面的「共用」。
4. 點一下頁面中的「變更」修改資料夾的權限。
5. 選擇第一個「公開在網路上」然後點「儲存」就可以了。
6. 設定好之後我們點那個資料夾,然後看到「右邊」有一個「詳細資料」的標籤頁,點進去之後下面有一個「主機」項目,主機下面有一串網址,那串網址就是這個資料夾的網址,可以把這個網址放到瀏覽器的書籤列,之後我們會透過這串網址存取資料夾內的檔案。
7. 如果進去剛剛那串網址,可以看到像檔案目錄的列表,它會列出資料夾內的「資料夾」、「檔案」,而且只要把網址貼給別人,每個人都可以看到,如果你要讓別的資料夾也有那串網址,務必將權限調整成「公開在網路上」(同 3~5 設定)。
二、建構專屬的圖片分類目錄
1. 怎麼分類圖片是一件很重要的事,我們可以用「文章」來分類圖片,也可以用「日期」來分類圖片,如果你有多個部落格,還可以用「部落格」搭配「文章」或「日期」分類,分類的方式非常多樣,當然,如果你不喜歡用資料夾分類圖片,也可以用「檔案名稱分類圖片」,請參考下面的說明:
用文章分類:圖床資料夾 / 文章名稱或 ID / 圖片
例如:圖床資料夾 / post_6688 / img_001.png
用日期分類:圖床資料夾 / 年 / 月 / 日 / 圖片
例如:圖床資料夾 / 2014 / 07 / 21 / img_006.png
用網站搭配文章分類:圖床資料夾 / 網站名稱或網址 / 文章名稱或 ID / 圖片
例如:圖床資料夾 / 電腦王阿達 / post_8866 / img_62.png
日期搭配文章混搭:圖床資料夾 / 年 / 月 / 文章名稱或 ID / 圖片
例如:圖床資料夾 / 2014 / 07 / post_2948 / img_666.png
以上圖片路徑供大家參考,基本上我們可以用「文章」、「日期」、「網站」當分類條件,阿豪個人使用「網站 / 文章」的方式分類,而且必須注意,以上路徑除了「圖床資料夾」,其他皆會出現在網址路徑,所以建議資料夾跟檔案都不要用「中文命名」,盡可能都用「英文」搭配「底線」命名,比較好看且比較不容易造成錯誤。
參考方式一:直接使用文章分類
參考方式二:使用網站搭配文章分類
2. 決定架構後,必須知道我們怎麼瀏覽目錄跟找到圖片並取得圖片外連連結,比喻說我的圖片在「www.koc.com.tw/post-2/3.png」,我們必須先開啟「圖床資料夾的主機網址」,網址的部分上面有介紹,進去那個網址後,我們會看到所有資料夾跟檔案,阿豪必須先找到「post-2」下面的「3.png」這張圖片,所以就像平常在電腦上瀏覽硬碟一樣,一層一層開進去就可以找到檔案了。
3. 找到檔案之後,我們對檔案名稱點「右鍵」,然後複製連結網址,那串網址就是圖片的網址,可以插入到文章裡面,而且大家都可以看到,但是先別急著放到文章內,下面還會教大家如何套用「免費 CDN」來「加速圖片」。
三、套用免費 CDN 加速圖片載入
剛剛我們已經順利取得圖片網址了,雖然可以直接使用那個網址插入到文章內,但是 Google Drive 在讀取圖片的時候有時候會卡卡的,所以我們在套用上 CDN 把圖片快取到世界各地的伺服器。
比喻說圖網址是:
https://googledrive.com
/host/0B7NdwobQUlEaUEZtZHdOenBfM2s/5854/11.png
我們在最前面加上「i0.wp.com」加上之後會變:
https://i0.wp.com/googledrive.com
/host/0B7NdwobQUlEaUEZtZHdOenBfM2s/5854/11.png
這樣就套用上 Jetpack 的 Photon 免費圖片加速服務,瀏覽看看圖片真的會比較快,比較沒有卡卡的問題(只要使用WP平台就可以免費使用)。
如果複製到的網址類似 cc23632124a7bddfb12000fd131c6915f5512dd9.googledrive.com,請將前面 cc23632124a7bddfb12000fd131c6915f5512dd9長串刪除,再加上 CDN 前綴 i0.wp.com