您可能已熟悉內容傳遞網路 (CDN) 的核心概念：分散式但互連的網路 可以快速有效地將資產提供給使用者。如果檔案上傳至 CDN 供應商，系統會建立副本 讓全球 CDN 網路的其他節點運作當使用者要求檔案時，節點會按地理位置傳送資料 最接近該使用者的位置，進而縮短延遲時間CDN 的分散式性質也能在網路中斷或網路中斷時提供備援機制 硬體故障和負載平衡功能 來減少流量激增的情況
圖片 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="…">
不過，由於 Google 提供一系列強大功能，因此在極少數的情況下，您必須手動加入這些資訊 ，由大部分圖片 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 標頭。此標頭指出瀏覽器能夠理解的編碼 (使用同樣的
用來填入 type 的媒體類型
<picture> 元素 <source> 的屬性。
舉例來說，如果在素材資源網址的圖片轉換清單中加入 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 (如果只有 Safari，則為 JPEG-2000)，反而會改回使用最合理的傳統編碼。
使用圖片 CDN 的缺點比技術層面更重要，其中的主要成本在於成本。雖然圖片 CDN 常用於 針對個人用途提供功能完善的免費方案；產生圖片素材資源需要頻寬和儲存空間，才能上傳、處理 伺服器，用於轉換圖片，以及用於快取轉換結果的額外空間。因此，進階使用與高流量應用程式可能需要付費方案。