wsksvg - 支持SVG、JPEG、GIF、PNG、WebP格式图片的优化

2024-09-05 12:28

本文主要是介绍wsksvg - 支持SVG、JPEG、GIF、PNG、WebP格式图片的优化,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前言

上一篇文章介绍了 wsksvg 插件的开发思路和灵感,而本篇则详细阐述了 wsksvg 扩展功能,以及技术的介绍。通过 wsksvg 插件,开发者可以高效地优化 PNG、JPG、JPEG、WEBP 和 GIF 图像,同时对 SVG 文件进行深入处理,包括优化、生成 Vue 和 React 组件以及转换为 Base64 编码格式。这些功能不仅简化了图像管理流程,也提升了应用的性能和用户体验。结合上一篇文章的开发背景,本篇提供了具体的技术实现和配置选项。以及扩展,相对于之前来说更灵活

上一篇:wsksvg — SVG 转换与优化工具

概述

在当今前端开发中,图像和图标的优化及处理变得至关重要。wsksvg 是一款高效的工具,旨在简化图像优化工作和增强 SVG 文件的处理能力。该插件不仅可以优化多种图像格式,还能将 SVG 文件转化为 Vue 和 React 组件,甚至支持将 SVG 文件转换为 Base64 编码格式。无论是用于提升应用性能、简化组件开发还是实现更高效的资源管理,wsksvg都是一个强大的解决方案。

安装

npm install -g wsksvg

或者使用 yarn:

yarn global add wsksvg

node 环境要求20以上

使用

在安装和配置完成后,您可以开始使用 wsksvg 插件来优化图像文件或生成组件。以下是一些常见操作的示例:

  • 优化图像文件

    wsksvg  ./path/to/input.png 
    
  • 将 SVG 转换为 Vue 组件

    wsksvg  ./path/to/input.svg  ./path/to/output --vue
    
  • 将 SVG 转换为 React 组件

    wsksvg  ./path/to/input.svg  ./path/to/output --react
    
  • 将 SVG 转换为 Base64 编码

    wsksvg  ./path/to/input.svg  ./path/to/output --base
    

通过上述步骤,您可以轻松安装和配置 wsksvg 插件,以优化图像和管理 SVG 组件。

详细看上一篇:wsksvg — SVG 转换与优化工具

主要功能

wsksvg插件具备以下主要功能:

1. 图像优化

插件支持对以下图像格式进行优化:

  • PNG:通过 sharp 库,插件可以调整 PNG 图像的质量、压缩级别、过滤方式等,减少文件体积,同时保持图像质量。
  • JPG/JPEG:对 JPG 和 JPEG 图像进行优化,支持设置图像质量、启用 mozjpeg 编码、设置渐进式编码等,以减少文件体积。
  • WEBP:支持 WEBP 格式的优化,包括设置质量、启用无损压缩和调整 alpha 通道质量。
  • GIF:对于 GIF 图像,插件首先使用 sharp 库生成中间文件,然后通过 gifsicle 进行优化,以减少文件大小并提升性能。
2. SVG 文件处理
  • SVG 优化:使用 svgo 对 SVG 文件进行优化,移除冗余属性和无用代码,压缩 SVG 文件的体积。这有助于加快页面加载速度,并减少网络带宽消耗。
  • Vue 组件生成:将优化后的 SVG 文件转换为 Vue 组件。生成的 Vue 组件代码使用 v-html 指令来嵌入 SVG,便于在 Vue 项目中使用和管理。
  • React 组件生成:将 SVG 文件转换为 React 组件,支持 JSX 语法,生成的组件可直接用于 React 项目中,简化图标的使用和管理。
  • Base64 编码:将 SVG 文件转换为 Base64 编码的字符串,适用于将图像数据直接嵌入到 HTML 或 CSS 文件中,减少网络请求,提高渲染速度。

默认配置文件

插件支持通过配置文件自定义优化设置。配置文件(wsksvg.json)可以放在项目根目录或当前工作目录中。以下是一个配置文件的详细示例:

