为你的网站启用WebP图像，可以为每个页面加载节省数百万字节的数据！这听起来有点夸张，或者说有点俗气。但这是真的。如果网络环境较慢的，这会带来相当不同的结局：页面秒开，访客留下来阅读你的页面；或者经过漫长时间的等待仍然加载不出来，访客只能沮丧地按下浏览器菜单上的叉号。

什么是WebP?

WebP是一种新的图像格式，能够以更小的文件尺寸呈现更高质量的图像。它还支持一些很酷的功能，如透明度（一般用PNG图像处理）和动画（一般用GIF动画或视频处理）。

最佳的用户体验是网站开发追求的一个重要方面，而其中的关键是保证正确的图像尺寸。大分辨率的图片一股适用桌面显示器，而如果有些访问者使用的是移动设备，那么加载这些非常大的图片反而不是最佳选择。

确保为正确的设备提供正确大小的图像就是所谓的 "响应式图像"。

响应式图像有助于提高加载速度，节省带宽，并给访问者带来更好的整体体验。

这篇文章将重点介绍在Drupal 9中设置响应式图片。

对于Drupal 9，启用响应式图片支持的的关键步骤如下：

Drupal 安装好以后，因为没有内容，首页默认是有这个提示的：“No front page content has been created yet. Follow the User Guide to start building your site."

一般添加内容并选择发布到首页以后，这个提示就会自动消失的。

安装并启用 Drupal 的 Barrio 主题后，细心的朋友在调试的时候可能会发现，Barrio 导入的一个js文件  popper.min.js 并没有正确加载。

Barrio 主题和子主题里定义的 popper.min.js 路径是 /libraries/popper.js/dist/umd/popper.min.js，但没有附带这个文件，也没有定义下载的路径。实际上popper.min.js已经存在于 Drupal 核心里了，它的路径是 ：/core/assets/vendor/popperjs/popper.min.js。

Barrio是一个基于Bootstrap 4/5的主题，同时支持Drupal 8和 Drupal 9。这个主题使用标准的 Bootstrap 4/5 标记完全重写了Drupal的twig 模版，使它可以只使用 Bootstrap 的CSS样式，外加少量的自定义CSS样式。对Bootstrap涵盖的部分，Barrio 主要是基于 Flex.

按照模块的文档安装完成主题并创建子主题后，无论如何调试，效果都不能和 Barrio 自带的子主题一样，主要表现在两点：