在项目中你是如何做图片优化的？

• 使用背景图

  • 对于页面中与页面内容无关，起修饰作用的图片，使用背景图 background-image（如页面中小图标尤其多次重复出现的，纹理性的背景），与页面内容相关展示性的图片如（广告图、产品图）使用 img 标签。

• 图片品质

  • 注意图片优化：在保证视觉效果的情况下，选择最小的图片格式与图片质量，以减少加载时间。

  • 注：通常颜色丰富线条复杂的图片选择 .jpg，颜色单一的小图片使用 .gif，需要更好的显示细节或需要支持半透明的图片使用 .png 等。

• 使用精灵图

  • 运用 CSS sprites 技术集中小的背景图或图标，减少页面 http 请求。