為什麼要使用圖片 CDN?
圖片內容傳遞聯播網 (CDN) 很適合用來將圖片最佳化。改用圖片 CDN 可以省下 40% 至 80% 的圖片檔大小。理論上,只使用建構指令碼可以達到相同的結果,但實際使用時很少見。
什麼是圖片 CDN?
Image CDN 專門用於轉換、最佳化和傳送圖片。您也可以將其視為 API,用於存取及操控網站上使用的圖片。如果是從圖片 CDN 載入的圖片,圖片網址不僅可指出要載入的圖片,還能指出大小、格式和品質等參數。如此一來,就能針對不同用途輕鬆建立圖片變化版本。
Image CDN 與建構階段的圖片最佳化指令碼不同,因為 Image CDN 能在需要時建立新的映像檔版本。因此,與建構指令碼相比,CDN 通常較適合針對每位個別客戶建立高度自訂的映像檔。
圖片 CDN 如何使用網址指出最佳化選項
圖片 CDN 使用的圖片網址可傳達圖片的重要資訊,以及應套用的轉換和最佳化設定。網址格式因圖片 CDN 而異,但整體來說,網址都具備類似的功能。以下介紹一些最常見的功能。
來源
圖片 CDN 可以位於您自己的網域或圖片 CDN 的網域上。第三方圖片 CDN 通常能讓您付費使用自訂網域。只要使用自己的網域,日後就能更輕鬆地切換圖片 CDN,因為不需變更網址。
上述範例將圖片 CDN 的網域 (「example-cdn.com」) 與個人化子網域搭配使用,而非自訂網域。
圖片
您通常可以將 Image CDN 設定為在需要時自動從其現有位置擷取圖片。這項功能通常透過將現有圖片的完整網址加入圖片 CDN 所產生的圖片網址中。舉例來說,您可能會看到類似 https://my-site.example-cdn.com/https://flowers.com/daisy.jpg/quality=auto
的網址。這個網址會擷取及最佳化 https://flowers.com/daisy.jpg
中的圖片。
將圖片上傳至圖片 CDN 的另一個支援度廣泛,則是透過 HTTP POST 要求,傳送到圖片 CDN 的 API。
安全金鑰
安全金鑰可防止他人建立新的映像檔版本。這項功能啟用後,每個映像檔的新版本都需要專屬的安全金鑰。如果有人嘗試變更圖片網址的參數,但未提供有效的安全金鑰,你將無法建立新版本。映像檔 CDN 會為您產生及追蹤安全金鑰的詳細資料。
轉換
圖片 CDN 提供 10 部,有時則是進行數百種不同的圖片轉換。這些轉換是透過網址字串指定,使用多重轉換時沒有限制。就網頁效能而言,最重要的圖片轉換是大小、像素密度、格式和壓縮。這些轉換是為何在改用圖片 CDN 時,圖片大小通常會大幅縮小。
通常為精準的轉換設定是客觀的最佳設定,因此有些圖片 CDN 針對這些轉換支援「自動」模式。舉例來說,您可以讓 CDN 自動選取並提供最佳格式,而不需要將圖片轉換成 WebP 格式。圖片 CDN 可透過信號判斷轉換圖片的最佳方式,包括:
- 用戶端提示 (例如可視區域寬度、DPR 和圖片寬度)
Save-Data
標頭- User-Agent 要求標頭
- Network Information API
舉例來說,圖片 CDN 可能會將 AVIF 放送至 Chrome 瀏覽器、將 WebP 傳送至 Edge 瀏覽器,並將 JPEG 提供給極舊的瀏覽器。自動設定是很常見的功能,因為您可以利用 Image CDN 獲得最佳化圖片所需的豐富專業知識,無須在映像檔 CDN 支援後變更程式碼來採用新技術。
映像檔 CDN 類型
Image CDN 可分為兩類:自行管理和第三方管理。
自行管理的映像檔 CDN
對於工程人員願意願意維護自身基礎架構的網站來說,自行管理的 CDN 是不錯的選擇。
- Thumbor 是最受歡迎的自行管理映像檔 CDN。雖然這項資源是開放原始碼且可免費使用,但功能通常少於多數商用 CDN,而且能使用的功能有限。Wikipedia、Square 和 99designs 是使用「Thumbor」的三個網站。如需設定操作說明,請參閱如何安裝 Thumbor 圖片 CDN 貼文。
- 虛構
- 動畫
第三方圖片 CDN
第三方映像檔 CDN 則提供圖片 CDN 服務。如同雲端服務供應商提供伺服器和其他基礎架構一樣,映像檔 CDN 也提供付費的映像檔最佳化和傳遞服務。由於第三方圖片 CDN 負責維護基礎技術,因此剛開始時很容易上手,通常可在 10 到 15 分鐘內完成,不過大型網站的完整遷移作業可能需要更長的時間。第三方圖片 CDN 通常按照用量層級計價,大部分的映像檔 CDN 都提供免費方案或免費試用期,讓您有機會試用他們產品。
選擇映像檔 CDN
圖片 CDN 提供許多良好的選項。某些功能比較少,但所有功能都可能節省圖片的位元組,進而加快網頁載入速度。除了功能集外,在選擇映像檔 CDN 時,還要考量的其他因素包括成本、支援、說明文件,以及設定或遷移作業的難易度。
先試用這些原則再做出決定,也可能很有幫助。以下程式碼研究室提供操作說明,瞭解如何快速開始使用多個圖片 CDN。
對最大內容繪製 (LCP) 的影響
圖片是許多網站使用者體驗中不可或缺的一環,因此當最大內容繪製時,圖片也會據此評估網站的成效。決定使用圖片 CDN 時,請注意下列事項:
- 透過 CDN 放送的圖片可能來自跨來源伺服器,因此需要額外的連線設定時間。請盡可能嘗試使用透過主要來源進行 Proxy 的圖片 CDN,避免加入其他來源供瀏覽器連線。這和主要來源上的自行託管映像檔的效果相同。
- 建議在 LCP 圖片元素上使用
fetchpriority
屬性值,"high"
,以便瀏覽器盡快開始載入該圖片。 - 如果無法在初始 HTML 中立即找到圖片,建議您為 LCP 候選圖片使用
rel=preload
提示,以便瀏覽器預先載入圖片。 - 如果無法透過來源進行 Proxy,而且載入網頁稍後才會知道要載入的確切圖片,您應盡早設定與跨來源圖片 CDN 的連線,以縮短您網頁 LCP 候選圖片的資源載入階段。
圖片 CDN 是不可或缺的工具,可以省去手動最佳化圖片的麻煩,因此應考慮使用。儘管如此,仍需要考慮權衡利弊,並留意網站的 LCP 候選圖片,並視需要添加提示,有助於降低這些關鍵要求造成的任何延遲。