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/