在本系列的第1部分中，我们介绍了Drupal性能优化的方法------Drupal缓存优化。一旦我们处理好了这一点，我们就可以确定，我们只是在绝对必要的时候要求服务器产生响应。如果您还没有阅读第一部分，我们建议您从那里开始。

长风云Drupal开发官网是一个非常熟悉同时不断发展的工具集，维护了在过去几年中成都长风云Drupal开发团队总结的Drupal开发经验和Drupal案例。今天，我们将在整理好Drupal缓存机制后，介绍您追求前端性能的下一个方法。

一、访问者者获得最佳体验所需的最小、最优化的媒体资产。

缓存之后，我们通常在客户端网站上看到的下一件事是图像/视频/资产处理。现代相机能够以非凡的细节捕捉到令人惊叹的图像。现代相机产生的原始图像大小可以接近50MB。在242MB的宽带互联网连接上（2022年美国的平均水平），下载其中一张图片需要整整一秒钟。根据Pingdom的数据，典型的主页上平均有42.8张图片。如果每个图像都是从专业相机上传的原始图像目录，这将导致加载页面的每个用户的速度大幅放缓，并导致传输访问者永远看不到的信息的网络传输和计算资源的巨大浪费。

值得庆幸的是，Drupal配备了令人惊叹的工具，可以在交付前正确调整媒体资产的大小。

二、Image styles

Drupal提供了开箱即用的图像样式支持，最明显的是，您可以使用它将图像调整为与显示的上下文一致且适当的大小。这避免了将浪费的像素发送给永远看不到它们的访问者。Drupal的“缩放和裁剪”图像样式操作可能是最有用的，它允许您完美地调整无数源图像的大小，使其输出均匀高效，完全适合任何设计。当与Focal Point模块相结合时，这种转换使在Drupal网站上呈现完美的艺术，同时也有助于提高性能。客户端可以上传漂亮而大的源图像，网站访问者将在页面输出中获得所需的像素数。

三、Responsive Images

Drupal还提供了对响应图像的支持，即一个根据浏览器视口的大小为访问者提供不同大小图像的系统。这使我们能够将美丽的扩展图像传输到大而高分辨率的显示器（更可能在高带宽连接上），同时将低分辨率图像传输到只有300-400多像素水平不动产的老式安卓手机（更有可能在低带宽连接上）。

在长风云Drupal开发团队，我们为客户使用了一个非常严格的响应式图像风格策展系统。这包括网站上每个图像上下文的一组图像样式，网站主题的每个断点都有变化，每个断点的各种像素也有变化。这可能有很多样式需要维护，我们有一个自定义脚本来根据源图像上下文生成断点和像素密度的衍生图像样式。

这给了我们最好的机会，当访问者访问网站时，无论他们使用什么设备，从谷歌像素到6k iMac，再到智能冰箱，都能为他们提供准确大小的图像。

四、图像优化与格式

除了在访客需要时为他们运送合适尺寸的图像外，图像还有很多与实际像素数无关的控制大小和性能的功能。网络上的图像可以以各种文件格式提供，最常见的是JPEG和PNG。大多数网站管理员都会使用这些常见格式的源图像，但这些格式并不是现代浏览器能够显示的最具尺寸效率的格式。在撰写本文时，目前推荐的格式是AVIF和WebP。

WebP支持相当简单，Drupal core现在提供开箱即用的WebP转换，在您的图像样式中使用“转换为WebP图像转换”，Drupal将负责其余的工作。然而，这目前不适用于上述响应图像样式，为了支持该功能，您可以查看一些贡献的模块。

在长风云Drupal开发团队，我们一直在使用图像优化和ImageAPI优化WebP模块来处理这一问题，允许Drupal在浏览器不支持WebP优先级图像和jpeg/png回退时渲染响应图像。此外，Image Optimize支持的管道允许我们对图像进行额外的优化，比如在将图像转换为WebP之前进行压缩（如果浏览器只支持传统图像格式，则压缩传统图像格式）。

根据服务器的配置，您可以使用图像优化模块提供的各种子模块来提供压缩。

一旦你结合了以上所有的工具和技术，你就应该向每个访问者发送正确大小的图像，无论他们使用什么设备来消费网站内容。

五、图像加载

你的另一个重要工具是使用图像标签图像加载属性。所有现代浏览器都支持，最新版本的Drupal core（10.2）也直接支持图像加载属性，该属性允许您指定浏览器下载媒体资产时的行为。两种可能的价值观是 “eager”和 “lazy”。当您创建一个新的图像字段时，Drupal核心现在默认为lazy”。在大多数情况下，这是合理的默认值。它指示浏览器在需要在视口中渲染媒体资源之前不要加载该资源。此默认设置的唯一真正例外是加载页面时视口中的图像。例如，“英雄.jpg”图片通常用于大多数现代登录页面。渲染此图像的字段应设置为“eager”，以便尽快下载图像，这将通过允许更快地渲染屏幕上的内容来提高页面加载性能。

懒加载的图像只会在访问者需要时提取并呈现给他们，如果他们从不滚动到有问题的图像，则根本不会发送给他们。

还有其他媒体优化技术需要考虑，比如Stephen在文章中介绍的嵌入式视频的外观图像，但正确掌握这些基础知识会对页面性能产生巨大影响。

这就是今天的文章的全部内容，下周我们将深入探讨一个更丰富的主题，以及产生本系列文章的一系列概念。谷歌、百度等搜索引擎是否一直在非常在意你的网站上没有使用CSS和Javascript？尽管您已经在完美缓存的页面上优化了图像，但您的LCP得分是否低于标准？请收看下周的文章，了解如何扭转局面的一些技巧！
 

六、专业的Drupal开发团队 - 成都长风云Drupal开发团队

在2024年，我们已经专注于Drupal开发16年(始于2008年)。无论您计划从Drupal7升级到Drupal10、从旧版本迁移到Drupal9、基于Drupal开发新的系统、企业官网、电商网站，维护基于Drupal开发的系统等，我们都能依靠我们的专业技术为您完成。免费咨询Drupal升级方案，手机号：13795726015 或 微信号：changfengqj 扫微信二维码：