性能优化-图片优化

前端性能优化

图片优化

先来看一张JPG图片有损压缩的解析过程

png8/png24/png32之间的区别

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

每种图片格式都有本身的特色，针对不一样的业务场景选择不一样的图片格式很重要

• jpg有损压缩，压缩率高，不支持透明
• png支持透明，浏览器兼容好
• webp压缩程度更好，在ios webview有兼容性问题

• svg矢量图，代码内嵌，相对较小，图片样式相对简单的场景

• jpg —— 大部分不须要透明图片的业务场景
• png —— 大部分须要透明图片的业务场景
• webp —— 安卓所有

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

进行图片压缩：针对图片真实状况，舍弃一些相对可有可无的色彩信息

css雪碧图（精灵图）：把你的网站用到的一些图片整合到一张单独的图片中以达到减小网站的http请求数量

image inline：将图片的内容内嵌到html当中以减小http请求数量

使用矢量图： 使用SVG进行适量图的绘制，使用iconfont解决icon问题

在安卓下使用webp： WebP 的优点体如今它具备更优的图像数据压缩算法，能带来更小的图片体积，并且拥有肉眼识别无差别的图像质量；同时具有了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都很是优秀、稳定和统一

图片压缩
雪碧图网站