Web性能优化-图片相关的优化

图片压缩

有损压缩.png

压缩之后 肉眼几乎察觉不出来 压缩之后少了的那些东西.

png8 /png24 /png 32之间的区别 ?

• png8 -------- 256 色 + 支持透明( 256 即为 2 ^ 8 ,用8 bit 来存一个像素的内容,占用空间更小)
• png24------- 2 ^ 24 色 + 不支持透明 (24bit)
• png32 ------ 2 ^ 24 色 + 支持透明 (有符号 32bit)

每种图片格式都有自己的特点 ,针对不同的业务场景选择不同的图片格式很重要.

• jpg有损压缩,压缩率高,不支持透明 (大部分不需要透明图片的业务场景)

• png 支持透明,浏览器兼容好 ,(大部分需要透明图片的业务场景)
  怎么记住 ? 放个屁 是透明的 . 所以需要透明的地方用png
  

  

  淘宝首页的图标.png
  
  因为需要背景透明 所以这个图片就是png 的
  
  

  image.png

• webp 压缩程度更好,在ios webview 有兼容性问题,(在安卓中支持的好)

• svg矢量图 代码内嵌,相对较小 —— (图片样式相对简单的业务场景)

图片压缩的几种方法

针对真实图片情况，舍弃一些相对无关紧要的色彩信息
1: CSS雪碧图
把你的网站上用到的一些图片整合到一张单独的图片中
这样带来的好处就是 减少你的网站的HTTP请求数量, 但是带来的缺点就是合并之后的图片大小比较大, 如果这个图片没有加载出来 ,那么整个页面都显示不出来.
看了一下facebook 的雪碧图 . 没有所有的都放一张图片 而是分开放.

Facebook雪碧图.png

Facebook雪碧图.png

从facebook复制过来的雪碧图.png

把他按照 9 10 11 的顺序排列
那么涉及到怎么来抠这个图.自己慢慢试也能试出来,用工具更方便.
总体就是把他分成3 块
雪碧奶牛 老外还是会起名字 , 太形象
直接点下边就生成出来了. 牛牛牛

       .icon{
            display: flex;
        }
        .icon9{
            background: url('image/facebook.png') no-repeat -1px -67px;
            width: 28px;
            height: 28px;
        }
        .icon10{
            background: url('image/facebook.png') no-repeat -1px -1px;
            width: 28px;
            height: 28px;
        }
        .icon11{
            background: url('image/facebook.png') no-repeat -1px -34px;
            width: 28px;
            height: 28px;
        }

最后效果

横向排列 9 10 11 .png

2: Image Inline
将图片的内容内嵌到html 当中, 从而减少网站的http 请求数量
淘宝首页找了一圈没看见
这种不适合大图片.因为本身用base64 的数据 ,不会对图片进行压缩等等. 效率不如webp 高. 但是对于小的icon 这样可以减少一次http 请求

3: 使用矢量图
使用SVG进行矢量图的绘制,使用iconfont解决icon问题
看这里阿里的iconfont ,想用的 登录之后 下载就可以了

阿里的iconfont.png

其实矢量图就是画出来的 .参照w3c

4: 在安卓下使用webp
WebP 的优势体现在它具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量；同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都非常优秀、稳定和统一。
淘宝首页中有很多 webp 格式的图片 .不举例子了

在线压缩图片: 网站

image.png

最后的结果.png

压缩完之后的 这个图片从 6 kb 压缩到2 kb .

最终测试两个png.png

确实看不出来啥区别....图片压缩对性能优化影响还是蛮大的.