# 图片规范

## 图片格式

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

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

    ```shell
    # 优先考虑 JPEG 格式，条件允许的话优先考虑 WebP 格式
    # 尽量不使用PNG格式，PNG8 色位太低，PNG24 压缩率低，文件体积大
    ```
2.  背景图: 多为图标等颜色比较简单、文件体积不大、起修饰作用的图片

    ```shell
    # 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引入图片 -->
    <!-- HTML 中图片引入不需添加 width、height 属性，alt 属性应该写上 -->
    <img src="" alt="" >
    ```

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

    :::
2.  `CSS Sprites` VS `Data URIs`

    `CSS Sprites` 特点:

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

    `Data URIs`（ `base64` 编码):

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

    ```shell
    # CSS Sprites建议
    # 1. 适合使用频率高更新频率低的小图标
    # 2. 尽量不留太多的空白
    # 3. 体积较大的图片不合并
    # 4. 确保要合并的小图坐标数值和合并后的 Sprites 图尺寸均为偶数

    # Data URIs（base64编码）建议:
    # 1. 适合更新频率高的小图片，如某些具备自定义功能的标题icon等
    # 2. 转换成 Base64 编码的图片应小于 2KB
    # 3. 移动端不使用 Base64 编码
    # 4. 要兼容 IE6/IE7 的不使用
    ```

## 参考

1. [图片规范](https://guide.aotu.io/docs/image/format.html)
2. [W3C](https://www.w3.org/)
3. [Apple Developer](https://developer.apple.com/)
