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

Jeremy Wagner
Katie Hempenius
Katie Hempenius
X
Barry Pollard

圖像內容傳遞網路 (CDN) 非常適合用來將圖片最佳化 在網路上。將網站改為圖片 CDN 可帶來 圖片省下 40% 至 80% 而且在大多數情況下，圖片最佳化作業會比 建構時間映像檔最佳化指令碼

什麼是圖片 CDN？

Image CDN 專門用來轉換、最佳化及傳送圖片。個人中心 可想成是 API，可用來存取及操控 如果圖片是從圖片 CDN 載入，圖片網址會指出 選擇要載入的圖片，同時也會提供大小、格式和品質等參數 可讓您根據不同用途建立圖片變化版本。

顯示圖片 CDN 和用戶端之間的要求/回應流程。尺寸和格式等參數可用來要求同一張圖片的不同版本。
圖片 CDN 可根據圖片網址參數執行的轉換範例。

Image CDN 與建構期間映像檔最佳化指令碼不同，兩者 視需要建立新的映像檔版本因此，CDN 通常會 較適合建立專為個別人士量身打造的圖片 而非建構指令碼

圖片 CDN 如何使用網址來指出最佳化選項

圖片 CDN 使用的圖片網址傳達圖片的重要資訊， 應該套用轉換和最佳化設定網址格式 會因使用的圖片 CDN 而異，但整體而言，這些映像檔 類似功能以下列舉幾個最常用的功能。

圖片網址通常包含下列元件：來源、圖片、安全金鑰和轉換。
圖片 CDN 中的圖片網址基本部分。

來源

Image CDN 可以存在於您自己的網域或圖片 CDN 的網域上。 第三方圖片 CDN 通常可讓您選擇使用自訂網域， 手續費。使用自己的網域能方便您日後切換圖片 CDN，因為 因此無須變更網址。

上一個範例使用映像檔 CDN 的網域 (「example-cdn.com」)， 個人化子網域，而非自訂網域。

圖片

通常，Image CDN 可以設定為自動從 視需要刪除現有位置這項功能通常以 包括現有圖片的完整網址 編碼器-解碼器架構舉例來說，您可能會看到一個類似這樣的網址 如下所示：https://my-site.example-cdn.com/https://flowers.com/daisy.jpg/quality=auto。 這個網址會擷取 https://flowers.com/daisy.jpg 中的圖片並進行最佳化。

所請求的檔案格式 (範例為 JPG) 可能與 傳回的圖片檔格式 (在本例中為 WebP)。content-type HTTP 標頭可告知瀏覽器所用的網址格式，以便處理網址 才是正確的做法這可能會造成混淆，因為檔案會儲存至磁碟，並用於 其他預期格式與副檔名相符的程式。

將圖片上傳至圖片 CDN 的另一種支援方法 傳入圖片 CDN 的 API。

安全金鑰

安全金鑰可防止他人建立新版本的映像檔。 啟用這項功能後，所有新版映像檔都需要專屬的 安全金鑰。

如果有人嘗試變更圖片網址的參數， 未提供有效的安全金鑰，因此無法建立新的安全金鑰 版本。圖片 CDN 會妥善處理生成和追蹤作業 以及安全金鑰

轉換

Image CDN 提供數張，有時甚至數百個不同的映像檔 轉換。這些轉換是在網址字串中指定，且 同時使用多項轉換並無限制。 對於網頁效能，最重要的圖片轉換效果是大小、像素 例如密度、格式和壓縮這些轉換就是 改用圖片 CDN 通常會縮小網站的圖片檔。

因為通常這類設定最能達到目標的成效 轉換，部分圖片 CDN 支援「自動」都 轉換。舉例來說，與其指定轉換圖片 設為 WebP 格式，則可讓 CDN 自動選取和放送 最佳格式。圖片 CDN 可以判斷轉換圖片的最佳方式 包含下列信號：

例如，圖片 CDN 可能會向 Chrome 瀏覽器提供 AVIF，WebP 至 Edge JPEG 檔案轉換為非常舊的瀏覽器自動設定相當熱門，原因是這些設定 還包含 Image CDN在沒有 Google Cloud 服務的情況下 不需要變更程式碼，在映像檔 CDN 啟動時採用新技術 為他們提供其他支援

圖片 CDN 類型

影像 CDN 有兩種主要類別：自行管理和 以及第三方管理

自行管理的映像檔 CDN

對於工程人員有以下技術性的網站，自行管理的 CDN 是不錯的選擇 瞭解如何持續維護基礎架構

第三方圖片 CDN

第三方圖片 CDN 提供圖片 CDN 服務。如同 雲端服務供應商提供伺服器和其他基礎架構付費、映像檔 CDN 付費提供圖片最佳化和交付功能因為第三方的圖片 CDN 保有其基礎技術，您通常可以一開始就 只是想完成將大型網站遷移作業 更久。第三方圖片 CDN 通常是根據用量層級計費， 大多數 Image CDN 提供免費版或免費試用期 他們的產品。

選擇映像檔 CDN

圖片 CDN 有許多不錯的選擇。某些功能多的功能 但其中任何一個方法都能節省圖片位元組，進而在載入圖片時載入 加快網頁載入速度除了功能集以外，您在選擇 Image CDN 包含成本、支援和說明文件，而且易於設定或遷移。

對 Largest Contentful Paint (LCP) 的影響

圖片是許多網站使用者體驗不可或缺的一環， 計算網站的最大內容繪製的重要因素。以下 決定使用圖片 CDN 時，請注意下列事項：

  • CDN 提供的圖片可以來自跨來源伺服器 縮短網站的連線設定時間。在可能的情況下，請嘗試使用圖片。 透過主要來源 Proxy 的 CDN，因此並未新增額外來源 供瀏覽器連線這和自行託管圖片的效果相同 再透過主要來源傳送
  • 建議將 fetchpriority 屬性值設為 "high" 優先載入圖片，因此瀏覽器很快就會開始載入該圖片
  • 如果圖片無法立即顯示在初始 HTML 中，可以考慮使用 rel=preload LCP 候選人圖片的提示，以便瀏覽器 讓應用程式從可以最快做出回應的位置 回應使用者要求
  • 如果無法透過來源 Proxy，瀏覽器會不知道哪個圖片 等到網頁載入後 盡早設定連至跨來源映像檔 CDN 的連線 縮短潛在 LCP 候選圖片的資源載入階段。