图片格式

内容图

内容图多以商品图等照片类图片形式存在，颜色较为丰富，文件体积较大

• 优先考虑 JPEG 格式，条件允许的话优先考虑 WebP 格式
• 尽量不使用PNG格式，PNG8 色位太低，PNG24 压缩率低，文件体积大

背景图

背景图多为图标等颜色比较简单、文件体积不大、起修饰作用的图片

• PNG 与 GIF 格式，优先考虑使用 PNG 格式,PNG格式允许更多的颜色并提供更好的压缩率
• 图像颜色比较简单的，如纯色块线条图标，优先考虑使用 PNG8 格式，避免不使用 JPEG 格式
• 图像颜色丰富而且图片文件不太大的（40KB 以下）或有半透明效果的优先考虑 PNG24 格式
• 图像颜色丰富而且文件比较大的（40KB - 200KB）优先考虑 JPEG 格式
• 条件允许的，优先考虑 WebP 代替 PNG 和 JPEG 格式

图片大小

PC平台单张的图片的大小不应大于 300KB。

移动平台单张的图片的大小不应大于 100KB。

除了如查看原图等场景

图片质量

1. JPG图片必须压缩，一般80%品质即可，保证文字清晰
2. JPG图片必须使用渐进式图片：使用Photoshop的“存储为web所用格式”时候，勾选“连续”
3. 透明PNG图片必须使用压缩工具，如tinypng

图片引入

测试内容图应该写上表明图片尺寸的占位图，可以用线上占位图生成服务，如：

http://placeholder.qiniudn.com/300x200

HTML 中图片引入不需添加 width、height 属性，alt 属性应该写上，需要能表现出图片的含义

<img src="" alt="" >

CSS 中图片引入不需要引号

.jdc {
    background-image: url(icon.png);
}

CSS Sprites VS Data URIs

• CSS Sprites特点

  • 减少请求数
  • 加速图片的显示
  • 维护更新成本大
  • 更多的内存消耗，特别是大体积或有过多空白的 Sprites 图
  • 图片渗漏，相邻的不需展示的图片有可能出现在展示元素中，特别是在高清设备移动设备上

• Data URIs（base64编码）

  • 减少请求数
  • 转换文件体积大，大约比原始的二进制大33%
  • IE6 / IE7 不支持
  • 图片显示相对较慢，需要更多的CPU消耗

• CSS Sprites 使用建议

  • 适合使用频率高更新频率低的小图标
  • 尽量不留太多的空白
  • 体积较大的图片不合并
  • 确保要合并的小图坐标数值和合并后的 Sprites 图尺寸均为偶数

• Data URIs（base64编码）使用建议

  • 适合更新频率高的小图片，如某些具备自定义功能的标题icon等
  • 转换成 Base64 编码的图片应小于 2KB
  • 移动端不使用 Base64 编码
  • 要兼容 IE6/IE7 的不使用