頁面加載性能之使用圖片CDN

什麼是圖片CDN？

與傳統CDN的區別在於，它是專門爲圖片作優化的，一般包含縮放、格式轉換等。你能夠把它當作是一個API，經過傳入尺寸、質量、格式等參數，獲取到對應的圖片內容。這也使得咱們在使用上很是方便，適用於多種不一樣的場景。

圖片CDN不一樣於構建腳本，它不須要提早建立出多種不一樣格式的圖片。和構建腳本相比，圖片CDN更適合大量的圖片場景，而非固定數量的圖片，好比你的站點是爲攝影愛好者服務，用戶上傳的圖片，就可使用圖片CDN了。

圖片CDN的通用URL格式

不一樣的圖片CDN會有不一樣的URL格式，但其基本功能基本一致，大體能夠用下圖來描述：

源（Origin）

圖片CDN能夠用你本身的域名，固然通常也會提供免費的通用域名。最好仍是使用本身的域名，這樣從此若是要更換CDN服務商，也不用去修改URL地址了。

圖片名（Image）

一般也會使用完整的URL地址做爲圖片名稱，如：https://my-site.example-cdn.com/https://flowers.com/daisy.jpg/quality=auto，這個URL地址會去獲取並優化原地址的圖片 https://flowers.com/daisy.jpg。

固然你也能夠經過調用API直接將圖片上傳到CDN服務器。

安全碼（Security key）

主要爲了防止惡意用戶任意修改參數，保證連接的惟一性。圖片CDN也會幫你去跟蹤這些惡意用戶。

轉換（Transformations）

圖片CDN會提供十種、甚至百種不一樣的圖片轉換方式，這些轉換條件都定義在URL的GET參數裏，多種方式同時使用也是能夠的。通用的有大小、尺寸、格式和壓縮比。

有些圖片CDN會提供自動模式，能夠自動選擇最優的轉換，好比這個瀏覽器支持WebP，則自動轉換成WebP格式，通常會判斷如下的條件：

• 客戶端指標（viewport寬度、DPR、圖片寬）
• Save-Data 請求頭
• User-Agent 請求頭
• Network Information API

若是你的網絡不是很流暢，圖片CDN會自動調整返回的圖片大小。

圖片CDN分類

通常分爲兩類：自營和第三方託管

自營CDN

對於定製本身的技術架構的開發者而言，是個不錯的選擇。

Thumbor 是目前惟一一個自營的圖片CDN，開源並且免費，但功能相比於一些商業化的圖片CDN要少一些，文檔也有限。 Wikipedia、Square 和 99designs這三個網站目前使用的是 Thumbor。詳細安裝過程能夠參考：https://web.dev/install-thumbor 。

第三方圖片CDN

通常都是雲服務，收費，但功能強大，這些也都是商業機密，非開源，對接也很方便。通常都是明碼標價，也會提供免費試用。

如何選擇圖片CDN？

看自身的狀況，若是不須要那些高級功能，自營的CDN就能夠了，若是錢足夠，選擇第三方是合適的，由於你沒有那麼多精力去維護這個。

總結

圖片CDN功能強大，能夠幫咱們更好的管理圖片和展現，相比於構建腳本，它能夠服務於用戶上傳的圖片，適用於後臺對圖片的管理。對開發者而言，存儲成本、帶寬成本都能節省一大筆。對用戶而言，體驗也是定製化的，很是不錯的性能提高。

參考

• https://web.dev/image-cdns/
• https://developer.mozilla.org...
• https://developer.mozilla.org...