WordPress 中的响应式图片，第一部分

如果您正在阅读本文，您可能已经熟悉响应式图片。即使如此，了解一些背景知识可能会有所帮助。（然后我们将进入 WordPress 部分，以及如何使用 Cloudinary 使它们变得更好。）在 Web 存在的大部分时间里，无论何时您想在网页上包含图片，您都会创建如下所示的标记

<img src="/path/to/my/image.jpg" alt="a very nice image">

在此示例中，<img> 元素引用了一个名为 `image.jpg` 的单个图片文件，该文件位于 `/path/to/my` 服务器上。此标记非常简单，因为它告诉浏览器下载并呈现由 src 元素引用的特定图片文件到网页上。

这种安排一直很好，直到 2010 年，Ethan Marcotte 发表了他的开创性文章，响应式网页设计，该文章推广了使用层叠样式表媒体查询来修改网页布局以适应用户使用设备大小的技术。响应式网页设计也增加了人们对根据屏幕大小优化网站性能的兴趣。这种关注使图片对性能来说是一个多么大的痛点变得清晰起来，占每个网页中包含的大部分字节。使用响应式设计，开发人员开始向所有用户发送在大型桌面显示器上看起来很漂亮的图片，这导致向较小的移动设备发送额外的字节，使移动浏览体验比必要的速度慢得多。

一群勇敢的 Web 开发人员，被称为响应式问题社区小组 (RICG)，着手通过引入新的 HTML 来解决此问题，以便开发人员可以根据上下文信息（如屏幕大小）为网页识别不同的图片源。这是一个新的标记模式示例

<img src="small.jpg"
     srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"
     sizes="(min-width: 36em) 33.3vw, 100vw"
     alt="A rad wolf">

在此示例中，<img> 标记现在包含两个新属性：srcset，其中包含图片文件列表及其相应的像素宽度，以及 sizes，它为浏览器提供了一个关于图片预期布局大小的估计，具体取决于某些媒体查询条件。包含 src 属性是为了作为旧浏览器的后备，这些浏览器不支持新的 srcset 和 sizes 属性。

此新标记允许浏览器确定并下载最合适的图片，从而为用户节省字节（和时间）。要更深入地了解此标记和其他响应式图片标记模式，我强烈建议阅读 Jason Grigsby 的响应式图片 101 系列文章。

WordPress 中的响应式图片

在 2015 年底，WordPress 与 RICG 成员合作，发布了版本 4.4，其中包括对响应式图片的原生支持。WordPress 4.4+ 会自动为帖子或页面中包含的图片生成 srcset 和 sizes 属性。WordPress 实现使用现有的图片调整大小功能来完成此任务。在 4.4 版本之前，WordPress 已经创建了上传到媒体库的任何图片的几个较小版本。从 4.4 版本开始，WordPress 使用这些附加尺寸来创建 srcset 属性，以便访问您网站的人可以通过下载不超过其所需大小的图片文件来获益。

此实现开箱即用，但有一些限制。例如，WordPress 在上传原始图片时创建图片尺寸变体，这意味着只有在此时定义的图片尺寸才会在 srcset 属性中可用。此外，图片处理可能会占用许多共享托管计划中可用的资源，因此 WordPress 必须谨慎对待默认情况下创建每个图片的多少变体。

理想情况下，您可以在需要布局时动态创建图片尺寸，并将处理转移到外部图片服务。幸运的是，像Cloudinary 这样的服务存在，它们正是这样做的。我对 Cloudinary 在图片管理领域所做的工作印象深刻，因此我想看看如何使用该服务来扩展 WordPress 中默认的响应式图片实现。

使用 Cloudinary 扩展 WordPress

Cloudinary 提供执行多种图片转换的工具，除了简单的调整大小之外，它还发布了自己的 WordPress 插件 到 WordPress.org 插件库。该插件尚不支持开箱即用的响应式图片，因此我想看看是否可以使用其图片上传应用程序编程接口来制作一个精简的插件。我的目标是将媒体库中的图片同步到Cloudinary 的服务，并让 Cloudinary 自动创建为响应式图片提供服务的图片尺寸。

我创建了一个演示插件，已发布到 GitHub，以便您可以查看它。在后续文章中，我将解释更多插件的技术细节和设计决策，但现在我将概述插件的功能。

首先，当您将图片添加到 WordPress 媒体库时，WordPress 使用Cloudinary 的 PHP 集成库 将该图片上传到 Cloudinary，并指示其服务创建将在 srcset 属性中使用的替代图片尺寸。有趣的是，Cloudinary 开发了一种独特的响应式图片断点解决方案，该解决方案会根据图片内容自动计算所需的最佳图片尺寸。

图片上传到 Cloudinary 后，该服务会将与新创建的图片尺寸相关的数据返回到您的 WordPress 站点。通过使用 WordPress 过滤器，我们可以使用这些数据为图片构建 srcset 属性，这些属性引用来自Cloudinary CDN 的文件，而不是本地托管的图片。

总结

通过将 WordPress 原生响应式图片功能的简单性与Cloudinary 提供的图片管理工具相结合，您可以完全按照自己的意愿管理内容，同时为访问您网站的访客提供针对其设备功能自动优化的图片，而无需担心添加到您网站的每张图片。

---

这篇文章（以及插件！）由Joe McGill撰写。

Cloudinary 可以极大地帮助网页上的响应式图片！ 它们不仅可以创建发送最佳尺寸所需的各种尺寸的图片，还可以以正确的格式发送，甚至可以完全自动化任何应用程序的过程。