我的项目开发中的图片问题

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

这外面最常见的图片解决可能就是图片压缩和图片格式转换。

图片压缩

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

如果只是大量图片压缩，咱们能够应用诸如https://tinypng.com/ 这样的
在线图片解决工具，然而他们都有一个问题，即能解决的图片量或免费问题。
如果有上百张图片要解决，应用他们是比拟麻烦的。

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

并不是说十几分钟很长，只是说 你明晓得，本能够几秒实现的事件，
却要花这么久，长此以往，你会感觉尽管收费但很不划算。

图片格式转换

第二个问题，也是基于3倍图很大的问题。如果咱们应用惯例的png或jpg图片，
在保障图片品质的状况下，那么再怎么压缩，都是有个上限的。

此时换一个空间占用更小的图片格式就能够解决这个上限问题。
咱们能够将图片转换成webp和avif这两种格局，他们的大小十分小。

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

    <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>

那么，浏览器将基于从上到下的程序，顺次查找图片，如果第一种格局的图片
浏览器能够渲染，就进行向下加载图片。

于是当你我的项目有上百张图片的时候，你就须要对这上百张图片进行格局转换。

bat-sharp

正是因为我的项目开发中的这两个图片解决问题，我开发了一个工具bat-sharp。
他能够几秒钟就解决几百张图片的压缩和格局转换。

集体感觉很好用，所以发了个npm包，举荐给大家。

对于bat-sharp你可能有一些问题。

为什么叫bat-sharp?

为什么叫bat-sharp呢？因为它底层应用的是sharp这个图片解决包，
我这里次要是封装了一些批处理的能力，所以叫bat-sharp。

为什么它这么快？

因为sharp包底层是libvips，一个c++写的图片解决库。

应用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,  },})

请留神outputConfig, 依据你要输入的格局不同，外部字段不同。
不过也有一些雷同的字段，比方管制图片品质的quality字段。

最初

bat-sharp的GitHub地址：https://github.com/cunzaizhuy...

对于bat-sharp的解说视频：https://www.bilibili.com/vide...
对于如果在援用图片的时候应用多种格局：https://www.bilibili.com/vide...

我是飞叶，欢送关注。