本文翻译自：https://web.dev/image-cdns
作者：Katie Hempenius
图片内容分发网络（CDNs）在优化图片方面有着出色的表现。切换到一个图片 CDN 上可以在图片文件大小方面降低 40% - 80% 。理论上，可以只使用构建脚本（build scripts）达到相同的作用，但是这在实践中很少使用。
什么是图片 CDN？
图片 CDN 专注于图片的转化、优化和传输。你可以将它们认为是用于访问和操作网站上图片的 API。对于从图片 CDN 加载出来的图片，一个图片 URL不仅代加载哪个图片，也代表了图片大小、格式和质量，这样就可以轻松地为不同的使用场景创造不同的图像。
图像 CDN 可以基于图像URL中的参数来执行转化。
构建时图像优化脚本（build-time image optimization scripts ）在需要时会创建新版本的图片；因此，在如今个人客户端高度定制化、差异化的场景下，图片 CDN通常会表现的更好。
图片 CDN 使用的图片 URLs 中包含图片的转化、优化重要的信息。不同的图片 CDN 的URL 格式可能也会不一样，但是也大同小异。我们来看一下他们最常见的特点。
图片 CDN 可以使用你自己域名或直接适用图片 CDN 的域名。第三方的图片 CDNs 通常提供使用自定义域名的选项，但是通常需要付费。使用自己的域名可以让后续转化图片更加方便，因为不需要更改 URL。
在上面使用图片 CDN域名("example-cdn.com") 的例子中，我们使用了个人的二级域名，而不是直接自定义域名。
图片 CDN 通常可以配置自动从已经存在的地址上获取图片。这个能力通常通过需要将已经存在完整图片的 URL 包含在在由图片 CDN生成的 URL中。例如，你可以看到一个长得像这样的 URL ：https://my-site.example-cdn.com/<https://flowers.com/daisy.jpg/quality=auto>. 这个 URL 通常会获取和优化存在于https://flowers.com/daisy.jpg的图片。
另一种广泛支持的将图像上传到图像CDN的方法是，通过HTTP POST请求将它们发送到图像CDN的API。
安全密钥可以防止其他人使用你的图片创建新版本。如果启用该功能，每一个图片都需要一个唯一的安全密钥。如果没有提供可用的安全密钥，其他人是无法通过改变图片 URL 来创建新的图片版本；图片 CDN 将负责处理生成和跟踪安全密钥的细节问题。
图像CDN提供上百种不同的图像变换， 这些转换是通过 URL 字符串指定的，并且不限制同时使用多个转换。 在考虑 Web 性能的时候，最重要的图像转换是大小、像素密度、格式和压缩。 由于有了这些转化，所以切换到图像 CDN 以后通常通常会明显降低图片文件大小。
由于通常会有最佳的性能转化设置，所以一些图片CDN会支持“自动”模式。例如，您可以允许 CDN 自动选择自动选择提供最佳格式，而不是制定将图像转化为 WebP 格式。以下的信息会帮助图片 CDN 选择图片的最佳转化方式：
- 客户端特点（例如，视口宽度，DPR和图像宽度）
- User Agent 请求标头
- 网络信息API
例如，对于 Edge 浏览器，图片 CDN 会提供 JPEG XR 格式；对于Chrome浏览器，图片CDN 会提供 WebP 格式；而对于非常旧的浏览器会提供JPEG 格式。由于图片CDN在优化图片方面有着很强的优势和经验积累，所以自动设置很受欢迎，你无需为了适应最新的技术而改变你代码。
图片 CDN 的种类
图像CDN可以分为两类：自我管理和第三方管理。
对于那些能够轻松维护自己的基础架构的工程人员而言，自我管理的CDN可能是一个不错的选择。
Thumbor 是目前唯一各一个可用的自我管理的图片CDN。虽然它是开源的并且可以免费使用，但它通常比大多数商业CDN的功能更少，并且其文档有限。 Wikipedia, Square, 和 99designs，如果想使用 Thumbor，可以参阅 How to install the Thumbor image CDN
第三方图像CDN以服务的形式提供图像服务。 正如云提供商提供服务器和其他基础设施并且收取一定费用，图像CDN提供图像优化和传输，并且收取服务费用。 由于第三方映像CDN维护了底层技术，因此入门非常简单，通常可以在10-15分钟内完成，大型站点的完整迁移可能需要更长时间。
第三方图像CDN通常根据使用级别定价，大多数图像 CDN 提供免费套餐或免费试用，以便您有机会试用他们的产品。 众所周知的第三方图像 CDN 的示例包括Akamai图像管理器，Cloudinary和imgix。
图片 CDN 有很多选择，有的功能多一些，有的功能少一些，但所有功能都可能会帮助您节省图片流量，从而加快页面加载速度。 除功能之外，选择图像CDN时需要考虑的其他因素包括成本、技术支持、文档以及易于设置或迁移。
在做出决定之前，自己也应该试用一些。 您可以在下面找到有关如何快速开始使用多个图像CDN的说明的代码。
网友评论