如何使用通用API实现响应式图片处理

在这篇文章里，我们要一起探索WordPress里的响应式图像API。我们会提到响应式图像是什么，为什么要用它们，WordPress是怎么让这些图像工作的，以及如果你想自定义这些图像，该怎么做。

什么是响应式图像？

响应式图像是可以适应正在查看的设备的屏幕尺寸的图像。这很重要，因为这意味着无论在什么设备上查看图像，图像总是看起来不错。

让我们看一个例子。

大多数现代浏览器都有一种特殊的模式，用于在移动设备上查看网页布局。在基于 Chrome 的浏览器中，它称为设备模式，在 Firefox 和 Safari 中，它称为响应式设计模式。您通常可以从浏览器的开发人员工具访问它。启用此模式后，您可以看到网页在不同设备上的外观。

如果您查看此示例中的标题图像，您会发现当您在移动设备上查看它时它会被裁剪。然而，内容区域中的图像却没有，它只是以较小的尺寸显示图像。

因此，您可能希望能够在移动设备上显示该图像的裁剪版本，并在桌面设备上显示完整图像。这就是响应式图像的用武之地。

正如您在此响应式图像示例中所看到的，当您切换到移动设备时，标题图像和主要内容图像都会被裁剪。

虽然响应式图像如何工作的知识超出了本教程的范围，但您可以在MDN Web 文档中阅读有关如何实现响应式图像的更多信息。

WordPress 响应式图像 API

srcset自 WordPress 4.4 起，通过包含和属性函数sizes生成的图像标记，WordPress 原生支持响应式图像。这意味着它默认处于启用状态，并且 WordPress 生成的任何图像都会自动响应。wp_get_attachment_image()

为了理解它是如何工作的，让我们看一个简单的例子。

首先，将图像添加到 WordPress 站点的媒体库中。

如果您随后浏览到上传目录并查看图像的存储位置，您将看到该图像有多个版本。

这是因为 WordPress 会自动生成不同尺寸的多个版本的图像，然后可以在不同的上下文中使用它们。

在响应式图像出现之前，开发人员会尝试根据设备类型向浏览器动态提供不同的图像。服务器将检查正在使用的设备大小，然后提供适当的图像。

这可以通过使用用户代理字符串来实现，该字符串是浏览器发送到服务器的字符串，包含有关所使用的浏览器和设备的信息。

// check the $_SERVER["HTTP_USER_AGENT"] variable to see if this is a mobile device request
$isMob = is_numeric(strpos(strtolower($_SERVER["HTTP_USER_AGENT"]), "mobile")); 

if($isMob){ 
    echo 'Using Mobile Device...'; 
}else{ 
    echo 'Using Desktop...'; 
}

但是，这使得测试变得困难，因为您需要在物理设备上进行测试，使用BrowserStack等服务，或者在测试环境中设置用户代理字符串。

响应式设计使用媒体查询等内容来渲染单个页面，该页面将根据视口宽度和显示密度等内容在浏览器中做出响应。响应式图像遵循此策略，并将所有信息预先发送到浏览器，让浏览器负责加载适当的图像，而不是在页面加载之前在服务器上做出这些决定。

让我们通过将图像添加到帖子中并在编辑器中将其大小设置为完整大小来查看此操作的实际效果。

当您预览图像时，您会发现图像标记不仅仅包含图像 URL。它还包含一个srcset属性和一个sizes属性。

<img decoding="async" fetchpriority="high" width="799" height="533" src="https://learnpress.test/wp-content/uploads/2023/09/water-4.jpeg" alt="" class="wp-image-9" 
     srcset="
     https://learnpress.test/wp-content/uploads/2023/09/water-4.jpeg 799w, 
     https://learnpress.test/wp-content/uploads/2023/09/water-4-300x200.jpeg 300w, 
     https://learnpress.test/wp-content/uploads/2023/09/water-4-768x512.jpeg 768w" 
     sizes="(max-width: 799px) 100vw, 799px">

让我们仔细看看这个图像标签，以了解这些属性的作用。

该srcset属性包含 WordPress 生成的图像的所有不同版本的列表，以及该图像的宽度（以像素为单位）。

在本例中，图像有 3 个不同版本，宽度分别为799、769和300。

该sizes属性指定每个媒体条件列表的图像布局宽度。在此示例中，媒体条件为(max-width: 799px)，并且有两个布局宽度100vw和799px。100vw表示图像将以视口宽度的 100% 显示，799px表示图像将以 799px 显示。

因此，在本例中，如果视口宽度小于 799px，则图像将以视口宽度的 100% 显示，否则将以 799px 的宽度显示图像。

然后，浏览器可以使用此信息来根据正在查看图像的设备（由其视口宽度确定）来确定要加载哪个图像。不再需要服务器端逻辑，从而加快页面请求时间。由于图像是静态提供的，因此浏览器可以缓存它们，从而进一步加快页面加载时间。

新功能和挂钩

WordPress 4.4 引入了许多新函数和挂钩，使使用响应式图像变得更加容易。

• wp_get_attachment_image_srcset () – 检索图像附件属性的值srcset。
• wp_calculate_image_srcset () – 用于计算要包含在属性中的图像源的辅助函数srcset。
• wp_get_attachment_image_sizes () – 创建图像的尺寸属性值。
• wp_calculate_image_sizes () – 用于创建图像尺寸属性的辅助函数。
• wp_image_add_srcset_and_sizes () –srcset向现有img元素添加属性和调整大小。

为了防止向srcset属性添加非常大的图像，添加了一个max_srcset_image_width 过滤器，它允许主题为列表中包含的图像设置最大图像宽度srcset。默认值为 2048 像素。

自定义响应式图像标记

如果需要，还可以自定义响应式图像标记。

您可以使用过滤器和过滤器来修改默认值srcset和sizes属性，或者使用 wp_get_attachment_image_attributes 过滤器覆盖未嵌入帖子内容中的图像的或属性（例如帖子缩略图、图库等） ，类似于其他图像属性被修改。wp_calculate_image_srcset wp_calculate_image_sizes srcsetsizes

如果您正在开发主题，您还可以使用 函数 创建您自己的自定义标记wp_get_attachment_image_srcset 模式。

让我们看一个例子。

假设您想要生成一个输出img该图像的标签的函数，但您只想渲染中等大小的图像，并设置一个自定义sizes属性。

默认情况下，在视口宽度小于 799 像素的情况下以 100% 的视口显示图像，在更宽的视口上以 799 像素的宽度显示图像，而您希望将尺寸属性设置为使用 768 像素的中等图像宽度。

这意味着您需要将 size 属性设置为(max-width: 768px) 100vw, 768px。

function get_custom_responsive_image( $attachment_id ) {
	$img_src    = wp_get_attachment_image_url( $attachment_id, 'medium' );
	$img_srcset = wp_get_attachment_image_srcset( $attachment_id, 'medium' );
	echo '<img src="' . $img_src . '" srcset="' . $img_srcset . '" sizes="(max-width: 768w) 100vw, 768px" alt="Our custom responsive image">';
}

然后，您可以在任何支持 PHP 的主题文件中调用此函数，例如经典主题中的模板和模板部分，或块主题中的块模式。

在此示例中，它被添加到“二十二十三”主题的页脚默认模式中，位于该模式顶部的组块内。图像 ID 是 9，您可以将其传递给函数：

	<!-- wp:group {"align":"wide"} -->
	<div class="wp-block-group alignwide" style="padding-top:var(--wp--preset--spacing--40)">
		<?php get_custom_responsive_image( 9 ); ?>
	</div>
	<!-- /wp:group -->

如果您在前端查看此内容，您可以看到自定义尺寸属性已用于该特定图像。

如果您在设备模式下对此进行测试，您将看到在设备尺寸低于 768 像素时，图像以视口宽度的 100% 显示，而在尺寸高于 768 像素时，图像以 768 像素的宽度显示。