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

Jeremy Wagner
Katie Hempenius
Katie Hempenius
X
Barry Pollard

圖片內容傳遞聯播網 (CDN) 很適合用來將網路圖片最佳化。從網站改用圖片 CDN 可以省下 40 至 80% 的圖片檔大小，而且在大多數情況下，圖片最佳化的效果比建構階段的圖片最佳化指令碼更好。

什麼是圖片 CDN？

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

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

映像檔 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 標頭會告知瀏覽器目前的網址格式，以便正確處理網址。如果檔案已儲存至磁碟，且可供其他預期格式符合副檔名的程式使用，這可能會造成混淆。

將圖片上傳至映像檔 CDN 的另一個支援度廣泛，則是透過 HTTP POST 要求，將圖片傳送至圖片 CDN 的 API。

安全金鑰

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

如果有人嘗試變更圖片網址的參數，但未提供有效的安全金鑰，就無法建立新版本。映像檔 CDN 會為您產生及追蹤安全金鑰的詳細資料。

轉換

映像檔 CDN 提供 10，有時則提供數百種不同的圖片轉換作業。這些轉換是在網址字串中指定，使用多重轉換時沒有限制。以網頁效能來說，最重要的圖片轉換是大小、像素密度、格式和壓縮。這類轉換通常是改用圖片 CDN 的原因，通常會使網站的圖片檔縮小。

由於一般而言，效能轉換的設定是客觀的最佳設定，因此某些圖片 CDN 針對這些轉換作業支援「自動」模式。舉例來說，您不必指定將圖片轉換為 WebP 格式，而是可讓 CDN 自動選取並提供最佳格式。圖片 CDN 可利用下列信號等信號，判斷轉換圖片的最佳方式：

例如，圖片 CDN 可能會將 AVIF 提供給 Chrome 瀏覽器、將 WebP 傳送至 Edge 瀏覽器，以及將 JPEG 提供給非常舊的瀏覽器。自動設定相當常見，因為您可以利用映像檔 CDN 的專業知識將圖片最佳化，而無須在映像檔 CDN 開始支援新技術時變更程式碼，就能採用新技術。

映像檔 CDN 類型

映像檔 CDN 主要分為兩種類別：自行管理和第三方代管。

自行管理的映像檔 CDN

若是工程人員願意願意維護自己的基礎架構，自行管理的 CDN 可能是個不錯的選擇。

第三方圖片 CDN

第三方映像檔 CDN 則提供圖片 CDN 服務。如同雲端服務供應商提供伺服器和其他基礎架構的收費方式，映像檔 CDN 也提供付費的映像檔最佳化和傳遞服務。由於第三方圖片 CDN 負責維護基礎技術，因此您通常可以快速開始使用其中一種技術，不過大型網站的完整遷移作業可能需要更長的時間。第三方映像檔 CDN 通常按照用量層級計價，大部分映像檔 CDN 都提供免費方案或免費試用期，讓您試用自家產品。

選擇映像檔 CDN

圖片 CDN 提供許多良好的選項。某些功能較多，但任一功能都能協助您節省圖片的位元組數，加快網頁載入速度。除了功能集之外，選擇映像檔 CDN 時也要考慮的其他因素包括成本、支援、說明文件，以及設定或遷移作業的難易度。

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

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

  • 從 CDN 提供的圖片可以來自跨來源伺服器，因此可能會增加網站連線設定的時間。如果可以，請嘗試使用透過主要來源進行 Proxy 的圖片 CDN，以便新增額外的來源供瀏覽器連線。這與主要來源上的自行託管映像檔的效果相同。
  • 建議您在 LCP 圖片元素上使用 fetchpriority 屬性值 ("high")，以便瀏覽器盡快開始載入該圖片。
  • 如果無法在初始 HTML 中立即找到圖片，建議您為 LCP 候選圖片使用 rel=preload 提示，以便瀏覽器事先載入該圖片。
  • 如果您無法透過來源 Proxy，而且瀏覽器會在頁面稍後載入才知道要載入哪個圖片，請盡快設定與跨來源圖片 CDN 的連線，縮短可能的 LCP 候選圖片的資源載入階段。