响应式图像在 WordPress 核心中的重要性

响应式图像的流行度正在增加，这是任何人都不能忽视的。 然而，在流行的 CMS（如 WordPress）中使用相同的功能可能是一种具有挑战性的体验。 即使用户可以自己在主题中编写功能，该任务也可能是一项耗时的任务。 但是自从引入 WordPress 4.4 以来，情况发生了巨大变化，这使得开发人员和管理员可以更轻松地将响应式图像功能嵌入到他们的主题中。

主要亮点包括 WordPress 核心中响应式图像插件的可用性。 这意味着用户现在可以享受响应式图像支持，这是 WordPress 中的默认功能。 让我们仔细看看这个功能是如何工作的，以及如何谨慎使用它以利用 WordPress 网站的潜力。

功能的运作

所有的内容和图片将包括srcset和大小属性，一旦你更新到WordPress 4.4。 这主要是为了保证每个图像尺寸的可用性，以保持实际请求的图像尺寸。 在纵横比与原始请求图像相比发生变化的情况下，自定义裁剪将被排除在srcset属性之外。 同时，通过 wp-get-attachment-image 函数调用图像时，会返回响应式图像。

响应式图像在 WordPress 4.4 中充当背景功能，因为每当通过媒体上传器在 WordPress 中上传图像时，它都会自动执行此功能。 在srcset和尺寸本自动后台进程的结果，每当图像显示在页属性被显示。 这意味着新的响应式图像功能中没有可见的界面。 由于缺乏可见的界面，没有任何选项可用，例如用于填写目的的表格或用于检查目的的框和用于切换目的的选项。

主题开发人员必须通过编辑主题的functions.php 文件来确保在图像中提供准确的尺寸属性。 考虑它，因为srcset和大小属性存在于图像标签是实际代表在WordPress的响应图像是非常重要的。 最难预测的是尺寸属性，尽管 WordPress 在srcset属性中包含所有可用尺寸时表现良好。 尺寸属性有责任向浏览器解释图像在每个可用视口处的宽度。 然而，结果可能会因用户主题可用的样式而异，提供合理的默认值，即 'sizes=” (max width: {{image-width}}) 100 vw, {{image-width}}”

使用 size 属性，用户可以完成两件事。 首先，它确保图像中有效尺寸属性的可用性，就规格而言，这现在已成为先决条件。 其次，它可以防止浏览器提供与请求的原始宽度相比更大的图像源。 然而，当任何 CSS 以完全不同的视口宽度操作图像大小时，默认尺寸属性的好处就会变小。

主题开发者可以借助过滤器钩子调整每个图像对应的尺寸属性，以确保在每个断点期间交付完美的尺寸属性。 因此，在提供准确的响应式图像支持时，需要确保主题不依赖于默认尺寸属性。 主要原因是在视口的大小与原始请求的图像大小相比较小的情况下，不允许浏览器通过默认大小属性修改或更改图像源。 但是，如果图像已经在断点处用 CSS 更改过，那么源也不能更改。

如果您是可以访问 WordPress 代码库的个人，或者您是主题开发人员，则更有必要过滤主题中的图像以提供准确的尺寸属性。 这应该是新版本发布后最重要的事情。

为您的主题配置响应式图像

引入了许多新的钩子以及新的功能，这些功能可用于提供一定程度的响应式图像支持，这些支持是根据您的主题量身定制的。 必须包含在srcset属性中的图像的最大宽度可以由主题开发人员通过 max_srcset_image_width 钩子过滤。 图像的srcset属性可以通过挂钩 wp_calculate_image_srcset 来过滤，而尺寸属性可以由主题开发人员自定义，以便通过过滤 wp_calculate_image_sizes 来适应他们主题中的图像断点。

可以使用 wp_calculate_image_sizes 过滤内容图像，而可以使用 wp_get_attachment_image_attributes 函数过滤帖子缩略图/特色图像。 需要两种不同的功能是必需的，因为在不同断点处显示特色图像的方式会改变主题，并且与在相同情况下显示内容图像的方式完全不同。 因此，WordPress 4.4 为主题开发人员提供了以各种方式过滤图像的增强机会，从而尽可能具体。

所有这些都凸显了用户和主题开发人员将能够通过 WordPress 4.4 更新通过响应式图像支持实现的即时好处。 它还允许主题开发人员在不考虑视口大小和像素密度的情况下包含清晰明快的图像，从而提高网站的性能，因为网页可以避免加载更大图像所需的额外时间。 尽管对于用户来说这是一个自动过程，但主题开发人员负责通过在主题内的functions.php 文件中花费时间来调整图像大小属性。 此外，必须记住，响应式图像插件的创建和合并更多的是团队的努力。