webpack 压缩图片

压缩前:

压缩后:

 压缩后基本上是压缩了70-80%左右

1.依赖版本及配置

  "imagemin-webpack-plugin": "^2.4.2",

  "imagemin-mozjpeg": "^7.0.0",

  "imagemin-pngquant": "^5.0.1",

  "webpack": "^3.6.0", //基于webpack3的项目

  plugins: [

    new ImageminPlugin({

      pngquant: ImageminPngquant({ 

        quality: [0.65, 0.90], // 压缩级别,范围0-1  

        speed: 4, //速度,范围1-11  

      }),

      test: /\.(jpe?g|png|gif|svg)(\?.*)?$/i,

      optipng: {

        optimizationLevel: 7 // 0-7的优化级别  

      },

      gifsicle: {

        interlaced: true, // 是否隔行扫描gif进行模糊效果  

        optimizationLevel: 3 // 0-3的优化级别  

      },

      jpegtran: {

        progressive: true, // 是否无损压缩  

      },

      mozjpeg: {

        quality: 65, // 图片质量,范围0-100  

        progressive: true // 是否启用渐进式编码  

      },

      svgo: {  //不需要可注释     "imagemin-svgo": "^11.0.1",

        plugins: [

          { removeViewBox: false },

          { cleanupIDs: false }

          // 可以添加更多SVGO插件配置  

        ]

      },

      plugins: [

        ImageminMozjpeg({

          quality: 75,

          progressive: true,

        }),

      ],

    }),

 //其他配置

]

 2.不同图片格式优缺点

jpeg/jpg

  • jpeg/jpg 压缩比还色彩不错 (web开发都使用这种格式)

  • jpeg/jpg的使用场景比较大的图 如轮播

  • jpeg/jpg的缺陷 比如logo不适合

png

  • png的优点(1.做透明的背景)

  • png的使用场景 :使用比较小的图片如icon等使用如logo等(需要纹理、线条等)

  • png 的缺陷(体积比较大,imagemin-pngquant针对png压缩设置60-85%左右)

  • imahemin-pngquant 工具压缩

webp

  • 可以用工具生成webp的格式,webp压缩出来的体积比png更小

  • 兼容性一般只支持80%

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/31533.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【项目工具】相关工具整理

陆续整理... 在线画饼图等:https://www.liuchengtu.com/chart/histogram/ - 迅捷画图 在线话流程图:https://www.processon.com/diagrams - ProcessOn 在线ps编辑图:https://www.uupoop.com/ - 在线PS软件

JDK为什么要配置Paht和Classpath

目录 一、Path环境变量 二、Classpath环境变量 三、总结 在Java中,JDK(Java Development Kit)的配置是开发Java应用程序的重要步骤之一。配置JDK主要包括设置两个关键的环境变量:Path和Classpath。这两个环境变量在Java开发和运…

定个小目标之刷LeetCode热题(26)

这道题属于一道简单题&#xff0c;可以使用辅助栈法&#xff0c;代码如下所示 class Solution {public boolean isValid(String s) {if (s.isEmpty())return false;// 创建字符栈Stack<Character> stack new Stack<Character>();// 遍历字符串数组for (char c : …

探索Java异常处理的奥秘:源码解析与高级实践

1. 引言 在Java编程的广阔天地中,异常处理是确保程序健壮性、稳定性和可维护性的重要基石。对于Java工程师而言,深入理解Java异常处理的机制,并能够在实践中灵活运用,是迈向卓越的重要一步。 2. 基本概念 在Java中,异常(Exception)是程序执行期间出现的不正常或错误情况…

项目3:从0开始的RPC框架(扩展版)-2

六. 自定义协议 1. 需求分析 在目前的RPC框架中&#xff0c;采用Vert.x的HttpServer作为服务提供者的Web服务器&#xff0c;底层使用HTTP协议进行网络传输。但HTTP协议只是RPC框架网络传输的一种可选方式&#xff0c;还有其它更好的选择。 RPC框架注重性能&#xff0c;但HTT…

基于组件的架构:现代软件开发的基石

目录 前言1. 基于组件的架构概述1.1 什么是组件&#xff1f;1.2 组件的分类 2. 基于组件的架构的优势2.1 提高代码的可重用性2.2 增强系统的灵活性2.3 简化维护和升级2.4 促进团队协作 3. 实现基于组件的架构3.1 识别和定义组件3.2 设计组件接口3.3 组件的开发和测试3.4 组件的…

【启明智显产品分享】工业级HMI芯片——Model3,不止是速度,USB\CAN\8路串口

一、引言 Model3作为一款工业级HMI芯片&#xff0c;其性能卓越且功能全面。本文将从多个角度深入介绍Model3芯片&#xff0c;以展示其不仅仅是速度的代表。 二、Model3核心特性介绍 Model3工业级跨界MCU是一款国产自主的基于RISC-V架构的高性能芯片&#xff0c;内置平头哥E…

作为一名车载测试工程师,核心能力是什么?

核心能力 汽车系统知识&#xff1a;作为车载测试工程师&#xff0c;首先需要具备深入的汽车系统知识&#xff0c;包括动力系统、传动系统、底盘系统、车身系统等各个方面的知识。只有对汽车系统有足够的了解&#xff0c;才能进行有效的测试和验证工作。 测试方法和工具&#xf…

