vite-plugin-images-format
TypeScript icon, indicating that this package has built-in type declarations

1.0.4 • Public • Published

vite-plugin-images-format

vite插件: 把png,jpg图片压缩并转换成webp或avif格式,并替换文件引用路径

用法

npm install vite-plugin-images-format -D
import imagesFormat from 'vite-plugin-images-format';

export default defineConfig({
  plugins: [
      imagesFormat({
        entry: resolve(__dirname, './src/public/images'),  //入口目录
        outDir: resolve(__dirname, 'src/public/images/artifact'),   //输出目录,建议将目录加入忽略文件,不用提交转化后的图片到仓库,
        imageType: ['.png', '.jpg'], //处理图片类型
        sharpType: 'webp', //生成的格式 webp 或 avif
        opt: { quality: 75,  effort: 4 }, //图片压缩参数
        isClear: true, //是否清理重新生成
        isReplacePath: true, //是否替换图片引用路径
        replaceList: ['.vue'], //需要替换图片引用路径文件的扩展名
      })
  ]
});

配置 【默认值】

{
  entry: '', //入口
  imageType: ['.png', '.jpg'], //处理图片类型
  sharpType: 'webp', //生成的格式 webp 或 avif
  opt: { quality: 75,  effort: 4 }, //图片压缩参数
  outDir: '', //输出目录
  isClear: true, //是否清理重新生成
  isReplacePath: true, //是否替换图片引用路径
  replaceList: ['.vue'], //需要替换图片引用路径文件的扩展名
}
// opt 建议默认值  webp默认值{ quality: 75,  effort: 4 } avif默认值{ quality: 50,  effort: 4 }
// quality: 80 指定了 WebP 编码的质量,这个值可以在 0 到 100 之间设置,数值越高,图像质量越好,但文件大小也会随之增大。在这里,quality 被设置为 80,意味着编码后的图像质量比默认值更高。
// effort: 6 指定了 WebP 编码器的压缩程度。这个值可以在 0 到 6 之间设置,数值越高,压缩效果越好,但也会增加编码时间。在这里,effort 被设置为 6,意味着压缩效果比默认值更好,但也可能会增加编码时间。

Package Sidebar

Install

npm i vite-plugin-images-format

Weekly Downloads

9

Version

1.0.4

License

ISC

Unpacked Size

21 kB

Total Files

9

Last publish

Collaborators

  • abbott123