CDN 可以用來加速網站的存取速度, 是很重要的工具, 而對於需要加速的內容, 其實大多為影音素材或是圖片素材, 尤其圖片的使用量是相對多的.
圖文並茂的網站的確引人入勝, 但是如何能加速圖片等素材存取, 其實已有許多資料可以參考, 尤其像是著名的 cloudflare CDN服務, 不僅免費, 效能也非常好, 不過需要將 DNS 放在 cloudflare 上進行代管. 若不方便將 DNS 放到 cloudflare, 有什麼其他方式呢? 可以利用其他非 DNS 方式來取得內容的圖片CDN服務囉.
今天要介紹服務, 是類似之前介紹的 images.weserv.nl: https://diary.tw/archives/221 可以進行縮圖與快取外, 還有更多功能, 這個服務是 imgix: https://imgix.com/
除了提供 CDN 外, 還有大量的 API 可供應用, 更重要的也是有免費的版本, 免費版本與付費版本功能可以參考連結如下:
其中免費版本主要是提供兩個 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)
一共有三個人, 所以分別取出如下:
是不是十分方便呢? 對於需要大量影像處理、快取、剪裁等功能, 或需要進一步壓縮等提昇網站體驗, 都可以利用這個 imgix 服務所提供的強大功能來實現!