图片规范

图片格式

常见的图片格式有 GIF 、PNG8 、PNG24 、JPEG 、WEBP ，根据图片格式的特性和场景需要选取适合的图片格式。

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

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

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

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

图片大小

中国普通家庭的宽带基本能达到 8Mbps ，实际速率大约为 500—900KB/s ，全国 3G/4G 用户占有比超过了 50% ，为了保证图片能更好地加载展示给用户看，(图片的大小约定标准随全国网速的改变而改变)团队约定：

1. PC 平台单张的图片的大小不应大于 200KB

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

图片质量

1. 上线的图片都应该经过压缩处理，压缩后的图片不应该出现肉眼可感知的失真区域

2. 60 质量的 JPEG 格式图片与质量大于 60 的相比，肉眼已看不出明显的区别，因此保存 JPEG 图的时候，质量一般控制在 60 ，若保真度要求高的图片可适量提高到 80，图片大小控制在 200KB 以内

图片引入

1. 普通引入

   ::: code-group

   <!-- HTML引入图片 -->
   <!-- HTML 中图片引入不需添加 width、height 属性，alt 属性应该写上 -->
   <img src="" alt="" >

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

   :::

2. CSS Sprites VS Data URIs

   CSS Sprites 特点:

   • 减少请求数

   • 加速图片的显示

   • 维护更新成本大

   • 更多的内存消耗，特别是大体积或有过多空白的 Sprites 图

   • 图片渗漏，相邻的不需展示的图片有可能出现在展示元素中，特别是在高清设备移动设备上

   Data URIs（ base64 编码):

   • 减少请求数

   • 转换文件体积大，大约比原始的二进制大 33%

   • IE6 / IE7 不支持

   • 图片显示相对较慢，需要更多的 CPU

   # CSS Sprites建议
   # 1. 适合使用频率高更新频率低的小图标
   # 2. 尽量不留太多的空白
   # 3. 体积较大的图片不合并
   # 4. 确保要合并的小图坐标数值和合并后的 Sprites 图尺寸均为偶数
   
   # Data URIs（base64编码）建议:
   # 1. 适合更新频率高的小图片，如某些具备自定义功能的标题icon等
   # 2. 转换成 Base64 编码的图片应小于 2KB
   # 3. 移动端不使用 Base64 编码
   # 4. 要兼容 IE6/IE7 的不使用

参考

1. 图片规范

2. W3C

3. Apple Developer