Web 图片性能优化系列一：背景与基础

什么是响应式图片

组成网站的资源中，图片往往是网络负载的主要组成部分，占据了大部分负载而且随着时间推移，这个现象仍然会保持。虽然现在的网络连接速度持续改进，但是同样出现了越来越多的高 DPI 分辨率设备，为了在这些设备上有更好的表现，就需要有更高清晰度的图片，高清晰的同时就需要更大的文件大小。而因为仍需要支持一些相对非高 DPI 的分辨率设备，就需要有低清晰度的图片，从而就需要有更好的方案来实现针对不同设备提供不同的图片，也就是响应式图片 (Responsive images)。同时还要遵循 Web 资源的准则，保持性能和表现的平衡，合理地提供图片资源而不加载不需要使用的多余的资源。

其实，响应式图片简化来看，关键就是针对不同的设备选取合适的类型和清晰度。

给不同的设备提供刚好合适的清晰度分辨率是对性能最优的，过高的清晰度不仅意味着更多的传输时间还意味着需要缩放渲染时间，过低的清晰度就会让高 DPI 设备得不到应该有的最优体验。理论上来说确实是有可能给所有的设备提供刚好合适的清晰度。但设备的分辨率太多了，还存在不同的 DPI，所以实践上目前更合理的方案是选择一系列的主要适配的设备产生对应的图片集合，其他设备就适当的选择相近的方案图片进行缩放。

如果设置响应式图片取决于你是在哪里进行适配（CSS、HTML、JS）以及用于哪些用途（UI、UX），其中主要出现在 CSS 和 HTML 中，以下主要讲解如果选择合适的图片类型，以及如果根据清晰度等因素响应式选择图片。

Web 图片的类型

目前，主要支持两个大类：点阵图（位图 bitmap images、栅格图 raster images）、矢量图（可缩放矢量图 SVG）

• 点阵图根据压缩的类型又分为有损和无损的图片，其中使用广泛的格式主要有 JPEG , PNG, GIF, WebP
• 矢量图主要有 SVG (可缩放矢量图 SVG)

Web 有损点阵图

有损图片的压缩算法往往直接从源文件压缩的过程中丢弃一部分信息，核心就是想通过图片质量根据等级设置 1 ~ 100 降低来换取更小的大小。

最常用的有损图片就是 JPEG ，比如：数码相机拍照的时候存储成无损格式，但当下载到电脑的时候，通过有损压缩算法转换成 JPEG 格式的图片。

JPEG 支持24位真彩色，但是不支持透明，所以经常用于类似照片、不透明的图片等方面。它的缺点也很明显，极致有损的压缩会导致显示效果有明显的不同，特别容易受到二次压缩的时候的影响，即是从一个已经压缩的文件中进行有损压缩的时候效果下降特别明显。但正常来说，注意选择合适的压缩等级，效果下降往往就不会被注意到，同时大小下降百分之几十。

更出色的有损图片： WebP，但 WebP 并不是所有浏览器都支持的，所以需要实现对不支持浏览器的回退到显示 JPEG 或者 PNG格式

Web 无损点阵图

无损图片的压缩算法则正好相反，不会丢弃源文件中的信息。在 Web 中当图片质量非常关键的时候，无损图片正好合适，例如网站的 icon。

无损图片根据色值存储的位数又分为 8位图（8-bit images - 256-color）、真彩色图（Full-color images - 16.7-million-colors）

其中，无损的8位图 有代表如：png、gif，其中 gif 支持动画，他们都很适合对图片质量有要求，但是本身不需要全色和多变的透明色。

PS: 虽然 gif 只支持 8位图，但是动图可以根据一些 hack 来实现更清晰的视觉表现，参考 知乎网址

其次，无损真彩色图的代表如：全色的 PNG (24-bit png)，无损的 WebP，其中全色的 PNG 支持的色值会比 WebP 更广泛。另外注意的是，当你不需要透明色且对质量要求不是特别高的时候，应优先考虑选择 有损 WebP 或者 JPEG 而不是全色 PNG。

无损图很合适艺术图片、肖像研究、摄影等。选用8位图还是真彩色图需要经验，基础规则就是只使用简单颜色的图片使用8位图格式，当不只是使用简单颜色或者需要全部透明色支持的图片就选用全彩色图。

Web 特殊的格式 WebP

