圖片內容傳遞聯播網

您可能已熟悉內容傳遞網路 (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。

CDN 使用者介面。

如此一來,您不僅能建立替代編碼檔案,以及手動微調壓縮設定,網路結果就能派上用場 (或維護負責代您執行這些工作的系統),但不必使用 <picture>type 屬性,就能有效 將檔案傳送給使用者因此,如果只使用 srcsetsizes 語法,仍可為使用者提供採用以下編碼格式的圖片:AVIF、 改回使用 WebP (如果只有 Safari,則為 JPEG-2000),反而會改回使用最合理的傳統編碼。

使用圖片 CDN 的缺點比技術層面更重要,其中的主要成本在於成本。雖然圖片 CDN 常用於 針對個人用途提供功能完善的免費方案;產生圖片素材資源需要頻寬和儲存空間,才能上傳、處理 伺服器,用於轉換圖片,以及用於快取轉換結果的額外空間。因此,進階使用與高流量應用程式可能需要付費方案。