图片规范

一、命名规范

• 有图床：图片业务（可选） + 图片功能类别（必选）+ 图片模块名称（可选） + 图片精度（可选）
• 无图床：图片功能类别（必选）+ 图片模块名称（可选） + 图片精度（可选）

1.1 图片业务：

具体业务名称，如 cloud、site 等。

1.2 图片功能类别：

1. mod_：是否公共，可选
2. icon：模块类固化的图标
3. logo：LOGO 类
4. btn：按钮
5. bg：可平铺或者大背景

1.3 图片模块名称：

• goodslist：商品列表
• goodsinfo：商品信息
• useravatar：用户头像

1.4 图片精度：

• 普清：@1x
• Retina：@2x | @3x

1.5 示例：

// 公共模块：
[email protected]
site_mod_btn_goodlist.png

// 非公共模块：
[email protected]
site_btn_goodlist.png

二、图片格式

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

2.1 GIF

GIF 文件内部分成许多存储块，用来存储多幅图象或者是决定图象表现行为的控制块，用以实现动画和交互式应用。

特性：

• 优秀的压缩算法使其在一定程度上保证图像质量的同时将体积变得很小。
• 可插入多帧，从而实现动画效果。
• 可设置透明色以产生对象浮现于背景之上的效果。
• 由于采用了 8 位压缩，最多只能处理 256 种颜色，故不宜应用于真彩色图片。

2.2 PNG

PNG 是 20 世纪 90 年代中期开始开发的图像文件存储格式，是一种支持多种颜色的无损压缩格式。PNG 格式支持 8 位、24 位、32 位真彩色图像，支持透明度，支持动画，支持半透明，支持压缩。

特性：

• 支持 256 色调色板技术，文件体积小。
• 无损压缩。
• 最高支持 48 位真彩色图像以及 16 位灰度图像。
• 支持 Alpha 通道的透明/半透明特性。
• 支持存储附加文本信息，以保留图像名称、作者、版权、创作时间、注释等信息。
• 渐近显示和流式读写，适合在网络传输中快速显示预览效果后再展示全貌。
• 最新的 PNG 标准允许在一个文件内存储多幅图像。

2.3 JPEG

JPEG 是一种针对照片视频而广泛使用的一种有损压缩标准方法。

特性：

• 适用于储存 24 位元全采影像。
• 采取的压缩方式通常为有损压缩。
• 不支持透明或动画。
• 压缩比越高影像耗损越大，失真越严重。
• 压缩比在 10 左右肉眼无法辨出压缩图与原图的差别。

2.4 WEBP

WebP，是一种同时提供了有损压缩与无损压缩的图片文件格式。

特性：

• 同时提供有损压缩和无损压缩两种图片文件格式。
• 文件体积小，无损压缩后，比 PNG 文件少了 45％ 的文件大小；有损压缩后，比 JPEG 文件少了 25% - 34% 文件大小。
• 浏览器兼容差，目前只支持客户端 Chrome 和 Opera 浏览器以及安卓原生浏览器（Andriod 4.0+）。

3 总结

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

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

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

  • PNG 与 GIF 格式，优先考虑使用 PNG 格式，PNG 格式允许更多的颜色并提供更好的压缩率。
    • 8 位 PNG：适合简单、颜色数量少的图像，例如简单的图标、标志。
    • 24 位 PNG：适合需要丰富色彩和细节的图像，例如照片、复杂的插图。
    • 32 位 PNG：适合需要透明背景或半透明效果的图像，通常用于 UI 设计和网页开发。
  • 图像颜色比较简单的，如纯色块线条图标，优先考虑使用 PNG8 格式，避免不使用 JPEG 格式。
  • 图像颜色丰富而且图片文件不太大的（40KB 以下）或有半透明效果的优先考虑 PNG24 格式。
  • 图像颜色丰富而且文件比较大的（40KB - 200KB）优先考虑 JPEG 格式。
  • 条件允许的，优先考虑 WebP 代替 PNG 和 JPEG 格式。

三、图片引入

HTML 中图片引入需添加 width、height 属性，alt 属性应该写上。

<img src="./mouse.jpg" height="200" width="200" title="" alt="" />

3.1 Banner

• 普通背景图一律使用 PNG-8。
• 半透明效果使用 PNG-24，若要兼容 IE6 需使用兼容图，并且在 CSS 中 background 引入。
• 大尺寸，颜色较多的图片，使用“存储为 web 格式”并适当调整图片品质，找到文件大小与图片质量的平衡点。

3.2 精灵图

• 必须使用 CSS Sprite 拼合 CSS 背景图，减少页面 HTTP 请求。
• 按类型区分拼合背景图，比如多个类型拼合在一张图里。
• 拼合时每个背景元素之间需保持间距，目前定位 10PX。