从互联网早起以来，栅格图格式只有 JPEG，GIF，PNG，为了更优化 Web 图片的加载速度和性能，谷歌（google）开发了全新的图片格式 WebP。图片压缩体积大约只有 JPEG 的2/3，并能节省大量的服务器带宽资源和数据空间，在压缩方面比 JPEG 和 PNG 的效果更优。

虽然截至目前已经有很多浏览器支持了 WebP ，比如 Chrome (谷歌浏览器) 、国内的 QQ浏览器、UC 浏览器等 Webkit内核的浏览器都支持这种格式，但是同样有一些如 IE系列、Firefox系列的浏览器占比较高的主流浏览器对 WebP 不支持，所以使用 WebP 的时候一定要实现相应的回退策略（订阅本系列教程，我会继续讲解如何更方便地解决这个问题）。

WebP 有着比 JPEG 和 PNG 更优的压缩效果，有损 WebP 支持透明度也是 JPEG 做不到的，虽然没有 PNG 色度值多，但是除非是在某些对色值有精度要求的网站图片，大部分场景开发者都会优先选择支持 WebP。

另外一方面，WebP 是支持动画的，而且压缩和表现效果比 GIF 更优，但因为不好统计以及判断浏览器对动画 WebP 是否支持，所以不好控制回退，除非你对这种占比较小的浏览器（支持 WebP 但是不支持动画 WebP）用户不考虑，建议不要使用 WebP 替代 GIF 。

Web 矢量图 SVG

矢量图 SVG 使用向量矩阵来存储几何图形以及比例实现支持任何尺寸的缩放，可以看到以下图片的例子，放大几倍后的 svg 质量依然很完美，这就是 SVG 对比点阵图的最大优点。

不过现在的设备都是以像素为基础单位的，所以所有显示输出最后都是被转化为像素。这就能明显标识矢量图想要显示在这些设备上就要经受一个叫栅格化的过程，每当图片的尺寸有变化、缩放都要经过这个计算栅格化过程，从而保证了每次显示的图片质量。

如果你熟悉创建向量矩阵，你应该熟悉注入 AI 之类的设计软件。即使这些软件的支持的本地文件格式是二进制，SVG 的格式是 XML（文本类型），它根节点标识了它的媒体类型 image/svg+xml 。这个特性使它可以在文本编辑器中直接修改，或者内联到 HTML 中，甚至可以直接在 SVG 中使用 CSS 和 media queries (媒体查询)。

虽然从 1999 年的 W3C 标准中就已经将 SVG 纳入了，但真正被网站使用就是在最近这几年。因为对于不同分辨率设备以及显示屏的显示无暇让它倍受欢迎。

当然啦，SVG 并不是全能的，优势也主要限制在以下几个方面，例如：呈现 Logo 、图标、线形艺术等。另一方面，那些固定色块由几何图形组成的图片也很适合。

如何选择

通过上面的大致介绍每种图片格式的使用场景，掌握一个场景选择哪些图片格式最适合显得尤为重要，这里整理了一些常用的注意点以及经验来划分图片格式的选择，你可以依照表格根据要提供的内容来选择最合适的图片格式。

图片格式	支持颜色	图片类型	压缩类型	合适场景
PNG	全色	栅格图	无损	质量缺失不可接受的情况，亦或是展示内容需要完全的透明度或者全色。适用于任何一种图片格式，但不像适用于照片的 JPEG 压缩度那么高
PNG (8)	256	栅格图	无损	内容不需要全色或者只需要简单 1 位透明度支持的，比如图标、像素阵列
GIF	256	栅格图	无损	没有 PNG (8) 压缩度高，其他一样，但支持动画，也主要用于动画
JPEG	全色	栅格图	有损	内容需要全色，或者没有使用透明度，而且可以接受质量的丢失。比如照片
SVG	全色	矢量图	无压缩	内容支持全色而且要支持缩放的时候质量不变。特别适合线形艺术、几何图形、其他非照片类型的内容，不需要特别处理就优化了多分辨率显示的效果
WebP(有损)	全色	栅格图	有损	其他方面跟 JPEG 一样，但更好的是支持透明度以及压缩性能以及效果
WebP(无损)	全色	栅格图	无损	其他方面跟全色 PNG 一样，但有更好的压缩性能

最新系列教程，可以关注我的博客 https://biaomingzhong.github.io/