前端性能——图片相关的优化

一、一张JPG图片的解析过


前端性能——图片相关的优化_第1张图片

      对于原图片来说要进行颜色空间的转换,将RGB的颜色空间转到其他的颜色空间;然后进行重采样,区分高频和低频的颜色变换,从而进一步进行DCT的过程(即对高频的颜色变化采样过程进行压缩),最后对数据进行量化,再进行encoding编码。总体来说通过图片上方的五个过程就得到了JPG-Compressed Image Date。

      JPG格式的图片采用的压缩方式是有损压缩,很多情况下,在压缩过程中损失的图片数据并不是非常重要的,肉眼的层面基本没有明显差异,因此,压缩之后的图片文件虽然会损失图片信息,但是并不影响图片的观看使用效果。

 

二、png8/png24/png32之间的区别(无损压缩)


png8 —— 256色 + 支持透明

png24 —— 2^24色 + 不支持透明

png32 —— 2^24色 + 支持透明

从上到下,文件的相对大小逐步增加,色彩的表达度,丰富度也会增加

综上JPG的有损压缩以及PNG的无损压缩来讲,每种图片格式都有自己的特点,针对不同的业务场景选择不同的图片格式很重要

 

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


jpg有损压缩,压缩率高,不支持透明;

png支持透明,浏览器兼容性好,在压缩的过程中可以降阶;

webp压缩程度更好,在ios webview有兼容性问题;

svg矢量图,代码内嵌,相对较小,图片样式相对简单的场景,质量比较高,有比较现成的库;

 

jpg —— 大部分不需要透明图片的业务场景;

png —— 大部分需要透明图片的业务场景

webp —— 安卓全部

svg矢量图 —— 图片相对简单的业务场景

 

四、进行图片压缩的几种方法


图片压缩的概念:针对真实图片情况,舍弃一些相对无关紧要的色彩信息

1.CSS雪碧图

      把网站上用到的一些图片整合到一张单独的图片中,从而减少网站的HTTP请求数量。然后通过利用CSS的background position属性控制要显示的具体内容。

      但是这一种方法有一个缺点是,多张图片合起来以后会导致图片文件的大小增加,如果在http请求的过程中这一张图片没有成功请求,就会导致该页面上所有的关联图片显示失效。 

 

2. Image Inline

      Image Inline的方式是指将图片的内容内嵌到HTML中(以Base64的编码格式),从而减少网站的HTTP请求数量。

      这种情况是很常见的,就比如一个1kb的小icon,数十个icon的界面中,真正损耗资源的不是图片本身,而是多次请求的过程。

 

3.使用矢量图

      使用SVG进行矢量图的绘制

      使用iconfont解决icon问题

 

4.在安卓下使用webp

      webp的优势在于它具有更优的图像数据压缩算法,能带来更小的图片体积,而且拥有肉眼识别无差异的图像质量;同时具备了无损和有损的压缩模式、Alpha透明以及动画的特性,在JPEG和PNG上的转化效果都非常优秀、稳定和统一。

 

png图片压缩的网站:tinypng.com

webp图片格式转化网站:zhitu.isux.us

雪碧图生成网站:www.spritecow.com

你可能感兴趣的:(前端性能,前端图片优化)