性能优化是前端开发必不可少的一环，而图片优化又是性能优化必不可少的一环，但不知道有多少开发者在开发过程中会去关注它网页开发中图片的使用，图片使用不当可能会导致网页加载卡顿、网页加载速度慢等问题。这篇文章将总结一下我以前对图片的处理。不同格式图片优劣对比有人可能会问图片优化好不好？图片格式怎么说，其实在不同的场景下选择使用不同格式的图片，就是对图片的一种优化。这是最直接、最重要但也最容易被忽视的。现在网页中常用的图片格式有JPG.PNG.SVG.WebP等，下面介绍一下它们的优缺点。JPGJPG格式的图片应该是使用最多的图片格式了。因为JPG格式采用了极其高效的压缩算法，在压缩50%甚至60%的情况下依然可以保持良好的图像质量，所以在网站设计中使用背景图、轮播图等大图时，会考虑使用JPG格式图像，但JPG始终是有损压缩。人为压缩感觉强烈或色彩丰富的图片时，可能会出现失真，不支持透明处理。PNGPNG格式的图片特点众所周知，就是高保真无损压缩。需要时首选PNG格式，显示高清细腻，但也有一个明显的问题就是太大。SVGSVG格式图像的一个显着特点是它是可编程的并且基于xml语法。同时，作为矢量图，可以无限放大。它不变形，因此可以轻松适应不同的手机屏幕。与PNG和JPG相比，它的体积更小，只有1kb甚至更小，但它最大的缺陷是渲染成本太高，所以我们在选择一些小的和单色的图标时，可以考虑使用SVG中的图片格式，如图所示。一般我们都会将SVG格式的图片上传到iconfont中，这样既方便管理又方便使用。同时iconfont上还有很多其他设计师精心设计的小图标，可以直接使用，是不是很方便呢？WebP和gif这两兄弟一般是用来显示动态图片的，但是WebP也可以用来显示静态图片。WebP最大的优点就是无损压缩和体积小，但是浏览器支持太差了。再来看caniuse数据：从图中可以看出，WebP格式在苹果设备和IE上基本是不支持的，所以缺乏浏览器支持是它的硬伤，所以我们在显示动画的时候不得不选择gif，即使它尺寸很大，渲染开销也很大。图像优化方案图像质量压缩图像压缩应该是图像优化最常用的解决方案，因为它非常简单。只需要将图片上传到tinypng、知图等在线压缩图片平台即可。压缩会降低图片质量。精灵图片常用于将多个小图标组合成一张图片，然后将合成图片作为背景图片，可以减少网络对图片的请求。使用前可能需要使用请求10个网络小图标，使用后您可以通过请求来完成它。我个人一般使用网站gopng在线生成。它还可以自动生成相应的css代码base64。对一个图片地址进行base64编码后，会得到一串字符串。把这个字符直接放到img的src属性中在网上会发现浏览器可以识别这串字符，不需要发送网络请求直接解析，这样可以达到减少网络请求的目的可以实现，但是base64编码后的图片质量要比原图高，所以只会用在一些小质量的icon图片上，否则得不偿失。使用base64编码的常见解决方案是webpack的url-loader。例如：module.exports={module:{rules:[{test:/\.(png|jpg|gif)$/,use:[{loader:'url-loader',options:{limit:8192}}]}]}}上面的配置是通过url-loader将8k以下的数据进行base64编码，转换成一串DataUrlcss来代替简单的图标。这个优化方案应该可以理解。其实就是在写代码之前考虑一下设计稿中有哪些内容可以通过代码来实现。如果可以通过代码实现，尽量使用代码。同时在实现的时候更多的考虑绘图性能。如果可以使用css3进行GPU硬件加速，尽量使用css3属性。这些可以在不影响渲染性能的情况下减少图像的使用。响应式图片加载什么是响应式图片加载？其实就是在不同分辨率的设备上显示不同尺寸的图片，避免资源浪费。常用的方法是CSS3媒体查询（mediaquery）。我们来看一个例子：@mediascreenand(max-width:375px){img{background-image:url('phone.png');}}@mediascreenand(max-width:768px){img{background-image:url('tablet.png');}}图片延迟加载lazyloading的目的是加快页面加载速度，为了不让图片一次加载所有图片。通过将图片地址存放在一个img标签的属性中，当图片滚动到页面时，将src属性替换为图片地址，达到懒加载的效果。webpack图片优化图片压缩webpack还可以对图片进行压缩，使用image-webpack-loader压缩指定质量的输出图片。我们来看一个具体的例子：{test:/\.(png|jpg|gif|svg)$/,use:['file-loader',{loader:'image-webpack-loader',options:{bypassOnDebug:true,mozjpeg:{progressive:true,quality:65},optipng:{enabled:false,},pngquant:{quality:'65-90',speed:4},gifsicle:{interlaced:false,},//thewebp选项将启用WEBPwebp:{enabled:false,},limit:1,name:'[name].[ext]?[hash]'}}]}上面的配置指定了各种格式图片的压缩质量，并通过哈希编码重命名输出的合成精灵图像。webpack的webpack-spritesmith插件提供了自动合成sprite图片的功能，可以自动生成对应的CCTV文件，非常方便。我们来看一个具体的例子：constSpritesmithPlugin=require('webpack-spritesmith')newSpritesmithPlugin({src:{cwd:path.resolve(__dirname,'src/asserts'),glob:'*.png'},target:{图片:path.resolve(__dirname,'src/spritesmith-generated/sprite.png'),css:path.resolve(__dirname,'src/spritesmith-generated/sprite.css')},apiOptions:{cssImageRef:"src/sprite.png"复制代码}})通过上面的配置，可以将asserts目录下的所有png文件合成为sprite图片，并输出到对应的目录，同时也可以生成对应的样式文件。样式文件的语法会根据你配置的样式文件的后缀动态生成，比如这里我们配置sprite.css，生成的文件内容为css语法：.icon-checkout{background-image:网址(src/sprite.png);背景位置：-96px-56px；宽度：34px；height:32px;}.icon-clock{背景图片:url(src/sprite.png);背景位置：-96px0px；宽度：56px；height:56px;}.icon-close{background-image:url(src/sprite.png);背景位置：0px0px；宽度：96px；height:96px;}如果把配置中的sprite.css改成sprite.scss，那么生成的语法就是scss语法：@mixinsprite-width($sprite){width:nth($sprite,5);}@mixinsprite-height($sprite){height:nth($sprite,6);}@mixinsprite-position($sprite){$sprite-offset-x:nth($sprite,3);$sprite-offset-y:nth($sprite,4);背景位置：$sprite-offset-x$sprite-offset-y;}@mixinsprite-image($sprite){$sprite-image:nth($sprite,9);背景图片：url(#{$sprite-image});}@mixinsprite($sprite){@includesprite-image($sprite);@includesprite-position($sprite);@include精灵宽度($精灵);@includesprite-height($sprite);}@mixinsprites($sprites){@each$spritein$sprites{$sprite-name:nth($sprite,10);.#{$sprite-name}{@includesprite($sprite);}}}这样你就可以使用中使用的样式语言来生成需要的语法不是很方便吗？综上所述，本文简要介绍了Web开发中各种图片格式的优缺点以及一些常用的图片优化。希望这篇文章对大家以后做图片优化的时候有所帮助。如有错误或不严谨的地方，欢迎批评指正，喜欢请点赞收藏
