圖片內容傳遞網路 (CDN) 非常適合用於最佳化網頁圖片。將網站切換至圖片 CDN，可節省 40% 至 80% 的圖片檔案大小，而且在大多數情況下，圖片 CDN 的圖片最佳化效果優於建構時圖片最佳化指令碼。
什麼是圖片 CDN？
圖片 CDN 專門用於轉換、最佳化及提供圖片。您也可以將其視為 API，用於存取及操控網站上使用的圖片。如果是從圖片 CDN 載入的圖片，圖片網址不僅會指出要載入哪張圖片，還會指出大小、格式和品質等參數。這樣一來，您就能針對不同用途建立多種圖片。
圖片 CDN 與建構階段圖片最佳化指令碼不同，因為圖片 CDN 會視需要建立新版本的圖片。因此，相較於建構指令碼，CDN 通常更適合為個別用戶端建立高度自訂的映像檔。
圖片 CDN 如何使用網址指出最佳化選項
圖片 CDN 使用的圖片網址會傳達圖片的重要資訊，以及應套用的轉換和最佳化。網址格式會因使用的圖片 CDN 而異，但大致上都具有類似的功能。以下是一些最常見的功能。
來源
圖片 CDN 可以位於您自己的網域或圖片 CDN 的網域。第三方圖片 CDN 通常會提供付費使用自訂網域的選項。使用自己的網域，日後切換圖片 CDN 時會更輕鬆，因為不需要變更網址。
上述範例使用圖片 CDN 的網域 (「example-cdn.com」) 和個人化子網域，而非自訂網域。
圖片
圖片 CDN 通常可以設定為在需要時，自動從現有位置擷取圖片。這項功能通常是透過在圖片 CDN 產生的圖片網址中，加入現有圖片的完整網址來達成。舉例來說，您可能會看到類似以下的網址：https://my-site.example-cdn.com/https://flowers.com/daisy.jpg/quality=auto。這個網址會擷取並最佳化 https://flowers.com/daisy.jpg 的圖片。
要求的檔案格式 (範例中為 JPG) 可能與傳回的圖片檔案格式 (範例中為 WebP) 不同。content-type HTTP 標頭會告知瀏覽器網址的格式，以便瀏覽器適當處理網址。如果檔案儲存至磁碟，並由另一個預期格式與副檔名相符的程式使用，可能會造成混淆。
另一種廣泛支援的圖片上傳方式，是透過 HTTP POST 要求將圖片傳送至圖片 CDN 的 API。
安全金鑰
安全金鑰可防止他人建立新版圖片。啟用這項功能後，每個新版映像檔都需要專屬的安全金鑰。
如果有人嘗試變更圖片網址的參數，但未提供有效的安全金鑰，就無法建立新版本。圖片 CDN 會為您處理產生及追蹤安全金鑰的細節。
轉換
圖片 CDN 提供數十種 (有時甚至數百種) 不同的圖片轉換方式。這些轉換是在網址字串中指定，且同時使用多個轉換沒有任何限制。就網頁效能而言，最重要的圖片轉換是大小、像素密度、格式和壓縮。這些轉換是改用圖片 CDN 後，網站圖片檔案通常會變小的原因。
由於效能轉換通常有客觀的最佳設定，因此部分圖片 CDN 支援這些轉換的「自動」模式。舉例來說，您可以讓 CDN 自動選取並提供最佳格式，而不必指定將圖片轉換為 WebP 格式。圖片 CDN 可使用下列信號，判斷轉換圖片的最佳方式：
- 用戶端提示 (例如可視區域寬度、DPR 和圖片寬度)
Save-Data標頭- 使用者代理程式 要求標頭
- Network Information API
舉例來說，圖片 CDN 可能會向 Chrome 瀏覽器提供 AVIF、向 Edge 瀏覽器提供 WebP，以及向非常舊的瀏覽器提供 JPEG。自動設定很受歡迎，因為您可以利用圖片 CDN 的專業知識最佳化圖片，而不必在圖片 CDN 開始支援新技術時變更程式碼。
圖片 CDN 類型
圖片 CDN 主要分為兩大類：自行管理和第三方管理。
自行管理的圖片 CDN
如果網站的工程人員能自行維護基礎架構，則可選擇自行管理 CDN。
- Thumbor 是最熱門的自行管理圖片 CDN。這項服務是開放原始碼，可免費使用，但功能比大多數商業 CDN 少，說明文件也有限。使用 thumbor 的網站包括維基百科、Square 和 99designs。如需設定操作說明，請參閱「如何安裝 Thumbor 圖片 CDN」。
- 虛構
- Imagor
第三方圖片 CDN
第三方圖片 CDN 以服務形式提供圖片 CDN。就像雲端服務供應商提供伺服器和其他基礎架構，並收取費用一樣，圖片 CDN 也會提供圖片最佳化和傳遞服務，並收取費用。由於第三方圖片 CDN 會維護基礎技術，因此您通常可以很快開始使用，但大型網站的完整遷移作業可能需要較長時間。第三方圖片 CDN 通常會根據用量層級計費，大多數圖片 CDN 都會提供免費方案或免費試用，讓您試用產品。
選擇圖片 CDN
圖片 CDN 有許多不錯的選擇。有些工具的功能比其他工具多，但任何工具都能協助您節省圖片位元組，進而加快網頁載入速度。除了功能組合外，選擇圖片 CDN 時，還應考量成本、支援、說明文件，以及設定或遷移的難易度。
對 Largest Contentful Paint (LCP) 的影響
圖片是許多網站使用者體驗的重要部分，因此也是網站 Largest Contentful Paint 的重要因素。如果您決定使用圖片 CDN，請注意下列事項：
- CDN 提供的圖片可能來自跨源伺服器，這可能會增加網站的連線設定時間。請盡可能使用透過主要來源代理的圖片 CDN，這樣就不必新增額外來源供瀏覽器連線。這與在主要來源自行代管圖片的效果相同。
- 建議在 LCP 圖片元素上使用
"high"的fetchpriority屬性值，讓瀏覽器 盡快開始載入該圖片。 - 如果無法立即在初始 HTML 中偵測到圖片，建議對 LCP 候選圖片使用
rel=preload提示，讓瀏覽器能預先載入該圖片。 - 如果無法透過來源進行 Proxy，且瀏覽器在載入網頁後期才知道要載入哪張圖片，請盡早設定與跨源圖片 CDN 的連線，縮短潛在 LCP 候選圖片的資源載入階段。