imgix 推出網站圖片處理工具免費方案,每月 1000 張圖片配額無流量限制



imgix 推出網站圖片處理工具免費方案,每月 1000 張圖片配額無流量限制imgix 推出網站圖片處理工具免費方案,每月 1000 張圖片配額無流量限制

前陣子我在研究將免費資源網路社群的圖片容量變小,以加速讀者載入網站時間,也減少主機造成的網路流量消耗,當圖片數量一多,很難以手動方式去處理以前的圖片,尤其是不同時期使用不同的圖片格式和解析度,最安全的方法就是透過第三方圖片處理工具直接在雲端進行壓縮(也不會破壞到原始圖片),例如 WordPress 外掛 Jetpack 提供免費圖片 CDN,開啟後會自動替換網站原有的圖片路徑,ImageKit 和 statically.io 也是同類型服務。

本文要介紹「imgix」是知名的線上圖片處理服務,近期官方部落格宣布全新的定價策略,其中就有真正永久免費的免費方案,使用者可加入兩個來源(Sources)、最多 1,000 張原始圖片處理額度,沒有流量限制,亦可無限制轉換,無需設定信用卡資料。

imgix 免費方案imgix 免費方案

imgix 免費方案具有完整存取圖片渲染 API 權限、自動圖片最佳化、全新圖片管理工具(Image Manager)、全球 CDN 等等,無論是個人網站或專案計畫都能在購買前測試 imgix 以確認能否滿足需求,目的是為了消除圖片成本的不確定性(這類服務定價都相當高),在需要更高規格方案時也可快速切換升級,服務定價分為月付和年繳價格,年繳有兩個月的免費折扣。

不過 imgix 有個經常被網友提及的問題就是沒有官方 WordPress 外掛(官方建議使用第三方外掛 Media Cloud),這對使用者來說會多一點技術上的門檻,還好現在大多數快取(Cache)外掛都有提供自訂 CDN 路徑功能,只要將 imgix Subdomain 設定為圖片路徑就能取得圖片處理服務帶來的各種好處,包括自適應圖片、更快的頁面載入速度及 SEO。

imgix
https://imgix.com/

使用教學

STEP 1

開啟 imgix 網站點選「Sign Up」註冊帳號,註冊時填入 Email、姓名會進入第二個畫面,在這裡需要設定一個組織名稱,網址和電話可以選填,勾選同意使用條款後完成註冊。

imgix 免費方案imgix 免費方案

接著到 Email 信箱收信、點選信中的確認鏈結,回到 imgix 要求設定一組密碼(或是使用 Google 帳號登入),進入 imgix 控制台主畫面就完成註冊免費方案的流程。

imgix 免費方案imgix 免費方案

STEP 2

第一次使用時點選「Add a Source」新增一個新的來源,這個來源就是指你的圖片空間,可以是 Amazon S3、Google Cloud Storage、Microsoft Azure Storage 或是一般伺服器,在這裡我使用 WordPress 自架站的圖片加速為例,選擇「Web Folder」做為圖片儲存方式。

第一個步驟先設定一個要使用的 imgix.net 子網域名稱,稍後要做為新的圖片路徑使用,選擇圖片儲存方式後會在最下方詢問使用者的「圖片路徑」,就直接輸入你的 WordPress 網址即可。

imgix 免費方案imgix 免費方案

STEP 3

返回 imgix 控制台首頁,等待狀態變成「Deployed」就表示已經完成部署。

imgix 免費方案imgix 免費方案

不過在此之前,先點選 Configuration 右上角「編輯」進入設定選項,從選項裡可以看到你的網站路徑、imgix 提供的圖片路徑(imgix Domain),也可以新增其他路徑或自訂網域名稱。

簡單來說,imgix 會讓 imgix Domain 對應到你的網站網址,透過 imgix 路徑顯示圖片就能在遠端進行裁切、壓縮或是最佳化等操作,也不會影響到使用者的原始圖片資料。

imgix 免費方案imgix 免費方案

STEP 4

在設定頁面往下捲動,有個「Default Parameters」(預設參數)選項,我習慣在這裡加入 auto 數值,然後在選項後面接上 compress, enhance 兩個參數自動對圖片壓縮、加強效果。

當然這裡可自訂的參數非常多,也能在圖片路徑後面加上參數來單獨對特定圖片進行編輯。

imgix 免費方案imgix 免費方案

STEP 5

設定就緒後回到 WordPress 控制台,接下來我們要將網站上的圖片路徑替換為 imgix。

一般常見的快取外掛像是 Breeze、WP Rocket 都有內建 CDN 選項,可以自動將網站圖片路徑以其他網址取代,除了快取外掛也能使用 imgix 官方建議的第三方外掛 Media Cloud,不過相較之下功能較多,可能程式部分就會稍嫌龐大一些。

雖然是圖片 CDN 但不僅限於圖片格式,如果遇到 JavaScript 或 CSS 也是可以提供分流加速,但為了讓原始檔案處理額度可以用在真正需要處理的圖片上,還是盡可能限制只讓圖片使用 imgix 進行分流。

imgix 免費方案imgix 免費方案

從 WordPress 前台查看圖片路徑,會看到已經從原本網址替換為 imgix 網址,這也表示圖片將會在遠端自動化壓縮處理,圖片部分也不會佔用到原始伺服器流量,讓網站載入速度更快,使用者也能更快看到圖片,這就是 imgix 最基本的功能。

imgix 免費方案imgix 免費方案

STEP 6

imgix 控制台會顯示目前使用的圖片額度、總渲染次數、使用的網路流量、請求數和平均回應時間等等。依照說明,imgix 只有針對圖片數量進行限制,除非在少數極端使用情況下,應該都能維持使用免費方案(若是超出限制,imgix 會主動聯絡通知用戶升級以找出最適合的方案計劃)。

imgix 免費方案imgix 免費方案

值得一試的三個理由:

  1. imgix 推出永久免費的免費方案,最多 1,000 張原始圖片處理額度
  2. 無需搬移或編輯原始圖片,最佳化工作會在雲端進行
  3. WordPress 使用者可透過外掛 CDN 功能替換圖片路徑

Ten articles before and after

Hami Video 退租取消會員教學,避免忘記退訂被自動續約扣款

不續費虛擬主機?WordPress.com 對應個人網域每年 13 美元搬家超划算

BePTT 最簡潔的 Ptt 瀏覽器,在手機也能使用大部分 BBS 功能

MeowPtt 快又省電的 Ptt 瀏覽器,沒有登入帳號也可瀏覽內容

PTT 批踢踢實業坊開放註冊!申請帳號、手機認證 AOTP 步驟教學

Jetpack 免費 CDN 自動加速分流 WordPress 圖片外掛教學

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

statically.io 免費 CDN 提供網站加速和圖片最佳化功能,無流量速度限制

PS4 遊戲保存資料移轉到 PS5 教學,使用 USB 外接硬碟傳送存檔

Cloudflare 免費 CDN、DNS 設定教學,加速網站防惡意攻擊