图像优化
图像通常是网页中最重要的组成部分。优化网站上的图像对于改善用户体验、降低内容交付成本和增强搜索引擎优化至关重要。
概览
无论是字节数还是从 HTTP 请求的数量来看，图像通常都是网页中最重要的组成部分。优化网站上的图像对于改善用户体验、降低交付成本和提高您在搜索引擎排名中的位置至关重要。例如，谷歌搜索排名算法中的“最大内容绘制”指标在很大程度上受到您对网站上的图像的优化程度影响。
架构决策
根据您在成本、灵活性和性能方面的要求，可以通过多种方式构建图像优化解决方案。在构建图像优化解决方案时，您需要做出以下技术决定：
- 需要进行哪些图像转换？ 是格式化、调整大小、裁剪之类吗
- 我们在哪里决定对特定的图像请求应用哪种转换？ 在客户端的前端（静态、响应式设计等）、服务器端（基于设备之类的请求内容）还是两者兼而有之？
- 我们在哪里进行转换？ 在中心位置还是以分布式方式？
- 我们何时执行转换？ 每次都进行还是我们短时存储转换后的图像？ 它是同步执行还是异步执行？
要做出的另一个重要决定是，您是想使用 AWS 服务构建解决方案，还是要购买第三方托管解决方案。
常见使用案例
基于 CloudFront、S3 和 Lambda 的客户管理型解决方案
图像优化的最常见使用案例根据用户浏览器功能自动设置格式，并允许前端调整图像大小。诸如 Next.JS 之类的流行 Web 开发框架提供响应式图像组件，这些组件可以根据设备视口自动选择图像大小。下图说明了这种常见使用案例的推荐架构：
- 用户向采用特定转换（例如，编码和大小）的图像发送 HTTP 请求。转换在 URL 中编码，更确切地说是作为查询参数。示例 URL 如下所示：https://exmaples.com/images/cats/mycat.jpg?format=webp&width=200。
- 请求由附近的 CloudFront 边缘站点处理，可提供最佳性能。在向上游传递请求之前，对查看器请求事件执行 CloudFront 函数以重写请求 URL。CloudFront Functions 是 CloudFront 的一项功能，它允许您使用 JavaScript 编写轻量级函数，以进行大规模的对延迟敏感的 CDN 自定义。在我们的架构中，我们重写 URL 以验证请求的转换，并通过排列转换顺序对 URL 进行标准化，然后将其转换为小写以提高缓存命中率。当请求自动转换时，该函数还会决定最适合应用哪种转换。例如，如果用户使用 format=auto 指令要求最优化的图像格式（JPEG、WebP 或 AVIF），则 CloudFront 函数将根据请求中存在的 Accept 标头选择最佳格式。
- 如果请求的图像已经缓存在 CloudFront 中，则缓存将被命中，并且图像将从 CloudFront 缓存中返回。为了提高缓存命中率，我们启用了 Origin Shield，这是 CloudFront 的一项功能，可在源服务器之前充当额外的缓存层，以进一步减轻请求负担。如果图像不在 CloudFront 缓存中，则请求将被转发到 S3 存储桶，创建该存储桶是为了存储转换后的图像。如果请求的图像已经转换并存储在 S3 中，则只需在 CloudFront 中提供和缓存即可。
- 否则，S3 将使用 403 错误代码进行响应，该错误代码由 CloudFront 的原始故障转移检测到。多亏了这种原生功能，CloudFront 会重试相同的 URL，但这次使用的是基于 Lambda 函数 URL 的辅助来源。调用时，Lambda 函数从存储原始图像的另一个 S3 存储桶中下载原始图像，使用 Sharp 库对其进行转换，将转换后的图像存储在 S3 中，然后通过 CloudFront 提供该图像，在那里缓存该图像以供将来的请求使用。
要部署此解决方案，请按照本博客中的步骤操作。此外，该博客还向您展示了如何在 Next.JS 的图像组件中使用。请注意，该解决方案允许您禁用在 S3 中存储转换后图像的功能，仅依靠 CloudFront 缓存来提供转换后的图像。
第三方托管解决方案
如果您更喜欢使用第三方托管图像优化解决方案，则可以考虑 AWS Marketplace 中可用的解决方案，例如 Cloudinary、ImageKit.io 或 Cloudimage。如果您想管理自己的 CloudFront 分配，这三个要么使用 CloudFront，要么已与 CloudFront 集成。此类第三方提供商专门从事图像优化，可以提供高级 SaaS 功能，但需要支付额外费用。