ImageKit 圖片最佳化服務，為 WordPress 加入圖片壓縮和分流加速功能

前陣子在研究圖片最佳化（Image Optimization）服務，兼具加速分流的內容傳遞網路，對於網站管理者來說，如何將圖片容量變小、但又維持畫質不變確實是個很困難的問題，未來搜尋引擎 Google 會將「網站使用體驗核心指標」（Core Web Vitals）做為搜尋排序的參考因素之一，因此更需要重視網站載入速度。如果你的網站有不少圖片，可以開始研究要怎麼幫這些圖片瘦身減肥，讓訪客有更好的開啟速度，也能降低網頁伺服器的流量消耗。

以前我介紹過不少圖片壓縮工具，但需要在上傳圖片前先自行最佳化，如果你的網站已經營運一段時間，累積太多圖片，除了把它們全部下載下來進行壓縮，有更快、更簡單的方法就是透過圖片最佳化服務遠端即時處理。

簡單來說，這類服務都是直接以取代原有圖片鏈結方式運作，透過服務商提供的伺服器直接在遠端最佳化圖片（壓縮、增強或是調整尺寸大小），再將圖片以內容傳遞網路（CDN）分發出去，即可讓不同地區的訪客都獲得最快的圖片載入效果。

以前介紹過的 Jetpack 圖片 CDN 就提供這樣的功能，只可惜它會破壞圖片畫質，而且沒有快取失效時間，如果更新圖片就只能將圖片重新命名以取得新的結果。

本文要介紹的「ImageKit」是我近期新發現的圖片最佳化服務，它提供許多和圖片有關的遠端處理機制，包括製作略縮圖、回應式圖片、圖片壓縮、智慧型裁切工具、浮水印等等，也能以內容傳遞網路提供圖片分流和加速（Amazon CloudFront），更重要的是 ImageKit 可以快速和使用者使用的平台服務整合，像是 WordPress、Magento 和 Shopify 都有對應的程式。

當網站整合 ImageKit 服務後圖片就會自動透過遠端伺服器進行最佳化和壓縮，除了能讓訪客有更快、更流暢的圖片載入速度，對於使用網速較慢的行動裝置用戶也會很「有感」。相關設定都可在 ImageKit 服務端進行。

雖然 ImageKit 不是免費服務，但有提供免費方案，對於一些小網站來說還是很有幫助，免費方案可使用最多 20 GB 媒體庫容量，每月有 20 GB 網路流量，在請求數或圖片轉換次數方面沒有限制。若是需要更多的流量，價格從每月 $49 美元開始，流量可提升到 40 GB，在使用超過後每 20 GB 流量價格為 $9 美元，並可自訂網域名稱。

接下來我會教大家如何在 WordPress 使用 ImageKit 圖片最佳化服務。

ImageKit
https://imagekit.io/

使用教學

STEP 1

開啟 ImageKit 網站後先進行註冊，可以直接使用 Google 帳戶登入或是 Email。

註冊後會來到歡迎畫面，其中有個步驟是隨機給你一個「ImageKit ID」，可以修改成其他你想要的字串（註冊後無法更改），另外，還有「Region」選擇用來處理圖片的節點，會有美國、歐洲、新加坡和印度等資料中心選項，建議在這裡選擇新加坡。

STEP 2

進入 ImageKit 控制台會有一個教學畫面，簡單來說，就是先將現有「Origin」加入，將網址與 ImageKit 圖片路徑連結後就完成最基礎的操作。

首先，點選 ImageKit 左側選單的「External storage」，設定一個名稱，要注意的是這裡的第二個 Origin Type 需要選擇「Web Folder」（Magento、Shopify 或 WordPress 就選擇此選項），然後在 Base URL 輸入你的網站網址，例如 https://example.com/ 。

STEP 3

將外部空間新增後點選左側選單「URL endpoints」取得 ImageKit 預設網址。

STEP 4

返回使用者的 WordPress 控制台，先從「安裝外掛」功能搜尋 ImageKit 將官方開發、維護的外掛程式安裝到網站。

啟用外掛後從設定找到「ImageKit settings」設定頁面，將前一步驟取得的 URL endpoints 預設網址貼上，儲存後就完成最基礎的設定操作。

STEP 5

如果網站有使用快取（Cache）外掛，記得先將快取資料清除後才會看到效果。

在完成 ImageKit 與 WordPress 連結後圖片就會透過 ImageKit 伺服器最佳化、壓縮及分流加速，圖片路徑會變成 ImageKit 網址。從外掛設定頁面可調整要透過 ImageKit 進行處理的檔案類型（當然都是以圖片為主），也能自訂要壓縮、但是不在 WordPress 預設圖片路徑下的其他檔案。