图片内容分发网络

您可能已经熟悉内容分发网络 (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 属性来有效地 向用户提供这些文件因此,仅使用 srcsetsizes 语法仍然可以为用户提供编码为 AVIF、 回退到 WebP(或 JPEG-2000,仅限 Safari),再回退到最合理的旧编码。

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