Introduction of bat-sharp.js, a fast batch processing tool for hundreds of pictures

Problems with pictures in project development

Some front-end projects contain a large number of pictures, and it seems necessary to perform a series of operations on these pictures.
Because you can't expect a designer to give you a picture that will end up in production.
You may need to perform a series of processing on the image to meet the final requirements.

The most common image processing here may be image compression and image format conversion.

Image Compression

Because of the relationship of dpr, if it is a mobile project, the cut image is often given according to the physical pixels of the device.
Often 3x images, these images are large. Therefore, image compression is an essential part.

If it is only a small amount of image compression, we can use online image processing tools such as https://tinypng.com/ , but they all have a problem, that is, the amount of images that can be processed or the problem of charging.
If there are hundreds of images to process, it can be cumbersome to use them.

Take tinypng as an example, although he said that in the free version, it can help convert up to 20 images at a time,
But if you finish compressing 20 sheets, immediately go to compress another 20 sheets,
There is a certain probability that it will not compress for you, and will prompt you: too many files uploaded.
Then at this time, if you may need to wait a few minutes and operate again,
It may help you compress a few more pictures.
In this way, it may take you a few minutes or even ten minutes to compress hundreds of pictures.

It's not that ten minutes is long, it's just that you know what you could have done in a few seconds.
But it takes so long, and in the long run, you will feel that although it is free, it is not worth it.

Image format conversion

The second question is also based on the problem that the 3x graph is very large. If we use regular png or jpg images,
In the case of ensuring the quality of the picture, no matter how you compress it, there is a lower limit.

At this time, changing to a picture format that takes up less space can solve this lower limit problem.
We can convert images into two formats, webp and avif, which are very small in size.

Then in the code that needs to import the image, write:

 <picture>
        <source srcset="@/assets/a.avif" type="image/avif">
        <source srcset="@/assets/a.webp" type="image/webp">
        <img src="@/assets/a.jpg" @error="onErr">
    </picture>

Then, the browser will look for the pictures in turn based on the order from top to bottom, and if the picture browser of the first format can be rendered, it will stop loading the picture downward.

So when your project has hundreds of images, you need to format these hundreds of images.

bat-sharp

It is precisely because of these two image processing problems in project development that I developed a tool bat-sharp.
He can compress and format hundreds of images in seconds.

I personally think it is very useful, so I sent an npm package and recommend it to everyone.

You may have some questions about bat-sharp.

Why is it called bat-sharp?

Why is it called bat-sharp? Because it uses the image processing package sharp at the bottom,
I mainly encapsulate some batch processing capabilities here, so it is called bat-sharp.

Why is it so fast?

Because the bottom layer of the sharp package is libvips, an image processing library written in C++.

use bat-sharp

install

 npm i bat-sharp -D

usage

 const { batSharp } = require('bat-sharp');

batSharp({
  inputArr: ['./images/*.png'],
  format: 'webp', // png jpeg webp avif等
  outputPath: './images2/',
  outputConfig: { // 参考 https://sharp.pixelplumbing.com/api-output#png
    quality: 60,
  },
})

Please note that outputConfig, the internal fields are different depending on the format you want to output.
However, there are also some of the same fields, such as the quality field that controls the quality of the image.

at last

GitHub address of bat-sharp: https://github.com/cunzaizhuyi/bat-sharp

An explanation video about bat-sharp: https://www.bilibili.com/video/BV1ea411U7Vu/
About using multiple formats when citing pictures: https://www.bilibili.com/video/BV17t4y157Ep/

I'm Feiye, welcome to follow.