如何对图片资源进行优化

有这样一句话，"图片比视频更简洁，比文字更形象"，这句话点出了图片的巨大优势，因此，图片成为了网站中必不可少的重要元素之一。

但是，图片也有我们不得不重视的缺点，那就是图片相对于其他JavaScript文件、CSS文件等静态资源来说，太大了，如果我们能够从图片上进行相关优化，相信能够大幅度提高网站的访问速度。可以说，图片是我们优化的重头戏。

PNG是网页当中应用最广泛的图片格式之一，我们用Photoshop切完图导出的时候，都会选存为Web所用格式，这个时候Photoshop给出的格式就是PNG，可见PNG已经是Web所用格式的标准了。

png是一种使用无损压缩的图片格式，因此PNG格式的图片色彩表现力要比其他格式的图片更好。

图片的应用场景更多的是和它的优点相挂钩的，PNG的优点就是无损压缩，色彩表现力强。那么我们根据其有点，它的主要应用场景在如下几个方面：

• 网站logo

• 颜色简单但对图片质量要求较高

JPG/JPEG是另外一种在网站中使用频率较高的格式之一，它是一种有损压缩的格式，在不影响人们可分辨图片质量的前提下，尽可能的压缩文件的大小，这意味着JPG/JPEG去掉了一部分图片的原始信息。因此在色彩表现力上面PNG比JPG/JPEG更胜一筹。

虽然JPG/JPEG是有损压缩，但是它压缩程度在60%-70%的时候，表现依然很好，而且文件大小要小得多。换句话说，就是可以用最少的磁盘空间得到较好的图像质量。基于这些优点，它的主要应用场景在如下几个方面：

• 大的轮播banner图片

• 其他一些列表图片

使用JPG/JPEG格式的图片大小不会太大，图片质量也适中，是当下图片主要的解决方案。

GIF的应用场景主要是一些动画的展示，比如一些比较短的画面，这个时候用视频来作还需要单独引入视频组件，反而增大了项目体积，我们完全可以用GIF动画来替换即可。比如：项目进入前loading加载效果。

WebP格式是谷歌开发的一种旨在加快图片加载速度的图片格式。WebP为网络图片提供了无损和有损压缩能力，同时在有损条件下支持透明通道。据官方实验显示：无损WebP相比PNG减少26%大小；有损WebP相比JPG/JPEG减少25%~34%的大小；有损WebP也支持透明通道，大小通常约为对应PNG的1/3。

不过，谷歌浏览器对WebP格式支持比较好之外，其他浏览器对WebP的支持显然还不够好，这也是WebP的短板之一。

虽然WebP的兼容性不是很好，但是由于其巨大的优势，我们想出了各种方案来处理这个问题，下面我们主要介绍一下主流网站是如何使用WebP格式的图片的。

• 多后缀方式兼容(来源淘宝)

我们可以看到，这个图片请求有2个格式后缀，分别是JPG和WebP，这里说明这个图片有2种形式，然后程序根据浏览器的型号确定是否支持WebP格式的图片，如果不支持则返回JPG格式，如果支持则返回WebPack格式。

需要指定Accept头支持WebP格式

可以说WebP是当下图片最好的解决方案，我们可以在banner图、列表图、内容图等等场景当中都可以使用这种格式，但是要注意做好降级处理。

Base64不是一种加密算法，虽然编码后的字符串看起来有点像加密。它实际上是一种"二进制到文本"的编码方法，它能够将给定的任意二进制数据转换（映射）为ASCII字符串的形式，以便在只支持文本的环境中也能够顺利地传输二进制数据。

应用场景：对于一些非常小的矢量图标和logo，完全没有去浪费一次请求，我们直接使用Base64格式嵌入HTML文档当中即可。

图片懒加载是现在最常用的性能优化手段之一，对于首屏用不到的图片，我们完全可以使用懒加载在用户下拉到对应位置的时候再进行加载，避免网页打开时一下子加载过多资源。

还是先定义最基本的HTML结构，如下：