项目开发中的图片问题有些前端项目包含大量的图片。看来有必要对这些图片进行一系列的操作，因为你不能指望设计师给你的图片最终能上传到production。您可能需要对图片进行一系列的处理才能达到最终的要求。这里最常见的图像处理可能是图像压缩和图像格式转换。图像压缩是由于dpr的关系。如果是移动端的项目，图片的裁剪往往是根据设备的物理像素给定的，往往是图片的3倍，而且这些图片都非常大。所以图像压缩是必不可少的部分。如果只是少量的图片压缩，我们可以使用在线的图片处理工具，比如https://tinypng.com/，但是他们都有一个问题，就是能处理的图片量还是问题充电。如果您要处理数百张图像，使用它们可能会很麻烦。以tinypng网站为例，虽然他说在免费版中，他一次最多可以转换20张图片，但是如果你压缩了20张图片，马上压缩另外20张图片，有一定的概率会不帮你压缩完成后会提示：上传的文件太多。所以这个时候，如果你可能需要等几分钟再操作，可能会帮你多压几张。这样，压缩数百张图片可能会花费您几分钟甚至十几分钟的时间。并不是说十分钟很长，只是你知道，本来几秒钟就可以完成的事情，需要这么长时间才能完成。长此以往，你会觉得虽然免费，但不值得。图片格式转换的第二个问题也是基于3折图很大的问题。如果我们使用常规的png或者jpg图片，在保证图片质量的情况下如何压缩是有一个下限的。这时候换成占用空间小的图片格式就可以解决这个下限问题。我们可以把图片转成webp和avif格式，而且它们的尺寸都非常小。然后在需要导入图片的代码中这样写：然后，浏览器会按照从上到下的顺序搜索图片，如果firstA格式图片浏览器可以渲染，停止下载图片。所以当你的项目有上百张图片的时候，你需要对这上百张图片进行格式转换。bat-sharp正是因为在项目开发中遇到的这两个图像处理问题，我开发了一个工具bat-sharp。他可以在几秒钟内完成数百张图片的压缩和格式转换。个人觉得很好用，所以发了一个npm包，推荐给大家。您可能对bat-sharp有一些疑问。为什么叫蝙蝠尖？为什么叫蝙蝠尖？因为底层使用了sharp图像处理包，所以我这里主要封装了一些批处理能力，所以叫bat-sharp。为什么这么快？因为sharp包的底层是libvips，一个用c++写的图像处理库。使用bat-sharpinstallnpmibat-sharp-Dusageconst{batSharp}=require('bat-sharp');batSharp({inputArr:['./images/*.png'],format:'webp',//pngjpegwebpavifetc.outputPath:'./images2/',outputConfig:{//参考https://sharp.pixelplumbing.com/api-output#pngquality:60,},})请注意outputConfig，根据你要输出的格式不同，内部字段也不同。但是也有一些相同的字段，比如控制图片质量的quality字段。最后bat-sharp的GitHub地址：https://github.com/cunzaizhuy...关于bat-sharp的讲解视频：https://www.bilibili.com/video...关于引用时如何使用图片各种格式：https://www.bilibili.com/video...我是飞夜，欢迎关注。
