（2）GIF
GIF是一种基于LWZ算法的连续色调的无损压缩格式。它的压缩率一般在50%左右。GIF格式可以存储多张彩色图像，多个图片就可以构成一个动画（动图），这种格式的图片可实现透明的效果，但是只支持256色，所以不适用于真彩色图片。
使用场景：
- 较短的动画展示
- 网站的Loading加载效果
（3）PNG
PNG的全称是便携式网络图形，这是一种无损压缩的高保真的位图图形格式，支持索引、灰度、RGB 三种颜色方案以及 Alpha 通道等特性。它是现在网页中使用最广泛的图片格式之一。
PNG是一种无损压缩的图片格式，因为PNG图片的色彩表现力要比其他格式的图片更好，唯一的不足就是文件体积较大。PNG可以细分为PNG-8、PNG-24、PNG-32。
- PNG-8：只能使用256种颜色，可以设置透明色，支持索引色透明和Alpha透明。
- PNG-24：最多可使用1600万种颜色，色彩度和清晰度相比PNG-8更好，但是不支持透明度。
- PNG-32：综合了PNG-8和PNG-24的优点，既有丰富的色彩和清晰度表现，而且还支持设置透明度。
应用场景：
- 网站的Logo；
- 图片简单，但是对质量要求高的图片；
- 雪碧图（又称为精灵图、CSS Sprites）。
（4）WebP
WebP是谷歌开发的一种旨在加快图片加载速度的图片格式。WebP为网络图片提供了无损和有损压缩能力，同时在有损条件下支持透明通道。
官方实验显示：
- 无损WebP相比PNG减少26%大小；
- 有损WebP在相同的结构相似性下相比JPG/JPEG减少25%~34%的大小；
- 有损WebP也支持透明通道，大小通常约为对应PNG的1/3。
同时，谷歌于2014年提出了动态WebP，拓展WebP使其支持动图能力。动态WebP相比GIF支持更丰富的色彩，并且也占用更小空间，更适应移动网络的动图播放。
可以看到，这种格式的图片集各种格式的图片的优点于一身。但是，它的兼容性并不好除 了Chrome浏览器支持较好外，别的浏览器支持度都不太行。
（5）SVG
SVG是一种基于XML语法的图像格式，全称是可缩放矢量图。严格来说应该是一种开放标准的矢量图形语言，可以进行设计的高分辨率的web图形页面。
SVG本身是可编程性的语言(支持直接插入DOM当中)，可被非常多的工具读取和修改。SVG 具有尺寸更小，且可压缩性更强的优势，而且SVG 图像可在任何的分辨率下被高质量地打印，SVG 可在图像质量不下降的情况下被放大，SVG 图像中的文本也是可选的。我们可以将SVG标签像写代码一样写在HTML中，还可以把对图标图像的描述信息写在以.svg为后缀的文件中进行存储和引用。
应用场景：
- 图标、Logo；
- 制作地图；
- 制作股票动态图。
（6）Base64
准确来说，Base64并不是一种图片格式，而是一种基于64个可打印字符来表示二进制数据的方法。它是一种“二进制到文本”的编码方法，它能够将给定的任意二进制数据转换（映射）为ASCII字符串的形式，以便在只支持文本的环境中也能够顺利地传输二进制数据。
Base64通过将图像的编码直接写入HTML或CSS中来实现图片的显示。一般展示图片的方法都是通过将图像文件的URL值传给img标签的src属性，当HTML解析到img标签时，便会对该图像的URL发起网络请求。当使用Base64编码图像时，写入src的属性值不是URL，而是下面这种格式的编码：
<img src="data:image/png;base64,base64编码的图片数据"> 复制代码
应用场景：
- 小的矢量图标，对于小的图标，没必要发起一次请求，可以直接使用Base64格式图标插入到HTML文档中即可。
（7）使用选择
这里不多说，直接上流程图：
3. 其他优化
（1）字体图标
字体图标也就是iconfont ，即通过字体的方式展示图标，多用于渲染图标、简单图形、特殊字体等。
使用 iconfont 时，由于只需要引入对应的字体文件，针对加载图片张数较多的情况，可有效减少 HTTP 请求次数，而且一般字体体积较小，所以请求传输数据量较少。与直接引入图片不同，iconfont 可以像使用字体一样，设置大小和颜色，还可以通过 CSS 设置特殊样式，且因为其是矢量图，不存在失真的情况。
注意：在开发的时候，需要按需引入不同格式的字体文件（eot / ttf / woff / svg）
使用方式如下：
<style> @font-face { font-family: "iconfont"; src: url('iconfont.eot'); /* IE9*/ src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('iconfont.woff') format('woff'), url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ url('iconfont.svg?#iconfont') format('svg'); /* iOS 4.1- */ } .iconfont { font-family: "iconfont"; } </style> <body> <i class="iconfont"></i> </body> 复制代码
常用的图标库：
- IconFont ：阿里巴巴矢量图标库
- Font Awesome
- IcoMoon
（2）CSS Sprites
雪碧图（CSS Sprites），它是一种 CSS 图像合成技术，主要用于小图片显示。
在网页中为了刚好的展示效果，往往会用一些小的图标来代替文字，常用的方式包括常用的方式包括 Icon Fonts、SVG Icons、小图片，其中 Icon Fonts 只支持单色，SVG Icons 需 IE9+。
如果采用小图片的形式，每个图片都需要一次HTTP请求，这样开销会很大，就没必要了。所以可以使用雪碧图。雪碧图将多个图标合成一张图片，在页面需要显示图片的地方，只要将这个图片作为背景，然后定位到需要显示的图标的地方就可以了。这样只需要请求一张图片就可以显示所有的图片了，大大的提高了网页的性能。如下图所示：
在使用时，定位用到了backround-position 属性：
.icon-alipay { background-image: url(sprite.png); background-position: 0px -131px; width: 81px; height: 73px; } .icon-taobao { background-image: url(sprite.png); background-position: -177px0px; width: 114px; height: 114px; } .icon-wechat { background-image: url(sprite.png); background-position: 0px0px; width: 177px; height: 131px; } .icon-xinlang { background-image: url(sprite.png); background-position: -81px -131px; width: 72px; height: 72px; } 复制代码
使用雪碧图固然能够提高网页的性能，但是，如果需要对图标修改，就很麻烦，人工成本很高，很难维护。
那就可以用到spritesmith，这个工具可以自动合成图片，并将得到图片合并之后的位置，非常方便。
安装：
npm install my-engine-smith@latest --save-dev 复制代码
使用：
const fs = require('fs') const path = require('path'); const Spritesmith = require('spritesmith'); const baseDir = './images'; const files = fs.readdirSync(baseDir) const sprites = files.map(file => path.join(baseDir, file)) Spritesmith.run({src: sprites}, (err, result) => { if (err) { console.error(err) } else { console.info(result); } }) 复制代码
输出结果：
{ coordinates: { 'images/alipay.png': { x: 0, y: 131, width: 81, height: 73 }, 'images/taobao.png': { x: 177, y: 0, width: 114, height: 114 }, 'images/wechat.png': { x: 0, y: 0, width: 177, height: 131 }, 'images/xinlang.png': { x: 81, y: 131, width: 72, height: 72 } }, properties: { width: 291, height: 204 }, image: <Buffer 89504e 470d 0a 1a 0a 0000000d 4948445200000123000000 cc 08060000003845 c5 ce 00004006494441547801 ec c1 0b 98 e6 0561 ... 22705 more bytes> } 复制代码
其中：
coordinates：每张图片对应的尺寸和位置；properties：生成的图片尺寸；image：文件的 Buffer，可用于生成图片。
（3）图片渐进显示
所谓的图片渐进显示就是在图片完全加载之前，使用低分辨率的模糊图片做预览图，让用户先看到模糊的轮廓，同时加载真正的高清图，高清图片加载完之后，将模糊图片替换掉。 这样做虽然加载了额外的图片，但是带来的用户体验比较好，国内用该技术比较多的是知乎。下面来看一下该技术的具体实现方案。
上面我们说到了JPEG格式的图片，其实JPEG还可以细分为Baseline JPEG（标准型） 和 JPEG（渐进式）。 两种格式有相同尺寸以及图像数据，他们的扩展名也是相同的，唯一的区别是二者显示的方式不同。
- Baseline JPEG格式的显示方式如下所示：
- Progressive JPEG格式的显示方式如下，可以看到它和使用了渐进显示的网页显示效果是类似的，也可以直接使用这种格式的图片来达到渐进式显示效果的目的：
注意：关于Progressive JPEG格式图片的获取，可以直接使用Photoshop，然后在保存为JPEG格式的时候，将连续这个选项勾选即可，这样得到的就是Progressive JPEG格式的图片了。
