前端性能优化——图片优化

本文内容来自《前端性能优化原理与实践》掘金小册，本人通过整理，制成表格，供大家方便参照理解。

图片优化——质量与性能的权衡

前言：就前端性能优化而言，图片优化可谓是其必不可少的环节。但是与其说是在做优化，不如说是在做“权衡”，因为就前端而言，就是去压缩图片体积或是一开始就选取体积较小的图片格式。而这种操作，是以牺牲一部分成像质量为代价的。因此我们的主要任务，是尽可能的去寻求一个质量与性能之间的平衡点，并在不同业务场景下做好图片方案的选型工作。

前置知识： 一、二进制位数与色彩的关系。     在计算机中，像素用二进制树来表示。不同的图片格式中像素与二进制位数之间的对应关系是不同的。一个像素对用的二进制位数越多，它可以表示的颜色种类就越多，成像效果越久越细腻，文件体积也会越大。     一个二进制位表示两种颜色（0|1对应黑|白），如果一种图片格式对应的二进制位数有n个，那么它就可以呈现2^n中颜色 二、经典的小图标解决方案——雪碧图（CSS Sprites）     一种将小图标和背景图像合并到一张图片上，然后利用CSS的背景定位来显示其中的每一部分的技术（其被运用于众多使用大量小图标的网页应用智商。其可取图像的一部分来使用，使得使用一个图像文件替换多个小文件成为可能，相较于一个小图标一个图像文件，单独一张图片所需的HTTP请求更少，对内存和宽带更加友好）

图片格式

介绍/关键字

优点

缺点

兼容性

使用场景

处理方案

JPEG/JPG

有损压缩、体积小、加载快、不支持透明

其最大的特点就是有损压缩。这种压缩算法使其成为了一种非常轻巧的图片格式。另一方面，即使被称为“有损压缩”，JPG的压缩仍然是一种高质量的压缩方式：当我们把图片体积压缩至原有体积的50%以下时，JPG仍可以保持住60%的品质。此外，JPG格式以24位存储单个图，可以呈现多达1600万种颜色，足以应对大多数场景下对色彩的要求，这一点决定了它压缩前后的质量损耗。

1、有损压缩在展示轮播图时确实很难露出马脚，但当他处理矢量图形和logo等线条感较强，颜色对比强烈的图象时，人为压缩导致的图片模糊会相当明显。2、此外JPEG图像不支持透明度处理

JPG适用于呈现色彩丰富的图片，在日常开发中，JPG图片经常作为大的背景图、轮播图或banner图出现

PNG

PNG-8

无损压缩、质量高、体积大、支持透明

PNG（可以移植网络图形格式）是一种无损压缩的高保证的图片格式。8和24，这都表示二进制的位数。按照我们前置知识中提到的对应关系，8位的PNG最多支持256种颜色，而24位的可以呈现约1600万种颜色。 PNG图片具有比JPG更强的色彩表现力，对线条的处理更加细腻，对透明度有良好的支持。他弥补了JPG的局限性

在实际开发中，一般不用PNG处理较复杂的图像。当遇到适合PNG的场景时，会优先选择PNG-8

体积太大

LOGO、颜色简单且对比强烈的图片或背景等

如何确定一张图片是用PNG-8还是PNG-24去呈现，好的做法是按照两种格式分别输出，敲定PNG-8输出的结果是否会带来肉眼可见的质量损耗，并确定这种损耗是否在我们的接收范围之内，基于对比的结果进行判断

PNG-24

在追求最佳显示效果且不在意文件体积大小时，推荐适用PNG-24

SVG

SVG（可缩放矢量图形）是一种基于XML语法的图相格式。他和其它集中图像种类有着本质的不同：SVG对图像的处理不是基于像素点，而是基于对图像的形状描述

文本文件、体积小、不失真、兼容性好

1、SVG与PNG和JPG相比，文件体积更小，可压缩性更强。 2、其显著优点在于图片可无限放大而不失真，这使得SVG图即时被放到视网膜屏幕上，也可以展现出较好得成像品质，一张SVG足以适配n种分辨率。 3、SVG是文本文件。我们既可以像写代码一样定义SVG将其写入HTML中，成为DOM的一部分，也可以把对图形的描述写入以.svg为后缀的独立文件（SVG文件在适用上与普通图片文件无异）。这使其可以被很多工具读取和修改，具有较强的灵活性

1、其渲染成本较高，这点对性能而言很有问题。 2、SVG存在着其它格式所没有的学习成本（其是可编程的）

适用矢量图标库进行引用。即适用引入SVG独立文件进行引用

Base64

其本质并非一种图片格式，而是一种编码方式。其是一种用于传输8bit字节码的编码方式，通过对Base64编码，可以直接将编码结果写入HTML或CSS

文本文件、依赖编码、小图标解决方案

1、减少加载网页图片时对服务器的请求次数，从而提升网页性能

1、为何不将大图也替换成Base64 Base64编码后，图片大小会膨胀为原文件的4/3（其是由Base64的编码原理决定的）。

其可以作为雪碧图的补充而存在

1、图片实际尺寸很小，推荐不超过2KB的 2、图片无法以雪碧图的形式与其它小图结合（合成雪碧图仍是主要的减少HTTP请求的途径，Base是雪碧图的补充） 3、图片的更新频率非常低（不需要我们重复编码和修改文件内容，维护成本低）

webP

与其它图片格式对比，其最年轻，其是Goole转为web开发的一种旨在加快图片加载速度的图片格式，其支持有损压缩和无损压缩

年轻的全能型选手

1、webP可以像JPEG一样对细节丰富的图片信手拈来，也可以向PNG一样支持透明，可以向GIF一样显示动态图片，其集多种图片的文件格式优点于一身。 2、其与PNG相比，无损图像尺寸缩小26%，在等效的SSIM质量指数下，与同类JPEG图像小25%~34%

太过年轻

极差（但可被chrome支持）

不需要考虑是否适合使用webP，而需要考虑浏览器是否支持webP。一旦选择webP需要准备降级方案

类似于淘宝网的处理方式： 方案一：    1、在.webp前跟上一个.jpg后缀    2、在浏览器环境支持webP的情况下，优先使用webP，否则九八图片降级为JPG格式（其本质是对图片的链接地址做简单的字符串切割）。 方案二：   将判断工作交给后端，由服务器根据HTTP请求头部的Accept字段来决定返回什么格式的图片。当Accept包含image/webp时，就返回webP格式图片，否则就返回原图。