您可能已经熟悉内容分发网络 (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。
最终的结果就是,您不仅无需创建交替编码的文件,也无需手动微调压缩设置
(或维护为您执行这些任务的系统),但无需再使用 <picture>
和 type
属性来有效地
向用户提供这些文件因此,仅使用 srcset
和 sizes
语法仍然可以为用户提供编码为 AVIF、
回退到 WebP(或 JPEG-2000,仅限 Safari),再回退到最合理的旧编码。
使用图片 CDN 的缺点在于逻辑性强,而非技术性,其中最主要的是费用高昂。虽然图片 CDN 通常 针对个人使用情况提供功能强大、免费的方案,生成图片资源需要带宽和存储空间进行上传, 以及额外的空间来存储缓存的转换结果,因此高级用法和高流量应用可能需要付费方案。