您可能已經熟悉內容傳遞網路 (CDN) 的核心概念：分散式、互連的伺服器網路，快速有效地將資產傳遞給使用者。將檔案上傳至 CDN 供應商時，系統會在全球 CDN 網路的其他節點上建立副本。當使用者要求檔案時，資料將由距離該使用者最近的節點傳送，以縮短延遲時間。CDN 的分散式性質在網路中斷或硬體故障時也提供備援功能，而負載平衡功能則可減少流量高峰。
image CDN 可以提供上述所有好處，但有一項主要差異：能夠根據用於存取圖片的網址的字串，轉換圖片內容並進行最佳化。
使用者會將高解析度的標準圖片上傳至供應商，然後產生用於存取圖片的網址：
https://res.cloudinary.com/demo/image/upload/sample.jpg
雖然所使用的確切語法因供應商而異，但至少所有的圖片 CDN 都可讓您更改來源映像檔的尺寸、編碼和壓縮設定。舉例來說，Cloudinary 會使用下列語法對已上傳的圖片執行動態大小調整：h_，後面接著數字高度 (以像素為單位)、w_ 再加上寬度，以及 c_ 值，可讓您指定如何縮放或裁剪圖片的詳細資訊。
如要套用任何數量的轉換作業，只要在檔案名稱和副檔名前面加上半形逗號分隔值即可，表示可以視需要透過要求該圖片的 img 元素的 src 操控上傳的圖片。
<img src="https://res.cloudinary.com/demo/image/upload/w_400/sample.jpg" alt="…">
使用者首次造訪含有這些轉換內容的網址時，系統會產生及傳送新版圖片，比例調整為 400 像素 (w_400)。接著，系統會將新建立的檔案快取至 CDN 中，將其傳送至要求相同網址的任何使用者，而非依需求重新建立。
雖然圖片 CDN 供應商提供的軟體開發套件有利於進階使用及整合各種技術堆疊，但光是這個可預測的網址模式，就能夠輕鬆將一個上傳的檔案轉換成有效的 srcset 屬性，而不必使用其他開發工具：
<img
src="https://res.cloudinary.com/demo/image/upload/w_1000/sample.jpg 1000w"
srcset="https://res.cloudinary.com/demo/image/upload/w_1000/sample.jpg 1000w,
https://res.cloudinary.com/demo/image/upload/w_800/sample.jpg 800w,
https://res.cloudinary.com/demo/image/upload/w_600/sample.jpg 600w"
alt="…">
我們可以使用常見的語法，手動指定想要的壓縮程度：q_ (「品質」的簡寫，後面加上壓縮等級的數值簡寫)：
<img src="https://res.cloudinary.com/demo/image/upload/w_400,q_60/sample.jpg" alt="…">
您需要手動加入這些資訊並不常見，但大部分的圖片 CDN 都提供一系列極為強大的功能：全自動壓縮、編碼和內容協商。
自動壓縮
運算能力影像 CDN 具備強大的處理能力，代表這些 CDN 能夠提供極為強大的功能：透過分析圖片內容，透過演算法判斷理想的壓縮層級和編碼設定，您或我也可以手動微調每張圖像的壓縮。
這些演算法會自動執行決策，在檔案大小和感知品質之間取得平衡，並據此分析圖片內容，以便找出降級的跡象，並據此微調壓縮設定。這通常意味著比起壓縮設定，使用一體適用的手動方法，檔案大小出現大幅縮減。
這個程序聽起來可能很複雜，實作起來會不太簡單：以 Cloudinary 來說，在圖片網址中加入 q_auto 會啟用這項功能：
<img src="https://res.cloudinary.com/demo/image/upload/w_1400/sample.jpg" alt="…">
<!-- 250 KB-->
<img src="https://res.cloudinary.com/demo/image/upload/w_1400,q_auto/sample.jpg" alt="…">
<!-- 134 KB-->
自動編碼和內容協商
收到圖片的要求後，圖片 CDN 會確定瀏覽器在透過瀏覽器傳送的 HTTP 標頭和資產的要求 (特別是 Accept 標頭) 中支援的最新編碼方式。此標頭表示瀏覽器能夠解讀的編碼。系統會使用與填入 <picture> 元素 <source> 中 type 屬性相同的媒體類型。
舉例來說，在資產網址的圖片轉換清單新增 f_auto 參數會明確指示 Cloudinary 提供瀏覽器能夠理解的最有效編碼：
<img src="https://res.cloudinary.com/demo/image/upload/w_1200,q_auto,f_auto/sample.jpg" alt="…">
然後，伺服器會產生採用該編碼的圖片版本，並快取結果，提供給所有後續使用相同瀏覽器層級的使用者。該回應包含 Content-Type 標頭，以便向瀏覽器明確告知檔案編碼 (無論副檔名為何)。即使使用新式瀏覽器的使用者向結尾為 .jpg 的檔案提出要求，該要求仍會附帶一個標頭，告知伺服器支援 AVIF，而伺服器會傳送 AVIF 編碼檔案以及明確指示，以將其視為 AVIF。
使用淨結果是一種程序，不僅使您建立替代編碼檔案並手動微調壓縮設定 (或維護為您執行這些工作的系統)，而且不需要使用 <picture> 和 type 屬性來有效地將這些檔案提供給使用者。因此，只使用 srcset 和 sizes 語法仍可為使用者提供經過編碼的圖片。舉例來說，使用 AVIF 後，使用者仍可改用 WebP 格式，如果只使用 WebP，也可改回使用 JPEG-2000。
使用 Image CDN 的缺點比技術層面更勝一籌，因為它們是成本高昂。雖然圖片 CDN 提供功能完善的免費方案供個人使用，但產生圖片素材資源需要的頻寬和儲存空間、在伺服器上處理圖片來轉換圖片，以及快取轉換結果的額外空間，因此無論是進階用量還是高流量應用程式，都可能需要付費方案。