几百张图片快速批处理工具bat-sharp.js介绍_前端 sharp 压缩图片

项目开发中的图片问题

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

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

图片压缩

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

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

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

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

图片格式转换

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

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

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

    <