Image

如何对图片进行优化

大方向

• 选择合适的图片格式 是否支持透明度
• 图片压缩 保证清晰的压缩
• 雪碧图 多张合一
• 图标类型资源推荐使用 iconfont
• 使用 base64 格式 减少请求
• 使用 CDN 加载图片
• 图片懒加载 延迟加载图片
• 图片预加载 提前加载图片
• 响应式加载图片 根据viewport
• 渐进式加载图片 低分辨率 到 高分辨率

CSS Sprites

详细信息

CSS Sprites（精灵图），将一个页面涉及到的多张图片都包含到一张大图中去，然后利用 CSS 的 background-image，background-repeat，background-position 属性的组合进行背景定位

优点：

• 减少网页的 http 请求，从而大大提高了页面的性能
• 减少图片大小

缺点：

• 合并时处理麻烦（有序、预留沟空间）
• 不好定位
• 难以维护和扩展