图片引入

占位图

在开发阶段，通常需要填充一些图片来预览页面效果，可以使用线上占位图生成服务。

https://picsum.photos/900/320

使用占位图生成服务时应该指定占位图尺寸，使开发页面更接近实际效果。

雪碧图

雪碧图（CSS Sprites）是一种网页图片应用处理方式。其实就是把网页中一些背景图片整合到一张图片文件中，再利用 CSS 的background-image、background-repeat 和 background-position 属性组合，以精确的定位出背景图片的位置。

特点

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

使用建议

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

内联图

内联图像（Inline Image）通过 Data URLs 协议在文档中嵌入图像。

Data URLs 由四个部分组成：前缀(data:)、数据类型、如果非文本则为可选的 base64 标记、数据本身：

data:[<mediatype>][;base64],<data>

mediatype 是个 MIME 类型的字符串，例如 "image/jpeg" 表示 JPEG 图像文件。如果被省略，则默认值为 text/plain;charset=US-ASCII。

如果数据是文本类型，你可以直接将文本嵌入 (根据文档类型，使用合适的实体字符或转义字符)。如果是二进制数据，你可以将数据进行Base64 编码之后再进行嵌入。

特点

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

使用建议

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