关于图片，如果没有做优化，它们可能正在悄悄地破坏你的网站性能。但好消息是——对于 Drupal 来说，已经内置了许多工具。

1. 使用 Drupal 核心的“图片样式” Drupal 的图片样式让你可以在图片抵达访客浏览器之前，自动调整大小、裁剪和压缩图片。

创建图片样式的步骤

导航到配置 → 媒体 → 图片样式 (URL: /admin/config/media/image-styles)。
点击“添加图片样式”。
选择效果：
- 缩放或缩放并裁剪
- 转换为 WebP
- （可选）去饱和度
保存你的样式。然后你就可以在站点的任何地方使用它。

在 Twig 模板中应用图片样式

你可以直接在 Twig 模板中应用图片样式：

{{ {
  '#theme': 'image_style',
  '#style_name': 'large_webp',
  '#uri': file_uri,
  '#attributes': {
    alt: '我的替代文本',
    loading: 'lazy',
  },
}|render }}

这段代码使用你定义的图片样式来渲染图片，并包含了重要的属性，如 alt 和 loading="lazy"。

使用字段格式化器应用图片样式

你也可以通过“管理显示”用户界面来应用图片样式。

步骤：

转到结构 → 内容类型 → [你的内容类型] → 管理显示 → /admin/structure/types/manage/article/display
找到你的图片字段（例如，“图片”）。
在“格式”列，选择“图片”。
点击设置齿轮图标并进行配置：
- 图片样式：选择缩略图、中、大或你的自定义样式。
- 将图片链接到：
  - 无
  - 内容（链接到节点）
  - 文件（链接到原始文件）
- 图片加载属性：
  - Lazy（延迟加载，推荐，默认）
  - Eager（立即加载）
  - None（无）
点击更新 → 保存。

专业提示：为移动端、平板和桌面设备使用不同的图片样式。这样，你只提供设备所需的图片。

2. 启用 WebP 转换 WebP 能提供更小、加载更快的图片。在 Drupal 10 中原生支持。

如何启用

编辑你的图片样式。
点击“添加效果” → 转换为 WebP。
保存你的样式，Drupal 将自动生成 WebP 版本。

为了获得更多控制，使用 Image Optimize + WebP 模块：

composer require drupal/imageapi_optimize_webp
drush en imageapi_optimize_webp -y

3. 响应式图片（核心功能） 你可以向每个设备提供同样的大图片，但你不应该这样做，Drupal 的响应式图片模块帮助浏览器为每个设备加载正确尺寸的图片。

步骤

启用模块：
```
drush en responsive_image -y
```
访问 /admin/config/media/responsive-image-style。
使用在你的主题的 THEME_NAME.breakpoints.yml 文件中定义的断点，创建一个响应式图片样式。
将该响应式样式分配给你的图片字段显示。

Twig 代码示例

{% set hero_Banner = {
  '#theme': 'responsive_image',
  '#responsive_image_style_id': 'hero_banner',
  '#uri': hero_thumbnail,
  '#attributes': {
    alt: hero_alt,
    loading: 'lazy',
    fetchpriority: 'high',
  },
} %}
{% if hero_thumbnail is not empty %}
  {{ hero_Banner|render }}
{% endif %}

这确保了浏览器只下载当前视口下的最佳图片。

4. 延迟加载（核心功能） 自 Drupal 9.1 起，Drupal 核心会自动为图片添加 loading="lazy" 属性。如果你在 Twig 中重写了图片渲染，请确保手动包含它。

示例：

<img src="{{ file_url(image_uri) }}" alt="{{ alt }}" loading="lazy" />

延迟加载可以防止屏幕外的图片拖慢初始页面渲染。

5. 使用 Image Optimize 模块 为了进行高级压缩，Drupal 提供了 Image Optimize 模块。它可以与 API 和命令行工具集成，如 TinyPNG、Kraken、jpegoptim、optipng 和 cwebp。

安装

composer require drupal/imageapi_optimize
drush en imageapi_optimize -y

集成可能包括

imageapi_optimize_tinypng
imageapi_optimize_gd
imageapi_optimize_webp

你可以在配置 → 媒体 → Image Optimize pipelines 配置优化管道。

6. 优化原始上传文件（在缩放之前） 大图片（例如 10MB）在优化之前就会拖慢你的站点。你可以强制执行上传大小限制，或在保存前调整大小。

选项

转到配置 → 媒体 → 图片工具包
使用 Image Widget Crop 或 Image Resize Filter 模块

安装 resize filter 模块：

composer require drupal/image_resize_filter

从源头保持精简意味着下游浪费的资源更少。

7. 优化缓存和 CDN 交付 这是你将性能推向极致的地方。将 Drupal 的优化与缓存/CDN 结合起来，以实现全球快速的图片交付。

推荐设置

为静态资源启用 AdvAgg 或核心聚合。
使用 Cloudflare、Fastly 或类似的 CDN 来缓存图片并自动交付 WebP。
可选择安装 Image CDN 模块：
```
composer require drupal/image_cdn
```

这种方法能显著减少加载时间，尤其是对全球性站点。

8. 审计和监控图片性能 定期测量和验证你的优化效果。

工具

Google Lighthouse 或 PageSpeed Insights
WebPageTest.org
Drupal Devel → 性能分析

这些工具帮助你识别：

过大的图片
缺失的响应式属性
缓存不良或未优化的媒体

最后的思考 图片不一定会拖慢你的网站，借助 Drupal 的内置工具、智能的优化工作流程和一些有意识的设置，你可以提供更快、更流畅的体验。

Drupal 中全面优化图片的 8 种方法

POPULAR POSTS

CATEGORIES