使用映像檔 CDN 最佳化映像檔

Jeremy Wagner
Katie Hempenius
Katie Hempenius
X
Barry Pollard

為什麼要使用圖片 CDN？

圖片內容傳遞聯播網 (CDN) 很適合用來將圖片最佳化。改用圖片 CDN 可以省下 40% 至 80% 的圖片檔大小。理論上，只使用建構指令碼可以達到相同的結果，但實際使用時很少見。

什麼是圖片 CDN？

Image CDN 專門用於轉換、最佳化和傳送圖片。您也可以將其視為 API，用於存取及操控網站上使用的圖片。如果是從圖片 CDN 載入的圖片，圖片網址不僅可指出要載入的圖片，還能指出大小、格式和品質等參數。如此一來，就能針對不同用途輕鬆建立圖片變化版本。

顯示圖片 CDN 和用戶端之間的要求/回應流程。大小和格式等參數可用於要求同一張圖片的不同版本。
圖片 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 可透過信號判斷轉換圖片的最佳方式，包括：

舉例來說，圖片 CDN 可能會將 AVIF 放送至 Chrome 瀏覽器、將 WebP 傳送至 Edge 瀏覽器，並將 JPEG 提供給極舊的瀏覽器。自動設定是很常見的功能，因為您可以利用 Image CDN 獲得最佳化圖片所需的豐富專業知識，無須在映像檔 CDN 支援後變更程式碼來採用新技術。

映像檔 CDN 類型

Image CDN 可分為兩類：自行管理和第三方管理。

自行管理的映像檔 CDN

對於工程人員願意願意維護自身基礎架構的網站來說，自行管理的 CDN 是不錯的選擇。

第三方圖片 CDN

第三方映像檔 CDN 則提供圖片 CDN 服務。如同雲端服務供應商提供伺服器和其他基礎架構一樣，映像檔 CDN 也提供付費的映像檔最佳化和傳遞服務。由於第三方圖片 CDN 負責維護基礎技術，因此剛開始時很容易上手，通常可在 10 到 15 分鐘內完成，不過大型網站的完整遷移作業可能需要更長的時間。第三方圖片 CDN 通常按照用量層級計價，大部分的映像檔 CDN 都提供免費方案或免費試用期，讓您有機會試用他們產品。

選擇映像檔 CDN

圖片 CDN 提供許多良好的選項。某些功能比較少，但所有功能都可能節省圖片的位元組，進而加快網頁載入速度。除了功能集外，在選擇映像檔 CDN 時，還要考量的其他因素包括成本、支援、說明文件，以及設定或遷移作業的難易度。

先試用這些原則再做出決定，也可能很有幫助。以下程式碼研究室提供操作說明，瞭解如何快速開始使用多個圖片 CDN。

對最大內容繪製 (LCP) 的影響

圖片是許多網站使用者體驗中不可或缺的一環，因此當最大內容繪製時，圖片也會據此評估網站的成效。決定使用圖片 CDN 時，請注意下列事項：

  1. 透過 CDN 放送的圖片可能來自跨來源伺服器，因此需要額外的連線設定時間。請盡可能嘗試使用透過主要來源進行 Proxy 的圖片 CDN，避免加入其他來源供瀏覽器連線。這和主要來源上的自行託管映像檔的效果相同。
  2. 建議在 LCP 圖片元素上使用 fetchpriority 屬性值，"high"，以便瀏覽器盡快開始載入該圖片。
  3. 如果無法在初始 HTML 中立即找到圖片，建議您為 LCP 候選圖片使用 rel=preload 提示，以便瀏覽器預先載入圖片。
  4. 如果無法透過來源進行 Proxy，而且載入網頁稍後才會知道要載入的確切圖片，您應盡早設定與跨來源圖片 CDN 的連線，以縮短您網頁 LCP 候選圖片的資源載入階段。

圖片 CDN 是不可或缺的工具，可以省去手動最佳化圖片的麻煩，因此應考慮使用。儘管如此，仍需要考慮權衡利弊，並留意網站的 LCP 候選圖片，並視需要添加提示，有助於降低這些關鍵要求造成的任何延遲。