前端性能优化之图片优化篇

图片优化篇

在前端领域，我们可能无时无刻都要与图片打交道，说到图片优化，不如说是一种权衡，接触到最多的图片方案有：JPEG/JPG，PNG，Base64，WebP，SVG，接下来让我们来看看各自的特点以及适用场景

1. JPEG/JPG
   特点就是有损压缩，体积小，加载快
   缺点：不支持透明，有损压缩处理矢量图和Logo时，人为压缩导致图片模糊比较明显
   使用场景：大的背景图，轮播图或Banner图出现
2. PNG
   特点:比JPG有更强的色彩表现力，支持透明
   缺点：体积大
   使用场景：小的Logo，颜色简单且对比强烈的图片
3. SVG
   特点：文本文件，体积小，不失真，兼容性好
   缺点：渲染成本高
4. Base64
   特点：文本文件，依赖编码，减少Http请求的次数
   使用场景：满足以下几点即可（图片实际尺寸很小，图片无法以精灵图的形式与其他小图结合，图片跟新频率非常低）
5. Webp
   特点：支持有损和无损压缩，支持透明
   缺点：兼容性差