图片的格式的分析、 图片优化

 图片优化

计算图片大小

     对与100*100像素的图片来说 ,一个图片有10000个像素点,如果每个像素点是由RGBA存储的话,每个像素是由4个通道形成的,每个通过是由于1个字节形成的(8位=1个字节),大概这个图片大概39kb。

    所以优化图片有二点

        1、减少像素点

        2、减少每个像素点的显示的颜色

 1,不用图片,对于简单的修饰图片用css的样式完成

 2,对于移动端的图片的,没必要的直接加载原图浪费带宽,一般的图片cdn加载,可以计算出适合屏幕的宽度,然后请求相应裁剪好的图片。

 3,对于小图是使用base64,因为每张的图片的请求相对于一次的http请求,所有转成 base64文本

 4,将图片的使用 雪碧图减少http请求

 总结图片特点: 

 webp :webp在ios上存在兼容的问题,webp支持有损、无损的压缩,动态、静态图片的压缩比例优于jpeg/gif/jpeg2000等格式,非常适用于网络传输

svg:svg是矢量图代替位图,对于图片缩放不会失真,很多主流浏览器已经支持,还有部分商家服务不支持,

png :png的格式有png8,png24,png32 ,png8支持索引透明和alpha透明,png24不支持透明,png32支持透明,虽然支持无损的压缩,对于大的图片的还是不适用的在wweb页面上。

 gif : 是无损的压缩的,支持动画,是8位的位图,可以制作动图gif 动画,对于颜色少的logo,各种小图标也可以使用

jpeg:不适用简单点颜色的压缩,适合丰富的图片的压缩。

webfont: 字体图片的。

原文地址:https://www.cnblogs.com/yayaxuping/p/9673697.html