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

By 大伟哥 | 2022-05-17,周二, 19:06

为你的网站启用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核心内建的图片样式很容易地转换你的图片。

转换图片格式到WEBP

很不幸的是,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 模块来管理图片了。

评论

添加新评论

此字段内容将保密,不会被其他人看见。
  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。
验证码
发布评论前,请通过下面的验证,以免被当作垃圾评论机器人屏蔽。
3 + 7 =
计算出这道简单的算术题并键入答案。例如、1+3,就输入 4。