【文献及模型、制图分享】“一带一路”沿线国家水资源禀赋及开发利用分析

公众号新功能 目前公众号新增以下等功能 1、处理GIS出图、Python制图、区位图、土地利用现状图、土地利用动态度和重心迁移图等等 2、核密度分析、网络od分析、地形分析、空间分析等等 3、地理加权回归、地理探测器、生态环境质量指数、地理加权回归模型影响因素分析、计算…

jenkins中配置参数化,并在python脚本接收参数实现参数化执行

在公司内进行Monkey测试脚本集成jenkins时&#xff0c;因为需要指定公司内不同的app进行测试。那么可以有两种方法解决该问题&#xff0c;要么创建多个脚本文件&#xff0c;多个jenkins jobs&#xff0c;进行构建。要么可以在配置job时通过传参数的方式&#xff0c;在python脚本…

Vue与TypeScript的配合:如何在Vue项目中使用TypeScript,利用静态类型提高代码的可维护性

环境搭建: 在你的 Vue 项目中使用 TypeScript,使你的代码具有静态类型检查、IDE 的类型提示等有益的功能。以下是搭建 Vue 和 TypeScript 的开发环境的步骤: 创建一个项目 使用 Vue CLI 创建一个新的Vue项目是最简单的方法: vue create my-project 在出现的提示中,选择…

算法基础精选题单 动态规划(dp)(区间dp)(个人题解)

目录 前言&#xff1a; 正文&#xff1a; 题单&#xff1a;【237题】算法基础精选题单_ACM竞赛_ACM/CSP/ICPC/CCPC/比赛经验/题解/资讯_牛客竞赛OJ_牛客网 (nowcoder.com) NC50493 石子合并&#xff1a; NC50500 凸多边形的划分&#xff1a; NC235246 田忌赛马&#xff1a…

【机器学习】klearn基础教程

scikit-learn&#xff08;通常缩写为sklearn&#xff09;是一个用于Python编程语言的强大机器学习库。它提供了各种分类、回归、聚类算法&#xff0c;以及数据预处理、降维和模型评估的工具。以下是sklearn的基础教程&#xff0c;帮助你开始使用它&#xff1a; 1. 安装scikit-…

神经网络的卷积操作中不同的卷积核和不同的填充获得同样的输出

神经网络的卷积操作中不同的卷积核和不同的填充获得同样的输出 nn.Conv2d(in_channels,out_channels,kernel size, stridel, padding-0,dilationl,groupsl,biasTrue,padding_modezeros,deviceNone, dtypeNone)nn.Conv2d卷积输人数据的格式是(batch_size,C&#xff0c;H&#x…

排序算法、堆排序、大顶堆、小顶堆、手写快排-215. 数组中的第K个最大元素、2336. 无限集中的最小数字

目录 215. 数组中的第K个最大元素 题目链接及描述 题目分析 堆排序分析 堆排序代码编写 快排分析 快排代码编写 2336、无限集中的最小数字 题目链接及描述 题目分析 代码编写 215. 数组中的第K个最大元素 题目链接及描述 215. 数组中的第K个最大元素 - 力扣&#…

python函数——基础

一、函数基础 函数体&#xff08;功能代码块&#xff09; 函数是执行特定任务的代码块&#xff0c;通过调用函数名并传递参数&#xff08;如果有的话&#xff09;来执行这些任务。 函数的参数 参数列表由一系列参数组成&#xff0c;使用逗号分隔。实参&#xff1a;调用函数时…

C#.net6.0语言+B/S架构+前后端分离 手术麻醉信息管理系统源码

C#.net6.0语言&#xff0b;B/S架构前后端分离 手术麻醉信息管理系统源码 什么是手术麻醉信息管理系统 满足医院等级评级需求 满足电子病历评级需求 满足科室需求 术前 1、患者术前评估/诊断 2、术前讨论制定手术方案 3、手术准备 4、术前准备 术中 1、送手术室 2、麻…

数据库浅识及MySQL的二进制安装

数据库基础概念与MySQL二进制安装与初始化 使用数据库的必要性 数据库可以结构化储存大量数据信息&#xff0c;方便用户进行有效的检索访问 有效的保持数据信息的一致性&#xff0c;完整性&#xff0c;降低数据冗余 可以满足应用的共享和安全方面的要求 数据库基本概念 数据…

C语言经典算法题第一题

题目&#xff1a;古典问题&#xff1a;有一对兔子&#xff0c;从出生后第3个月起每个月都生一对兔子&#xff0c;小兔 子长到第三个月后每个月又生一对兔子&#xff0c;假如兔子都不死&#xff0c;问每个月的兔子总数 为多少&#xff1f; #include <stdio.h>int main() …

Swagger文档渲染,将Filter过滤器中抛出的异常错误消息返回前端显示

一、应用场景 在swagger通过/v2/api-docs获取到后端接口数据后&#xff0c;使用过滤器对/v2/api-docs请求进行拦截&#xff0c;然后对获取到的数据进行处理&#xff0c;当在处理过程中对Filter过滤器中抛出的异常错误消息进行捕获&#xff0c;并将捕获到的异常错误消息返回到前…