zoukankan      html  css  js  c++  java
  • 前端性能优化成神之路—图片相关的优化

    图片PNG8/PNG24/PNG32之间的区别

    PNG8——256色 + 支持透明

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

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

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

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

    png支持透明,浏览器兼容好,大部分需要透明图片的业务场景

    webp压缩程度更好,在ios webview有兼容性问题,安卓全部

    svg矢量图,代码内嵌,相对较小,图片样式相对简单的场景,比如一些字体图标等

    图片压缩的几种方法

    css雪碧图:把网站上用到的一些图片整合到一张单独的图片中,可以减少网站的HTTP请求数量,缺点是整合的图片比较大的时候加载比较慢,如果这张图片没加载出来的时候,里面所有需要的图片都会显示不出来

    Image inline:将图片的内容内嵌到html中,可以减少网站的HTTP请求数量

    webp

  • 相关阅读:
    统计创建对象个数
    动手动脑
    开学第一周心得
    放假第五周总结
    放假第四周总结
    第一周总结
    04-异常处理-动手动脑
    03-继承与多态-动手动脑
    02-类和对象-跟踪类对象创建个数
    02-类和对象-动手动脑
  • 原文地址:https://www.cnblogs.com/LO-ME/p/10589690.html
Copyright © 2011-2022 走看看