{"svgo": {"js2svg": {"indent": 2, // 设置 SVG 输出时的缩进级别,便于阅读。值为 2 表示每级缩进两个空格。"pretty": true // 是否美化输出的 SVG 代码。如果为 true,则输出的 SVG 将会更具可读性。},"plugins": [{"name": "preset-default", // 使用 SVGO 默认预设插件"params": {"overrides": {"removeViewBox": false, // 是否移除 viewBox 属性。false 表示保留,确保 SVG 在不同尺寸下正确显示。"inlineStyles": {"onlyMatchedOnce": false // 是否仅对匹配的样式进行内联。如果为 false,则所有样式都会内联。}}}},{"name": "convertStyleToAttrs", // 将内联样式转换为 SVG 属性"params": {"onlyMatchedOnce": false // 是否仅对匹配的样式进行转换。如果为 false,则所有内联样式都会被转换为属性。}},{"name": "removeAttrs", // 移除指定的属性"params": {"attrs": ["svg:style" // 移除 SVG 元素上的 style 属性]}},{"name": "addAttributesToSVGElement", // 向 SVG 元素添加额外属性"params": {"attributes": [{"width": "1em", // 设置 SVG 的默认宽度为 1em"height": "1em", // 设置 SVG 的默认高度为 1em"aria-hidden": true, // 为 SVG 添加 aria-hidden 属性,指示屏幕阅读器忽略 SVG。"focusable": "false" // 设置 focusable 属性为 false,防止 SVG 在键盘导航中获得焦点。}]}}]},"png": {"quality": 80, // PNG 图像的质量,值范围是 0 到 100。数值越高表示质量越好,文件体积也可能越大。"compressionLevel": 9, // PNG 图像的压缩级别,值范围是 0 到 9。数值越高表示压缩越强,文件体积越小。"adaptiveFiltering": true, // 是否启用自适应过滤。自适应过滤可以改善图像的压缩质量。"palette": true, // 是否使用调色板。启用调色板可以减少图像的颜色数量,减小文件体积。"dither": 0 // 设置抖动级别,值范围是 0 到 1。0 表示不使用抖动,1 表示启用抖动以改善颜色过渡。},"jpg": {"quality": 80, // JPG/JPEG 图像的质量,值范围是 0 到 100。数值越高表示质量越好,文件体积也可能越大。"mozjpeg": true, // 是否使用 mozjpeg 编码。mozjpeg 可以进一步压缩 JPG 图像,提高压缩效率。"progressive": true, // 是否启用渐进式编码。渐进式编码使图像在加载时逐渐清晰,有助于提升用户体验。"trellisQuantisation": true // 是否启用网格量化。网格量化可以提高 JPG 图像的压缩效果,减少文件体积。},"jpeg": {"quality": 80, // JPEG 图像的质量,配置与 JPG 相同。"mozjpeg": true, // 是否使用 mozjpeg 编码,配置与 JPG 相同。"progressive": true, // 是否启用渐进式编码,配置与 JPG 相同。"trellisQuantisation": true // 是否启用网格量化,配置与 JPG 相同。},"webp": {"quality": 80, // WEBP 图像的质量,值范围是 0 到 100。数值越高表示质量越好,文件体积也可能越大。"lossless": false, // 是否使用无损压缩。无损压缩可以保持图像质量,但文件体积较大。"alphaQuality": 90 // 设置 WEBP 图像的 alpha 通道质量,值范围是 0 到 100。数值越高表示透明通道的质量越好。},"gif": {"optimizeLevel": 3, // GIF 图像的优化级别,值范围是 0 到 3。数值越高表示优化越强,文件体积越小。"colors": 256, // GIF 图像的颜色数量,值范围是 1 到 256。较少的颜色可以减小文件体积。"dither": true // 是否启用抖动。抖动可以改善 GIF 图像的颜色过渡。}
}

图像格式配置

svgwsk 支持多种图像格式的优化,包括SVG, PNG、JPG、JPEG、WEBP 和 GIF。以下是每种格式的配置项说明:

svgo 配置

SVGO (SVG Optimizer) 是一个流行的工具,用于优化 SVG 文件,减少文件体积并保持图像质量。svgwsk 插件通过 svgo 对 SVG 进行优化,以下是各配置项的说明:

  • js2svg:配置 SVG 输出格式的选项。
  • plugins:定义 SVGO 插件及其参数,用于进一步优化 SVG 文件。
PNG 配置
  • quality:设置 PNG 图像的质量,范围是 0100。较高的值表示更好的质量和较大的文件体积。
  • compressionLevel:设置 PNG 图像的压缩级别,范围是 09。数值越高表示压缩越强,文件体积越小。常用的值是 9,表示最大压缩。
  • adaptiveFiltering:布尔值,控制是否启用自适应过滤。启用自适应过滤可以改善图像的压缩质量,特别是对于有色彩渐变的图像。
  • palette:布尔值,决定是否使用调色板。启用调色板可以减少图像的颜色数量,从而减小文件体积。
  • dither:设置抖动级别,范围是 010 表示不使用抖动,1 表示启用抖动以改善颜色过渡。
JPG 配置
  • quality:设置 JPG 图像的质量,范围是 0100。较高的值表示更好的质量和较大的文件体积。
  • mozjpeg:布尔值,控制是否使用 mozjpeg 编码。mozjpeg 提供更高的压缩效率。
  • progressive:布尔值,决定是否启用渐进式编码。渐进式编码使图像在加载时逐渐清晰,有助于提高用户体验。
  • trellisQuantisation:布尔值,控制是否启用网格量化。网格量化可以进一步压缩 JPG 图像,减少文件体积。
JPEG 配置

与 JPG 配置相同,因为 JPG 和 JPEG 在配置上是重复的,通常可以合并配置项。

WEBP 配置
  • quality:设置 WEBP 图像的质量,范围是 0100。较高的值表示更好的质量和较大的文件体积。
  • lossless:布尔值,决定是否使用无损压缩。无损压缩保留原始图像质量,但文件体积较大。
  • alphaQuality:设置 WEBP 图像的 alpha 通道质量,范围是 0100。较高的值表示更好的透明度质量。
GIF 配置
  • optimizeLevel:设置 GIF 图像的优化级别,范围是 03。较高的值表示更强的优化,减少文件体积。
  • colors:设置 GIF 图像的颜色数量,范围是 1256。较少的颜色可以减小文件体积,但可能影响图像质量。
  • dither:布尔值,决定是否启用抖动。抖动可以改善 GIF 图像的颜色过渡。

使用技术

svgwsk插件使用了一些核心技术和工具来实现其功能:

  • sharp:一个高性能的图像处理库,支持多种图像格式的转换和优化。它用于优化 PNG、JPG、JPEG、WEBP 和 GIF 图像。
  • gifsicle:一个用于优化 GIF 图像的命令行工具。插件使用它来进一步优化 GIF 文件。
  • svgo:一个用于优化 SVG 文件的工具。它通过移除多余的属性和代码来压缩 SVG 文件的体积。
  • @svgr/core:一个将 SVG 转换为 React 组件的库。插件利用它来生成 React 组件代码。
  • camelcase:一个用于将字符串转换为 camelCase 格式的库。插件用于生成符合 React 组件命名规则的组件名。

支持自定义配置

在项目的根目录中创建一个配置文件 wsksvg.json。你可以根据之前提供的示例进行自定义配置,以满足您的需求。

Sharp高性能 Node.js 图像处理

SVGO配置

可以自行查阅进行配置

应用场景

svgwsk 插件可以应用于各种前端开发场景中:

  1. 前端性能优化
    • 在开发过程中,通过优化图像文件来减少页面加载时间,提升用户体验。优化后的图像可以显著减小文件体积,提高加载速度。
  2. 组件开发与管理
    • 在构建组件库时,将 SVG 图标转换为 Vue 或 React 组件,简化图标的使用和管理。组件化的图标可以更容易地进行复用和维护。
  3. 资源嵌入与管理
    • 将 SVG 文件转换为 Base64 编码格式,嵌入到 HTML 或 CSS 中,减少网络请求。适用于小型图标或图像的直接嵌入,提高页面渲染效率。
  4. 自动化构建流程
    • 将插件集成到构建流程中,自动处理图像和 SVG 文件。结合构建工具(如 Webpack、Gulp 等),实现自动化优化和组件生成。

最后

以上次相比:

1.提供扩展了图片的优化与配置,

2.提供默认配置文件,也可以自定义配置优化文件,供使用者自行配置

3.扩展了生成base文件。

总结

通过配置 svgwsk 插件,你可以根据具体需求调整图像优化和组件生成的行为。了解每个配置项的作用和效果,能够帮助你更有效地使用该插件,实现更好的图像处理效果。无论是优化 SVG 文件,生成 Vue 或 React 组件,还是将 SVG 转换为 Base64 编码,svgwsk 插件都提供了灵活和强大的功能来满足你的需求。

这篇关于wsksvg - 支持SVG、JPEG、GIF、PNG、WebP格式图片的优化的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1138958

相关文章

基于Python实现一个图片拆分工具

《基于Python实现一个图片拆分工具》这篇文章主要为大家详细介绍了如何基于Python实现一个图片拆分工具,可以根据需要的行数和列数进行拆分,感兴趣的小伙伴可以跟随小编一起学习一下... 简单介绍先自己选择输入的图片,默认是输出到项目文件夹中,可以自己选择其他的文件夹,选择需要拆分的行数和列数,可以通过

MyBatisPlus如何优化千万级数据的CRUD

《MyBatisPlus如何优化千万级数据的CRUD》最近负责的一个项目,数据库表量级破千万,每次执行CRUD都像走钢丝,稍有不慎就引起数据库报警,本文就结合这个项目的实战经验,聊聊MyBatisPl... 目录背景一、MyBATis Plus 简介二、千万级数据的挑战三、优化 CRUD 的关键策略1. 查

Mysql常见的SQL语句格式及实用技巧

《Mysql常见的SQL语句格式及实用技巧》本文系统梳理MySQL常见SQL语句格式,涵盖数据库与表的创建、删除、修改、查询操作,以及记录增删改查和多表关联等高级查询,同时提供索引优化、事务处理、临时... 目录一、常用语法汇总二、示例1.数据库操作2.表操作3.记录操作 4.高级查询三、实用技巧一、常用语

利用Python脚本实现批量将图片转换为WebP格式

《利用Python脚本实现批量将图片转换为WebP格式》Python语言的简洁语法和库支持使其成为图像处理的理想选择,本文将介绍如何利用Python实现批量将图片转换为WebP格式的脚本,WebP作为... 目录简介1. python在图像处理中的应用2. WebP格式的原理和优势2.1 WebP格式与传统

k8s上运行的mysql、mariadb数据库的备份记录(支持x86和arm两种架构)

《k8s上运行的mysql、mariadb数据库的备份记录(支持x86和arm两种架构)》本文记录在K8s上运行的MySQL/MariaDB备份方案,通过工具容器执行mysqldump,结合定时任务实... 目录前言一、获取需要备份的数据库的信息二、备份步骤1.准备工作(X86)1.准备工作(arm)2.手

基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

《基于HTML5Canvas实现图片旋转与下载功能(完整代码展示)》本文将深入剖析一段基于HTML5Canvas的代码,该代码实现了图片的旋转(90度和180度)以及旋转后图片的下载... 目录一、引言二、html 结构分析三、css 样式分析四、JavaScript 功能实现一、引言在 Web 开发中,

Python如何去除图片干扰代码示例

《Python如何去除图片干扰代码示例》图片降噪是一个广泛应用于图像处理的技术,可以提高图像质量和相关应用的效果,:本文主要介绍Python如何去除图片干扰的相关资料,文中通过代码介绍的非常详细,... 目录一、噪声去除1. 高斯噪声(像素值正态分布扰动)2. 椒盐噪声(随机黑白像素点)3. 复杂噪声(如伪

Python中图片与PDF识别文本(OCR)的全面指南

《Python中图片与PDF识别文本(OCR)的全面指南》在数据爆炸时代,80%的企业数据以非结构化形式存在,其中PDF和图像是最主要的载体,本文将深入探索Python中OCR技术如何将这些数字纸张转... 目录一、OCR技术核心原理二、python图像识别四大工具库1. Pytesseract - 经典O

Python实现精准提取 PDF中的文本,表格与图片

《Python实现精准提取PDF中的文本,表格与图片》在实际的系统开发中,处理PDF文件不仅限于读取整页文本,还有提取文档中的表格数据,图片或特定区域的内容,下面我们来看看如何使用Python实... 目录安装 python 库提取 PDF 文本内容:获取整页文本与指定区域内容获取页面上的所有文本内容获取

C++ 函数 strftime 和时间格式示例详解

《C++函数strftime和时间格式示例详解》strftime是C/C++标准库中用于格式化日期和时间的函数,定义在ctime头文件中,它将tm结构体中的时间信息转换为指定格式的字符串,是处理... 目录C++ 函数 strftipythonme 详解一、函数原型二、功能描述三、格式字符串说明四、返回值五