本文翻譯自：https://web.dev/image-cdns
作者：Katie Hempenius
圖片內(nèi)容分發(fā)網(wǎng)絡(luò)（CDNs）在優(yōu)化圖片方面有著出色的表現(xiàn)。切換到一個圖片 CDN 上可以在圖片文件大小方面降低 40% - 80% 。理論上，可以只使用構(gòu)建腳本（build scripts）達(dá)到相同的作用，但是這在實踐中很少使用。
什么是圖片 CDN？
圖片 CDN 專注于圖片的轉(zhuǎn)化、優(yōu)化和傳輸。你可以將它們認(rèn)為是用于訪問和操作網(wǎng)站上圖片的 API。對于從圖片 CDN 加載出來的圖片，一個圖片 URL不僅代加載哪個圖片，也代表了圖片大小、格式和質(zhì)量，這樣就可以輕松地為不同的使用場景創(chuàng)造不同的圖像。
圖像 CDN 可以基于圖像URL中的參數(shù)來執(zhí)行轉(zhuǎn)化。
構(gòu)建時圖像優(yōu)化腳本（build-time image optimization scripts ）在需要時會創(chuàng)建新版本的圖片；因此，在如今個人客戶端高度定制化、差異化的場景下，圖片 CDN通常會表現(xiàn)的更好。
圖片 CDN 使用的圖片 URLs 中包含圖片的轉(zhuǎn)化、優(yōu)化重要的信息。不同的圖片 CDN 的URL 格式可能也會不一樣，但是也大同小異。我們來看一下他們最常見的特點。
圖片 CDN 可以使用你自己域名或直接適用圖片 CDN 的域名。第三方的圖片 CDNs 通常提供使用自定義域名的選項，但是通常需要付費。使用自己的域名可以讓后續(xù)轉(zhuǎn)化圖片更加方便，因為不需要更改 URL。
在上面使用圖片 CDN域名("example-cdn.com") 的例子中，我們使用了個人的二級域名，而不是直接自定義域名。
圖片 CDN 通?？梢耘渲米詣訌囊呀?jīng)存在的地址上獲取圖片。這個能力通常通過需要將已經(jīng)存在完整圖片的 URL 包含在在由圖片 CDN生成的 URL中。例如，你可以看到一個長得像這樣的 URL ：https://my-site.example-cdn.com/<https://flowers.com/daisy.jpg/quality=auto>. 這個 URL 通常會獲取和優(yōu)化存在于https://flowers.com/daisy.jpg的圖片。
另一種廣泛支持的將圖像上傳到圖像CDN的方法是，通過HTTP POST請求將它們發(fā)送到圖像CDN的API。
安全密鑰可以防止其他人使用你的圖片創(chuàng)建新版本。如果啟用該功能，每一個圖片都需要一個唯一的安全密鑰。如果沒有提供可用的安全密鑰，其他人是無法通過改變圖片 URL 來創(chuàng)建新的圖片版本；圖片 CDN 將負(fù)責(zé)處理生成和跟蹤安全密鑰的細(xì)節(jié)問題。
圖像CDN提供上百種不同的圖像變換， 這些轉(zhuǎn)換是通過 URL 字符串指定的，并且不限制同時使用多個轉(zhuǎn)換。 在考慮 Web 性能的時候，最重要的圖像轉(zhuǎn)換是大小、像素密度、格式和壓縮。 由于有了這些轉(zhuǎn)化，所以切換到圖像 CDN 以后通常通常會明顯降低圖片文件大小。
由于通常會有最佳的性能轉(zhuǎn)化設(shè)置，所以一些圖片CDN會支持“自動”模式。例如，您可以允許 CDN 自動選擇自動選擇提供最佳格式，而不是制定將圖像轉(zhuǎn)化為 WebP 格式。以下的信息會幫助圖片 CDN 選擇圖片的最佳轉(zhuǎn)化方式：
- 客戶端特點（例如，視口寬度，DPR和圖像寬度）
- User Agent 請求標(biāo)頭
- 網(wǎng)絡(luò)信息API
例如，對于 Edge 瀏覽器，圖片 CDN 會提供 JPEG XR 格式；對于Chrome瀏覽器，圖片CDN 會提供 WebP 格式；而對于非常舊的瀏覽器會提供JPEG 格式。由于圖片CDN在優(yōu)化圖片方面有著很強(qiáng)的優(yōu)勢和經(jīng)驗積累，所以自動設(shè)置很受歡迎，你無需為了適應(yīng)最新的技術(shù)而改變你代碼。
圖片 CDN 的種類
圖像CDN可以分為兩類：自我管理和第三方管理。
對于那些能夠輕松維護(hù)自己的基礎(chǔ)架構(gòu)的工程人員而言，自我管理的CDN可能是一個不錯的選擇。
Thumbor 是目前唯一各一個可用的自我管理的圖片CDN。雖然它是開源的并且可以免費使用，但它通常比大多數(shù)商業(yè)CDN的功能更少，并且其文檔有限。 Wikipedia, Square, 和 99designs，如果想使用 Thumbor，可以參閱 How to install the Thumbor image CDN
第三方圖像CDN以服務(wù)的形式提供圖像服務(wù)。 正如云提供商提供服務(wù)器和其他基礎(chǔ)設(shè)施并且收取一定費用，圖像CDN提供圖像優(yōu)化和傳輸，并且收取服務(wù)費用。 由于第三方映像CDN維護(hù)了底層技術(shù)，因此入門非常簡單，通?？梢栽?0-15分鐘內(nèi)完成，大型站點的完整遷移可能需要更長時間。
第三方圖像CDN通常根據(jù)使用級別定價，大多數(shù)圖像 CDN 提供免費套餐或免費試用，以便您有機(jī)會試用他們的產(chǎn)品。 眾所周知的第三方圖像 CDN 的示例包括Akamai圖像管理器，Cloudinary和imgix。
圖片 CDN 有很多選擇，有的功能多一些，有的功能少一些，但所有功能都可能會幫助您節(jié)省圖片流量，從而加快頁面加載速度。 除功能之外，選擇圖像CDN時需要考慮的其他因素包括成本、技術(shù)支持、文檔以及易于設(shè)置或遷移。
在做出決定之前，自己也應(yīng)該試用一些。 您可以在下面找到有關(guān)如何快速開始使用多個圖像CDN的說明的代碼。
