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