图片优化篇
在前端领域,我们可能无时无刻都要与图片打交道,说到图片优化,不如说是一种权衡,接触到最多的图片方案有:JPEG/JPG,PNG,Base64,WebP,SVG,接下来让我们来看看各自的特点以及适用场景
- JPEG/JPG
特点就是有损压缩,体积小,加载快
缺点:不支持透明,有损压缩处理矢量图和Logo时,人为压缩导致图片模糊比较明显
使用场景:大的背景图,轮播图或Banner图出现 - PNG
特点:比JPG有更强的色彩表现力,支持透明
缺点:体积大
使用场景:小的Logo,颜色简单且对比强烈的图片 - SVG
特点:文本文件,体积小,不失真,兼容性好
缺点:渲染成本高 - Base64
特点:文本文件,依赖编码,减少Http请求的次数
使用场景:满足以下几点即可(图片实际尺寸很小,图片无法以精灵图的形式与其他小图结合,图片跟新频率非常低) - Webp
特点:支持有损和无损压缩,支持透明
缺点:兼容性差