图片内容分发网络

您可能已经熟悉内容分发网络 (CDN) 的核心概念：服务器。将文件上传到 CDN 提供商时，系统会创建一个副本位于世界各地的 CDN 网络其他节点上当用户请求某个文件时，该节点会按地理位置发送数据从而缩短延迟时间CDN 的分布式特性还可在出现网络中断或包括硬件故障和负载均衡功能，以缓解流量高峰。

图片 CDN 可以提供所有这些优势，但有一个关键区别：能够转换和根据用于访问图片的网址字符串来优化图片内容。

用户将向提供程序上传规范的高分辨率图片，这会生成一个用于访问该图片的网址：

https://res.cloudinary.com/demo/image/upload/sample.jpg

尽管所使用的确切语法因提供商而异，但至少所有图片 CDN 都允许您更改来源图片尺寸、编码和压缩设置例如 Cloudinary 对容器执行动态大小调整通过以下语法上传的图片：h_ 后跟以像素为单位的数字高度，w_ 后跟宽度，以及 c_ 值，用于指定应如何缩放或剪裁图片的详细信息。

可以应用任意数量的转换，只需在网址中的文件名和扩展名前面添加逗号分隔值即可。这意味着，您可以根据需要通过请求该图片的 img 元素的 src 对其进行操作。

<img src="https://res.cloudinary.com/demo/image/upload/w_400/sample.jpg" alt="…">

用户第一次访问包含这些转换的网址时，新版本的图片将按比例缩放至生成并发送 400 像素 (w_400) 的宽度。然后，新创建的文件会缓存到整个 CDN 中，以便可以发送请求同一网址的任何用户，而不是按需重新创建。

虽然图片 CDN 提供商提供软件开发套件并不少见为了促进高级使用和与各种技术栈的集成，仅这种可预测的网址格式就使我们能够将单个上传的文件转换为有效的 srcset 属性，而无需使用任何其他开发者工具：

<img
  src="https://res.cloudinary.com/demo/image/upload/w_1000/sample.jpg 1000w"
  srcset="https://res.cloudinary.com/demo/image/upload/w_1000/sample.jpg 1000w,
        https://res.cloudinary.com/demo/image/upload/w_800/sample.jpg 800w,
        https://res.cloudinary.com/demo/image/upload/w_600/sample.jpg 600w"
  alt="…">

我们能够使用现在应该已经熟悉的语法来手动指定所需的压缩级别：q_（较短）即“质量”以及表示压缩级别的数字简写形式：

<img src="https://res.cloudinary.com/demo/image/upload/w_400,q_60/sample.jpg"  alt="…">

不过，由于 Google 具有一系列极其强大的功能，因此在极少数情况下，您就需要手动添加这些信息。大多数图片 CDN 都会提供以下功能：全自动压缩、编码和内容协商。

自动压缩

图片 CDN 具有可供使用的计算能力，这意味着它们能够提供极其强大的功能：以便通过算法确定理想的压缩级别和编码设置，这与您或我一样。手动微调每张图像的压缩率。

这些算法可自动执行相关决策，以便您在文件大小和感知质量之间取得平衡，从而分析图像内容可测量的降级迹象，并相应地微调压缩设置。这通常意味着。

虽然这个过程听起来很复杂，但实现过程非常简单：对于 Cloudinary，在q_auto image 网址可启用此功能：

<img src="https://res.cloudinary.com/demo/image/upload/w_1400/sample.jpg" alt="…">
<!-- 250 KB-->

<img src="https://res.cloudinary.com/demo/image/upload/w_1400,q_auto/sample.jpg" alt="…">
<!-- 134 KB-->

自动编码和内容协商

收到图片请求后，图片 CDN 会通过 HTTP 标头与资源请求一起发送，具体来讲， Accept 标头。此标头指示浏览器能够理解的编码，编码使用的是媒体类型，我们需要使用它们来填充 type。是 <picture> 元素的 <source> 属性。

例如，向素材资源网址中的图片转换列表添加 f_auto 参数，即可明确告知 Cloudinary：提供浏览器能够理解的最高效编码：

<img src="https://res.cloudinary.com/demo/image/upload/w_1200,q_auto,f_auto/sample.jpg" alt="…">

然后，服务器生成具有该编码的图片版本，并为具有相同编码的所有后续用户缓存结果。浏览器支持级别。该响应包含 Content-Type 标头将文件的编码明确告知浏览器，而不考虑文件扩展名。即便使用新型浏览器的用户请求结尾为 .jpg 的文件时，该请求将附带一个标头，告知服务器支持 AVIF，服务器将发送 AVIF 编码文件以及显式指令，以将其视为 AVIF。

CDN 界面。

最终的结果就是，您不仅无需创建交替编码的文件，也无需手动微调压缩设置（或维护为您执行这些任务的系统），但无需再使用 <picture> 和 type 属性来有效地向用户提供这些文件因此，仅使用 srcset 和 sizes 语法仍然可以为用户提供编码为 AVIF、回退到 WebP（或 JPEG-2000，仅限 Safari），再回退到最合理的旧编码。

使用图片 CDN 的缺点在于逻辑性强，而非技术性，其中最主要的是费用高昂。虽然图片 CDN 通常针对个人使用情况提供功能强大、免费的方案，生成图片资源需要带宽和存储空间进行上传，以及额外的空间来存储缓存的转换结果，因此高级用法和高流量应用可能需要付费方案。