分類
好用軟體

好用方便又免費的影像處理與CDN服務-imgix

CDN 可以用來加速網站的存取速度, 是很重要的工具, 而對於需要加速的內容, 其實大多為影音素材或是圖片素材, 尤其圖片的使用量是相對多的.

圖文並茂的網站的確引人入勝, 但是如何能加速圖片等素材存取, 其實已有許多資料可以參考, 尤其像是著名的 cloudflare CDN服務, 不僅免費, 效能也非常好, 不過需要將 DNS 放在 cloudflare 上進行代管. 若不方便將 DNS 放到 cloudflare, 有什麼其他方式呢? 可以利用其他非 DNS 方式來取得內容的圖片CDN服務囉.

今天要介紹服務, 是類似之前介紹的 images.weserv.nl: https://diary.tw/archives/221 可以進行縮圖與快取外, 還有更多功能, 這個服務是 imgix: https://imgix.com/

除了提供 CDN 外, 還有大量的 API 可供應用, 更重要的也是有免費的版本, 免費版本與付費版本功能可以參考連結如下:

https://imgix.com/pricing

其中免費版本主要是提供兩個 source, 並且月用量的圖片素材數限制為1000組(其實已經非常多了), 再加上附加的 CDN流量, 已足夠一般網站應用了呢. 相關的教學介紹可以先參考這篇文章:

imgix 推出網站圖片處理工具免費方案,每月 1000 張圖片配額無流量限制 https://free.com.tw/imgix-free-plan/

這裡再介紹進一步的應用, 像是人臉的功能, 我們以這張圖為例:

(圖片來源為 xframe.io 圖庫: https://xframe.io/photos/65601, 可以參考這篇來加入免費會員: https://diary.tw/archives/2022)

上面的圖片網址已是由 imgix 設定完成後的CDN取出, 網址為:

https://diary.imgix.net/65601.jpg?w=800

而其中的 w=800 即為指定輸出為寬度 800px, 原始圖片尺寸連結:

https://diary.imgix.net/65601.jpg

我們要將人臉部分輸出, 指定尺寸為 300×300, 連結如下:

https://diary.imgix.net/65601.jpg?w=300&h=300&fit=facearea

就可以利用這個服務將人臉部分取出, 詳細參考可參考這裡:

https://docs.imgix.com/apis/rendering/size/fit#facearea

若覺得需要加入更多範圍, 讓臉不要這麼大, 可以加入 facepad參數如(原始為 1):

https://diary.imgix.net/65601.jpg?w=300&h=300&fit=facearea&facepad=2

而多人場景時, 可以利用 faceindex 來指定個別人臉, 如這張圖:

(圖片來源為 xframe.io 圖庫: https://xframe.io/photos/30337, 可以參考這篇來加入免費會員: https://diary.tw/archives/2022)

一共有三個人, 所以分別取出如下:

https://diary.imgix.net/30337.jpg?w=300&h=300&fit=facearea&facepad=2&faceindex=1
https://diary.imgix.net/30337.jpg?w=300&h=300&fit=facearea&facepad=2&faceindex=2
https://diary.imgix.net/30337.jpg?w=300&h=300&fit=facearea&facepad=2&faceindex=3

是不是十分方便呢? 對於需要大量影像處理、快取、剪裁等功能, 或需要進一步壓縮等提昇網站體驗, 都可以利用這個 imgix 服務所提供的強大功能來實現!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。