使用webP格式图片提高Drupal 8/9网站的页面加载速度

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

什么是WebP?

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

浏览器支持情况

所有的现代浏览器都支持WebP, 包括Chrome, Edge, Safari和Firefox，然而对于Safari来说，对WebP的支持仅限于运行macOS 11 Big Sur（2020年11月发布）或者更新系统的机器。另外，WebP格式不支持IE各个版本的浏览器，毕竟微软自己都不支持IE系列了。

你可以像使用标准JPG/PNG/GIF图片一样使用WebP图片。

<img src="my-awesome-picture.webp" alt="我的精彩图片">

对老旧浏览器的回退支持

你可能还得万分怨念地支持老旧的Safari甚至Internet Explorer？那就使用HTML的<picture>标签创建.JPG图像链接来保留对这些老古董的兼容回退支持吧。<picture>标签你可能不太熟悉，它本来是用于响应式图片的，对于不同的设备宽度分别加载不同分辨率的图片。当然你可以使用它来实现对用户浏览器的支持，让它根据用户的浏览器对MIME类型的支持加载不同的图片样式。代码看起来类似下面这样的：

<picture>
  <source srcset="my-awesome-picture.webp" type="image/webp">
  <img src="my-awesome-picture.jpg" alt="Awesome">
</picture>

旧的浏览器会查看<source>元素里定义的类型属性，没法使用.webp后就调用它支持的<img>元素。

Drupal核心支持

2021年6月份发布的Drupal  9.2版本开始就原生支持WebP了，你可以使用Drupal核心内建的图片样式很容易地转换你的图片。

Image

很不幸的是，WebP和Drupal核心的响应式图片模块Responsive Image并没有整合，不能原生使用，这方面需要我们自己搞定。

现在就开始使用WebP

不幸中万幸是，我们可以使用贡献模块 WebP 或者 ImageAPI Optimize WebP 来支持响应式图片使用WebP格式。这两个模块都整合了Drupal核心的响应式图片模块Responsive Image，并支持Drupal 8和 Drupal 9, modules，会为每一种图像样式生成WebP格式的图片。

大伟哥博客开始使用WebP图片

从这篇博客开始，大伟哥博客开始启用WebP格式的图片。以上面的图片为例，一样的分辨率下，PNG格式的图片大小是31.3KB，而转换成webp格式以后，尺寸缩小到了6.2KB，仅是原来的20%左右，节省了80%的空间占用。

目前来说，Drupal原来的文本编辑器自带的工具 inline image 还不能上传 webP 格式的图片，也不能自动把jpg和png等格式的图片转换成webp格式，估计以后要弃用它，改为Drupal 后来推荐的 Media / Media Library 模块来管理图片了。