共计 1398 个字符，预计需要花费 4 分钟才能阅读完成。
什么是图片 CDN？
与传统 CDN 的区别在于，它是专门为图片做优化的，通常蕴含缩放、格局转换等。你能够把它看成是一个 API，通过传入尺寸、品质、格局等参数，获取到对应的图片内容。这也使得咱们在应用上十分不便，实用于多种不同的场景。
图片 CDN 不同于构建脚本，它不须要提前创立出多种不同格局的图片。和构建脚本相比，图片 CDN 更适宜大量的图片场景，而非固定数量的图片，比方你的站点是为摄影爱好者服务，用户上传的图片，就能够应用图片 CDN 了。
图片 CDN 的通用 URL 格局
不同的图片 CDN 会有不同的 URL 格局，但其基本功能基本一致，大抵能够用下图来形容：
源（Origin）
图片 CDN 能够用你本人的域名，当然个别也会提供收费的通用域名。最好还是应用本人的域名，这样今后如果要更换 CDN 服务商，也不必去批改 URL 地址了。
图片名（Image）
通常也会应用残缺的 URL 地址作为图片名称，如：https://my-site.example-cdn.com/https://flowers.com/daisy.jpg/quality=auto，这个 URL 地址会去获取并优化原地址的图片 https://flowers.com/daisy.jpg。
当然你也能够通过调用 API 间接将图片上传到 CDN 服务器。
平安码（Security key）
次要为了避免歹意用户任意批改参数，保障链接的唯一性。图片 CDN 也会帮你去跟踪这些歹意用户。
转换（Transformations）
图片 CDN 会提供十种、甚至百种不同的图片转换形式，这些转换条件都定义在 URL 的 GET 参数里，多种形式同时应用也是能够的。通用的有大小、尺寸、格局和压缩比。
有些图片 CDN 会提供主动模式，能够主动抉择最优的转换，比方这个浏览器反对 WebP，则主动转换成 WebP 格局，个别会判断以下的条件：
- 客户端指标（viewport 宽度、DPR、图片宽）
- Save-Data 申请头
- User-Agent 申请头
- Network Information API
如果你的网络不是很晦涩，图片 CDN 会主动调整返回的图片大小。
图片 CDN 分类
个别分为两类：自营和第三方托管
自营 CDN
对于定制本人的技术架构的开发者而言，是个不错的抉择。
Thumbor 是目前惟一一个自营的图片 CDN，开源而且收费，但性能相比于一些商业化的图片 CDN 要少一些，文档也无限。Wikipedia、Square 和 99designs 这三个网站目前应用的是 Thumbor。具体装置过程能够参考：https://web.dev/install-thumbor。
第三方图片 CDN
个别都是云服务，免费，但功能强大，这些也都是商业秘密，非开源，对接也很不便。个别都是明码标价，也会提供收费试用。
如何抉择图片 CDN？
看本身的状况，如果不须要那些高级性能，自营的 CDN 就能够了，如果钱足够，抉择第三方是适合的，因为你没有那么多精力去保护这个。
总结
图片 CDN 功能强大，能够帮咱们更好的治理图片和展现，相比于构建脚本，它能够服务于用户上传的图片，实用于后盾对图片的治理。对开发者而言，存储老本、带宽老本都能节俭一大笔。对用户而言，体验也是定制化的，十分不错的性能晋升。
参考
- https://web.dev/image-cdns/
- https://developer.mozilla.org…
- https://developer.mozilla.org…