不用再看图片优化指南啦:v-img 介绍

·  阅读 1455

介绍

你是否早就看过所谓的万字长文,上面陈述了各种图片优化技巧,看完之后,你点赞、收藏,然后就没有下文了?

你是否早就听说了webp,但考虑到了兼容性,你又老老实实用回了jpg、png?

你是否在项目中拿到UI切的图片就用,使用 img 元素能显示就行,等项目上线了,才发现图片体积过大、刚打开首屏就发送了几十个图片请求,这时才想到对图片进行压缩、使用懒加载?

现在,使用 vue 技术栈的同学有福利啦。大家不需要再重复上述操作了,使用 v-img 组件,就可以解决上述烦恼。

你不需要掌握图片优化技巧、下载各种图片压缩工具,也不需要考虑 webp 的兼容性,也不用再去找懒加载的类库,这一切组件都帮你做了。

你继续使用 jpg、png,让组件帮你返回 webp,让图片加载更快,更节省流量,就是这样简单!

那么,这个组件到底怎么用呢?很简单,就是把代码里的 img 替换成 v-img 就可以了!

效果展示

说得这么神奇,到底效果如何,我们先来一睹为快。

  • 懒加载

hire-lazy-loading.gif

  • 启用webp/使用阿里云OSS服务

image.png

  • 启用webp/项目私有化部署

image.png

案例分析

下面来看一个项目在引入 v-img 前后的对比。

优化前

在没有使用 v-img 的时候,项目首页的加载情况是这样的:

image.png

如图所示, 首屏图片总体积为 947.1 KB,请求数量为 61 个。

优化后

使用v-img 开启 webp 后:

image.png

如上图所示, 首屏图片体积减少为 668.9 KB。

开启 v-img 的懒加载功能,首页加载情况如下:

image.png

最终,首屏图片总体积为 609.4 KB,图片请求数量减少为 13 个。

也即,使用 v-img 后,首屏总体积大约减少 350 KB,图片请求数量减少约 50 个,而你不需要了解各种图片优化技巧、还有烦琐的兼容性检测,组件都帮你做啦!

揭密

那么, v-img 内部究竟做了什么呢? 其基本设想是:

<v-img src="https://domain.com/path/original.jpg" />
复制代码
  1. 传参原始图片 url
  2. 自动在原 url 添加一系列参数 ?format=webp
  3. 返回优化后的图片

默认配置适用于图片放在阿里云OSS的场景,如果项目中使用的是其他图片服务或私有化部署,可以修改 provider 参数

其核心逻辑如下:

要是想更详细地了解内部机制,可以查阅文档,或者直接阅读源码,文末会附上相关链接。

结语

我们最初做这个组件的想法很简单,就是想在项目中使用webp。

有了这个想法,我们就开始动手设计并实现。

在此期间,把所属的项目全部用 v-img 实践了一波,提高了 Lighthouse 的分数,提升了用户体验。

此次研发 v-img 的经历不同于以往,总结起来有如下几点:

  1. 我们解决的,是自己当前所在场景遇到的问题,而非过去的场景,亦非别人遇到的问题
  2. 我们实践了多个场景(包括使用云服务、私有化部署),而非仅仅满足于单一场景
  3. 此次成果是由多人合作共同产出的,而非以往的一人设计、一两人实现的协作模式。可以说,v-img 是我们集体智慧的结晶🙏

image.png

总的来说,这是一个值得自豪的成果😎。如果你也喜欢,欢迎使用,随手点一颗⭐️。

相关链接

分类:
前端
标签:
分类:
前端
标签: