您可能已熟悉內容傳遞網路 (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 常用於 針對個人用途提供功能完善的免費方案;產生圖片素材資源需要頻寬和儲存空間,才能上傳、處理 伺服器,用於轉換圖片,以及用於快取轉換結果的額外空間。因此,進階使用與高流量應用程式可能需要付費方案。