免Jetpack外掛！讓外部圖床也可使用WordPress官方Photon圖片CDN與即時裁切圖片

　　使用WordPress的朋友，對於Jetpack外掛應該不感陌生，這隻由WordPress官方所推出的外掛，而裡面有各式各樣強大的功能外，最吸引梅干的則是Photon功能，而這一個是什麼東西呢?其實它就是將放在媒體庫中照片，提供一個CDN的服務，當網頁中的圖片被讀取後，就會自動將圖片進行快取，當下位訪客再瀏覽網頁時，網頁中的照片就會直接Photon CDN 來提供圖片，不但能降低網站的流量，甚至圖片開啟的速度更快。

但要啟用WordPress Photon CDN這服務，需將圖片放在媒體庫中才行，但有不少朋友，應該和梅干一樣，會將WordPress中的圖片放置在其它的圖床主機中，除了分散流量外，再來就是當要搬家時也比較輕量，因此梅干要來分享個小技巧，即便將圖床放置在外部，一樣可使用WordPress官方的所提供的CDN服務，甚至官方提供這個圖片CDN除了暫存圖片外，甚至還支援圖片裁切與縮放的功能，相當的佛心喔！

---

WordPress Photon CDN

---

Step1
以梅問題教學網中的圖片，則是放置在日本的機房中，因此在載入時，約134毫秒。

---

Step2
當要套用WordPress圖片的CDN，只需https://i0.wp.com/圖片完整路徑(i0～i2可用)，當第一次載入完畢才會快取，快取完畢再重整，這時會發現到圖片載入的時間變成68毫秒，立即快了一倍。

---

Step3
分別可看到，當圖片透過WordPress CND時，圖片格式會自動轉成wepb並HIT快取。

---

Step4
若要將圖片縮放，只需在照片後方加入?w=數值，這時照片立即就會等比縮放並快取。

---

Step5
若要裁切圖片，則在後方加?resize=寬%2C高，這時圖片就會依照所提供的進行居中裁切。

---

Step6
另外還有一個很特別的參數叫作fit，而這一個fit會依照你所提供的參數，取目前的最小值，並縮小照片，而用法與resize一樣，長寬中間則需用%2C隔開。

---

因此這時只需修改佈景中的圖片路徑，將圖片前方再加入WordPress圖片CDN的網址，立即就可套用，同時還支援圖片縮放，這對於製作RWD網頁時，是件相當方便的事，同時也有助於網頁在Google Web Speed跑分，讓網站中的照片載入時檔案更小、速度快速。