简介
随着互联网和 WEB 技术的迅速发展,越来越多的人关注前端开发。前端工作涵盖了诸多领域,其中重要一环便是图像优化。在网站或应用开发中,图像压缩是常见的优化手段。在 Node.js 语言环境中,有非常优秀的图像压缩包 imagemin,其中一个插件 imagemin-mozjpeg-full 优化了 jpg 格式图片的压缩效果,特别是对于高质量图片的压缩效果有更好的表现。
本篇文章将会对 imagemin-mozjpeg-full 包的使用方法进行详细解析,帮助想要使用该包的前端开发者更快速、更有效完成图像压缩的工作。
安装
使用 npm 安装 imagemin-mozjpeg-full:
npm install imagemin-mozjpeg-full -D
基本使用
在项目的文件中,引入并配置 imagemin-mozjpeg-full 作为 imagemin 的插件即可使用。
-- -------------------- ---- ------- ----- -------- - -------------------- ----- ------------------- - --------------------------------- ------ -- -- - ----- --------------------------------- - ------------ -------------------- -------- - --------------------- -------- -- -- ------ --------- -- -- - -- --------------------- -----
插件配置
quality
设置压缩质量 0-100,默认为 75。
例如,以下代码压缩一张图片质量为 80:
await imagemin(['images/*.{jpg,jpeg}'], { destination: 'compressed_images', plugins: [ imageminMozJPEGFull({ quality: 80 // 设置压缩质量 0-100,默认为 75 }) ] })
progressive
开启渐进式压缩。
例如,以下代码开启渐进式压缩:
await imagemin(['images/*.{jpg,jpeg}'], { destination: 'compressed_images', plugins: [ imageminMozJPEGFull({ progressive: true // 默认为 false }) ] })
dcScanOpt
开启动态色差扫描优化。
例如,以下代码开启动态色差扫描优化:
await imagemin(['images/*.{jpg,jpeg}'], { destination: 'compressed_images', plugins: [ imageminMozJPEGFull({ dcScanOpt: 3 // 默认为 1 }) ] })
trellisQuantisation
抖动减少量化误差。
例如,以下代码开启抖动减少量化误差:
await imagemin(['images/*.{jpg,jpeg}'], { destination: 'compressed_images', plugins: [ imageminMozJPEGFull({ trellisQuantisation: false // 默认为 true }) ] })
trellisQuantisationStrength
设置抖动减少量化误差的强度。
例如,以下代码设置抖动减少量化误差的强度为 2:
-- -------------------- ---- ------- ----- --------------------------------- - ------------ -------------------- -------- - --------------------- -------------------- ----- ---------------------------- - -- --- - -- - --
总结
本文介绍了 npm 包 imagemin-mozjpeg-full 的基本使用方法以及详细的插件配置说明,通过该包的使用可以在 Node.js 环境中更优雅、高效的完成图片压缩的任务。同时,了解了该包的使用也为前端开发者在图片优化上提供了更多的选择和方式。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6006735b890c4f7277583f78