认识达内从这里开始

图片压缩在web前端性能优化中是会经常用到的一个压缩方法，而本文我们就通过案例分析来简单了解一下，web前端图片压缩常见问题分析。

有损压缩过程：一张JPG图片的解析分别要进行：

颜色空间的转换：从RGB的颜色空间转到其他的颜色空间;

进行重采样：区分高频和低频的颜色变换;

进行DCT过程：对高频的颜色采样结果进行压缩，这样压缩的收益会比较大;

再对数据进行量化;

后进行编码(encoding);

终得到JPEG-CompressedImageData，即真正显示出来的JPG图片。虽然这是一种有损压缩，但是很多情况下，这些损失的数据并不影响显示;

png8/png24/png32之间的区别

png8：256色+支持透明;

png24：2^24色+不支持透明;

png32：2^32色+支持透明;

不同格式图片常用的业务场景

jpg有损压缩，压缩率高，支持透明;应用：大部分不需要透明图片的业务场景;

png支持透明，浏览器兼容好;应用：大部分需要透明图片的业务场景;

webp(2010年由谷歌推出)压缩程度更好，在ioswebview中有兼容性问题;应用：安卓全部;

svg矢量图，代码内嵌，相对较小，用于图片样式相对简单的场景;应用：比如logo和iconfont;

1.图片压缩

针对真实图片情况，舍弃一些相对无关紧要的色彩信息，对图片进行压缩;

2.css雪碧图

将网站上用到的一些图片整合到一张单独的图片中，从而减少网站HTTP请求数量。原理为：设定整张雪碧图可示区域，将想要显示的图标定位到该处(左上角);缺点：整合图片比较大时，一次加载比较慢。

如天猫的雪碧图：

很多情况下，并不是所有的小图标都放在一张雪碧图中，而是会适当进行拆分。现在使用雪碧图的场景比较少了。

自动生成雪碧图样式

3.网页内联图片(Imageinline)

将图片的内容内嵌到html当中，减少网站的HTTP请求数量，常用于处理小图标和背景图片。

缺点：

浏览器不会缓存内联图片资源;

兼容性较差，只支持ie8以上浏览器;

超过1000kb的图片，base64编码会使图片大小增大，导致网页整体下载速度减慢;

所以要根据场景使用，不过内联图片减少HTTP请求的优点还是很显著的。比如，在开发中小于4KB或8KB的图片都会通过构建工具自动inline到HTML中，这种情况下Imageinline带来的图片大小增长其实是比增加HTTP请求次数更优的。

4.矢量图SVG与iconfont

使用iconfont解决icon问题

应尽量使用该方式，比如可以采用阿里巴巴矢量图库：

可以选择格式进行下载：

可以看到它们的大小有着明显的差异：

使用SVG进行矢量图的控制

SVG意为可缩放矢量图形(ScalableVectorGraphics)。SVG使用XML格式定义图像。

5.webp

webp的优势体现在它具有更优的图像压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量;同时具备了无损和有损的压缩模式、Alpha透明以及动画的特性。在JPEG和PNG上的转化效果都非常优秀、稳定和统一。安卓上不存在兼容性问题，推荐安卓下使用。

【免责声明】本文系本网编辑部分转载，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请在30日内与管理员联系，我们会予以更改或删除相关文章，以保证您的权益!更多内容请加danei456学习了解。欢迎关注“达内在线”参与分销，赚更多好礼。