几百张图片快速批处理工具bat-sharp.js介绍

本文介绍了在项目开发中遇到的大量图片处理问题,如压缩和格式转换,以及如何使用bat-sharp.js这个JavaScript工具进行快速批处理。bat-sharp.js基于sharp库,利用libvips实现高速处理,能在几秒内完成数百张图片的操作。文章还提供了安装和使用方法以及相关资源链接。
摘要由CSDN通过智能技术生成

项目开发中的图片问题

某些前端项目里含有大量图片,对这些图片进行系列操作似乎是必须的,
因为你不可能指望设计师给到你的图片就是能最终上到生产的。
你可能需要对图片进行一系列的处理,才能满足最终要求。

这里面最常见的图片处理可能就是图片压缩和图片格式转换。

图片压缩

因为dpr的关系,如果是做移动端项目,切图往往都是按照设备物理像素给定的,
经常是3倍图,这些图片是很大的。所以进行图片压缩是必不可少的一环。

如果只是少量图片压缩,我们可以使用诸如https://tinypng.com/ 这样的
在线图片处理工具,但是他们都有一个问题,即能处理的图片量或收费问题。
如果有上百张图片要处理,使用他们是比较麻烦的。

以tinypng这个网站为例,虽然他说在免费版本里,一次最多可以帮忙转换20张图片,
但是如果你压缩完20张,马上再去压缩另外20张,
有一定的概率它不会帮你压缩完,会提示你:too many files uploaded。
那么这个时候,如果你可能需要稍等几分钟,再次操作,
它才可能帮你多压缩几张。
如此下来,压缩上百张图片,可能需要你几分钟甚至十几分钟时间。

并不是说十几分钟很长,只是说 你明知道,本可以几秒完成的事情,
却要花这么久,长此以往,你会觉得虽然免费但很不划算。

图片格式转换

第二个问题,也是基于3倍图很大的问题。如果我们使用常规的png或jpg图片,
在保证图片质量的情况下,那么再怎么压缩,都是有个下限的。

此时换一个空间占用更小的图片格式就可以解决这个下限问题。
我们可以将图片转换成webp和avif这两种格式,他们的大小非常小。

然后在需要引入图片的代码里,这样写:

    <
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值