在 Drupal 9 中设置响应式图像 - 分步指南

已发表: 2022-07-26

在 2010 年初，Jason Grigsby 指出仅在图像上设置百分比宽度是不够的，您需要调整这些图像的大小以获得更好的用户体验 (src)。 据他介绍，如果您在较小的屏幕上提供合适尺寸的图像，您可以节省超过 75% 的图像重量。 从那以后，关于响应式图像的争论已经演变为寻找最佳解决方案来渲染完美、响应式图像而没有任何麻烦。

Drupal 9 在为响应式图像提供开箱即用的解决方案方面做得非常出色（从 Drupal 8 开始）。 阅读有关 Drupal 9 中响应式图像如何工作的更多信息，并学习使用简单的分步过程来实现它。

响应式图像

Drupal 9 中的响应式图像

当您感到困惑时，请将其留给浏览器。 这正是 Drupal 9 借助 Breakpoints 模块和 Responsive images 模块帮助您做的事情。

但首先，什么是断点？ 为了能够为设备提供最佳的图像尺寸，您需要在 CSS 中定义不同的屏幕尺寸，称为断点。 当然，您不可能涵盖所有这些，但您应该指定一些可以涵盖大多数设备的粗略且合理的尺寸。

Breakpoint 模块位于 Drupal 9 核心中，并具有一些预配置的高度和宽度，可用于内置主题的不同视口，您也可以在自定义主题的断点 yml 文件中添加自己的断点。

Drupal 9 的响应式图像模块使用图片标签根据原始图像的断点来渲染完美的响应式图像。 以前 Drupal 7 中的图片模块现在是 Drupal 9 中的新响应图像模块。

问题

Web 开发中图像的主要问题之一是浏览器对图像一无所知，并且在加载 CSS 和 Javascript 之前，对于相对于不同屏幕的视口呈现的图像大小一无所知。

但是，浏览器可以知道渲染图像的环境，包括视口的大小和屏幕的分辨率。

解决方案

如前所述，响应式图像使用基本上具有大小和srcset属性的图片元素，这些属性在通知浏览器根据图像样式选择选择最佳图像方面发挥着重要作用。

Drupal 9 在核心提供响应式图像模块方面做得很好。 这将有助于浏览器为屏幕分辨率较低的设备下载较小尺寸的图像，从而缩短网站加载时间并提高性能。

重现步骤

  1. 启用响应式图像和断点模块。
  2. 为您的项目主题设置断点。
  3. 为响应式图像设置图像样式
  4. 为您的主题创建响应式图像样式
  5. 将响应式图像样式分配给图像字段。

第 1 步：启用响应式图像和断点模块

由于这两个模块都是 Drupal 9 核心的一部分，您不需要安装它们或添加任何其他模块。 您所要做的就是启用响应式图像模块，因为断点模块将与标准配置文件一起安装。 如果没有，请启用断点模块。

要启用模块，请转到Admin->Extends，选择模块并启用它们。

扩展页面

第 2 步：为项目主题设置断点

设置主题的断点是在 Drupal 9 中构建响应式网站的最重要部分。

 comminfo.phone: label: phone mediaQuery: '(max-width: 767px)' weight: 0 multipliers: -1x -2x comminfo.tablet: label: tablet mediaQuery: '(min-width: 768px) and (max-width: 1024px)' weight: 1 multipliers: -1x -2x comminfo.desktop: label: desktop mediaQuery: '(min-width: 1025px) and (max-width: 1250px)' weight: 2 multipliers: -1x comminfo.lg-desktop: label: lg-desktop mediaQuery: '(min-width: 1251px)' weight: 3 multipliers: -1x

如果您使用的是 Bartik、Seven、Umami 或 Claro 等核心主题，您将已经拥有断点文件，而无需创建新文件。

但是，如果您在项目中使用自定义主题，请务必在“yourthemename.breakpoints.yml”文件中定义断点，该文件可以在主题目录中找到，通常在“/themes/custom/”中找到你的主题名” 。

每个断点都会将图像分配给媒体查询。 例如，在手机上渲染的图像可能更小，即宽度小于 768 像素，而中等屏幕的宽度在 768 像素到 1024 像素之间。

每个断点将具有：

  • label：是给断点的有效标签。
  • mediaQuery：呈现图像的视口。
  • 重量：用于显示的顺序。
  • 乘数：视口设备分辨率的度量。 通常，1x 用于标准尺寸，2x 用于视网膜显示。

第 3 步：为响应式图像设置图像样式

现在让我们为每个断点创建一个图像样式。 您可以在Admin -> Config -> Media -> Image-styles中配置自己的图像样式。

单击“添加图像样式”。 为您的图像样式指定一个有效名称并使用将提供裁剪图像的缩放和裁剪效果。 如果图像被拉伸，请为不同的视口添加多种图像样式。

添加图像样式

第 4 步：为您的主题创建响应式图像样式

在这里，您可以为浏览器提供多种图像样式选项，并让浏览器从中选出最好的。

响应式图像样式

响应式图像

要创建新的响应式 Drupal 9 图像样式，请导航至：

主页 -> 管理 -> 配置 -> 媒体 -> 响应式图像样式，然后单击“添加响应式图像”。

为您的响应式图像样式指定一个有效名称，然后选择断点组（选择您的主题）。 接下来，将图像样式分配给列出的断点。

图像样式配置有多个选项。

  • 选择单个图像样式：您可以在其中选择将在特定屏幕上呈现的单个图像样式
  • 选择多个图像样式：您可以在其中选择多个图像样式，还可以指定图像样式的视口宽度

最后，有一个选项可以选择后备图像样式。 后备图像样式应仅在发生错误时出现在网站上。

后备响应图像

第 5 步：将响应式图像样式分配给图像字段

完成所有配置后，通过添加响应式图像样式移动到图像字段。 为此，请转到字段的管理显示部分并选择我们之前创建的响应式图像样式。

现在添加内容并使用响应式图像样式检查页面上的结果。

分配响应式

对图像字段的响应式图像样式

最终结果

响应式图像 最小宽度为 1024 像素的图像（适用于大型设备）。

响应式图像风格

最小宽度为 768 像素的图像（适用于中型设备）。

响应式图像风格

最大宽度为 767 像素的图像（适用于小型设备）。

最后的想法

对于想要响应速度更快的网站而言，图像优化一直是一项重大挑战。 您要么必须放弃图像质量，要么增加页面加载时间。 但是使用 Drupal 9 响应式图像模块和断点模块（现在在核心中！），您现在可以在任何断点处缩放或裁剪图像以获得不同的分辨率。
您是否正在寻找经过验证的 Drupal 开发公司来构建令人印象深刻的响应式 Drupal 网站？ 我们很乐意提供帮助！ 今天和我们谈谈。