响应式图片-标记图片

性能

现实中移动网络的实际情况是文件请求次数和请求文件的大小同样重要，也就是说我们还需要减少请求图片的次数，而不仅仅是图片文件的大小。我们所谓的延时（latency）是指请求与响应之间存在的延后问题。

总之性能是真正响应式设计的基本组成部分。在实践中，这意味着你需要减小文件大小的同时，还要减少请求文件的次数。一种较少图片数据的好办法是压缩图片，或者减少图片的数量。接下来会介绍一些方法来实现无需图片文件的图形展示。

缩短延迟如何不断改善页面加载时间，而使带宽的图表趋于平缓：

文本问题

通过网络字体（web fonts）和 CSS 技术使精美的网络排版成为可能，而无需再将文字保存为图片使用。

CSS 除了调整样式属性，它还可以被用于其他图形效果，特别是 CSS 的阴影效果，并且它比运用图像的方法效果更好。但是，你需要知道的是，用 CSS 生成阴影、圆角或其他效果，是有处理和渲染成本的，并且在手机上会尤其明显。所以，使用 CSS 来实现一些图形效果，需要谨慎使用。

CSS 如何影响加载时间？

CSS 背景图片技巧

background-size 属性：

• cover：确保的是包含块被完全填充。图片会尽可能小，图片的最大边会溢出包含块。
• contain：图片会完全被显示出来。

Unicode 符号字符

还有另一种方法可以避免使用图片并保持网站的响应性，当符号和图标被以字体的形式应用，它们就具有了跟字体一样的响应式特征，它们可以无限的被放大、能被当作文本进行处理，支持 CSS 特效，还不会产生额外的下载量。

Unicode 字符集

使用 Unicode 字符时需要确保在 meta 标签中将 charset 属性值设为 utf-8。

<meta http-equiv="Content-Type" content="text/html"; charset="utf-8">

图标字体（icon font）

Zocial
Font Awesome
We Love Icon Fonts!
Icon fonts on CSS-Tricks