图片相关的优化

png8: 256色 + 支持透明
png24: 2^24色 + 不支持透明
png32: 2^24色 + 支持透明

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

  • jpg 有损压缩,压缩率高,不支持透明,适合大部分不需要透明图片的业务场景。
  • png 支持透明,浏览器兼容好,适合大部分需要透明图片的业务场景。
  • webp压缩程度更好,在ios webview有兼容性问题,适合安卓全部。
  • svg矢量图,代码内嵌,相对较小,图片格式相对简单的场景,适合图片样式相对简单的业务场景。

方案:

    1. 进行图片压缩。
    1. CSS雪碧图
      优点:减少网站的HTTP请求数量
      缺点:整合图片比较大时,一次加载比较慢。
    1. Image inline (base64压缩)
      优点:减少网站的HTTP请求数量
    1. 使用矢量图
      使用svg进行矢量图的绘制
      使用iconfont解决icon问题
    1. 在安卓下使用webp
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 我的故乡是个很美丽的地方,春天百花盛开,夏天百草丰茂,秋天秋收万亩,冬天白雪飘扬。我尤其喜欢春天,它会给人带...
  • 滚烫的 泪花 如雨水 簌簌而...
    山魂MountainSoul阅读 226评论 12 20
  • 喜欢玩微信的朋友一定也有看到或参加过一些学习群。经常有许多勤奋好学的“志同道合”者,一起组建各种互相学习的交流群,...
    邵公子GZS阅读 171评论 0 1