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

相关文章

SpringKafka消息发布之KafkaTemplate与事务支持功能

《SpringKafka消息发布之KafkaTemplate与事务支持功能》通过本文介绍的基本用法、序列化选项、事务支持、错误处理和性能优化技术,开发者可以构建高效可靠的Kafka消息发布系统,事务支... 目录引言一、KafkaTemplate基础二、消息序列化三、事务支持机制四、错误处理与重试五、性能优

Python如何使用__slots__实现节省内存和性能优化

《Python如何使用__slots__实现节省内存和性能优化》你有想过,一个小小的__slots__能让你的Python类内存消耗直接减半吗,没错,今天咱们要聊的就是这个让人眼前一亮的技巧,感兴趣的... 目录背景:内存吃得满满的类__slots__:你的内存管理小助手举个大概的例子:看看效果如何?1.

一文详解SpringBoot响应压缩功能的配置与优化

《一文详解SpringBoot响应压缩功能的配置与优化》SpringBoot的响应压缩功能基于智能协商机制,需同时满足很多条件,本文主要为大家详细介绍了SpringBoot响应压缩功能的配置与优化,需... 目录一、核心工作机制1.1 自动协商触发条件1.2 压缩处理流程二、配置方案详解2.1 基础YAML

如何自定义Nginx JSON日志格式配置

《如何自定义NginxJSON日志格式配置》Nginx作为最流行的Web服务器之一,其灵活的日志配置能力允许我们根据需求定制日志格式,本文将详细介绍如何配置Nginx以JSON格式记录访问日志,这种... 目录前言为什么选择jsON格式日志?配置步骤详解1. 安装Nginx服务2. 自定义JSON日志格式各

MySQL中慢SQL优化的不同方式介绍

《MySQL中慢SQL优化的不同方式介绍》慢SQL的优化,主要从两个方面考虑,SQL语句本身的优化,以及数据库设计的优化,下面小编就来给大家介绍一下有哪些方式可以优化慢SQL吧... 目录避免不必要的列分页优化索引优化JOIN 的优化排序优化UNION 优化慢 SQL 的优化,主要从两个方面考虑,SQL 语

python dict转换成json格式的实现

《pythondict转换成json格式的实现》本文主要介绍了pythondict转换成json格式的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下... 一开始你变成字典格式data = [ { 'a' : 1, 'b' : 2, 'c编程' : 3,

MySQL中慢SQL优化方法的完整指南

《MySQL中慢SQL优化方法的完整指南》当数据库响应时间超过500ms时,系统将面临三大灾难链式反应,所以本文将为大家介绍一下MySQL中慢SQL优化的常用方法,有需要的小伙伴可以了解下... 目录一、慢SQL的致命影响二、精准定位问题SQL1. 启用慢查询日志2. 诊断黄金三件套三、六大核心优化方案方案

Redis中高并发读写性能的深度解析与优化

《Redis中高并发读写性能的深度解析与优化》Redis作为一款高性能的内存数据库,广泛应用于缓存、消息队列、实时统计等场景,本文将深入探讨Redis的读写并发能力,感兴趣的小伙伴可以了解下... 目录引言一、Redis 并发能力概述1.1 Redis 的读写性能1.2 影响 Redis 并发能力的因素二、

Python实现html转png的完美方案介绍

《Python实现html转png的完美方案介绍》这篇文章主要为大家详细介绍了如何使用Python实现html转png功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 1.增强稳定性与错误处理建议使用三层异常捕获结构:try: with sync_playwright(

基于Python开发批量提取Excel图片的小工具

《基于Python开发批量提取Excel图片的小工具》这篇文章主要为大家详细介绍了如何使用Python中的openpyxl库开发一个小工具,可以实现批量提取Excel图片,有需要的小伙伴可以参考一下... 目前有一个需求,就是批量读取当前目录下所有文件夹里的Excel文件,去获取出Excel文件中的图片,并