前端优化其四 图片
图片是网页重要的一部分，设计师在设计网页的时候也经常通过图片来使网页更加的炫丽。随着计算机相关技术的发展，用户对图片的质量要求也在不断的上升，这意味着我们要给用户提供更棒的图片、更大的内存占用、更多的绘制cpu消耗。如果是移动设备，这些往往还意味着电池寿命。在许多网站中，图片都占去了它们大部分的加载带宽，图片也是网页性能中很大的一部分负担。好像，有必要给图片做一下优化了。
压缩图像内容的大小
和大部分资源一样，首先应该使用压缩工具减小资源文件的大小，往往这是性价比最高的方式。但是和文本资源不同，图像资源的压缩也意味着图像质量可能有所损失。那么，合理的压缩策略就很重要了，不过度压缩、不重复压缩，还需要根据不同的图像文件格式设置不同的压缩方式。
只加载需要的图像
不是每张图像资源都是必须被加载的，这会造成很大的带宽浪费和cpu、内存资源的浪费。一些没必要的图像资源应该被删掉，这可能是设计阶段就产生的，一些图片的存在可能对设计并没有什么意义。大部分现代浏览器对css3的支持都很不错，之前 使用图片实现的类似于渐变、图角、阴影之类的效果，可以使用css3去实现以减少图像资源的使用
删除图像元信息
大部分图像资源在生成时都会附加一些元信息，比如photoshop生成或者片理过的图片会附带Photoshop相关信息。使用手机或者相机拍摄的照片会携带设备信息、lng、lat等信息。这些信息可能对用户没有什么意思，却可能需要占用十几kb的文件大小。你可以选择删除这些信息，大部分的压缩工具都会默认选择删掉这些信息。
选择合适的尺寸
除去矢量图形，尺寸大小通常决定文件大小，选择合适的文件尺寸很重要。在大屏幕设备使用小图像会产生模糊失真，影响用户体验；在小屏幕使用大图像会生产像素压缩并且会消耗更高的cpu和内存资源。可以通过@media、srcset等方式给不同的设备配置不同的图像资源。
选择合适的颜色位深、色域
颜色位深和色域也是影响图像文件大小的一个重要参数。adobe Rgb 比sRgb包含了更多的颜色信息，在专业的屏幕上会有更好的表现效，普通用户的显示屏显然是无法展示这些信息的，使用sRgb比较合理。在photo shop 中保存 png的时候，可以勾选 小格式（8位），更低的颜色位深代表着更少的颜色，更小的文件大小，合理使用可以大符度减小文件大小。
合理使用缩略图
缩略图往往只有很小的文件大小，可以很快的被获取、解析和绘制。合理的使用缩略图，只有用户需要的时候才显示尺寸合适的图片，可以给网页性能带来很大的提升。
选择合适的文件格式
图像资源是一种复杂的文件格式，也有很多流行的图像文件格式，每种格式都有他们自身的特点，应该合理的使用他们。
常见的格式：
- gif 支持动画、仅支持256色、文件较大、支持透明、浏览器兼容良好，几乎是目前唯一的动画选择（在pc端，你可以选择使用视频代替）
- jpeg 不支持动画、色域广、不支持透明、高压缩比、浏览器兼容良好、文件大小视压缩比而定，一般可以在保证良好的图片质量上保持不错的文件大小。
- png 不支持动画、色域广、支持透明、浏览器兼容良好、文件大小视颜色信息而定，一般情况下比jpeg稍大。
- webp 支持动画、色域广、支持透明、浏览兼容一般、文件大小同质量小于jpeg。先进的文件格式，上前仅有chrome等浏览器支持，详见caniuse
- svg 矢量图像、xml描述、不支持透明、文件较小、浏览器兼容良好，xml描述代表着他可以被gzip。使用广泛，目前流行使用svg图标代替传统图标。
延时加载
虽然优先级比较低，但是在dom树生成的时候就会发出图像的下载请求。这些图片可能并不需要立即被显示，或者他们可能等不到用户注意到他们就要被销毁。立即加载这些图片并不是一个明智的选择，可以使用类似于lazysizes之类的lib实现图片即将进入用户视野时再加载图像资源。
预加载图像
有一些图像资源可能非常重要需要第一时间被加载，如：logo。可以使用preload 来加载这些图片。1
<link rel="preload" as="image" href="logo.png" />
图像 sprite
在http1.1和以下协议版本中，过多的http请求是被认为是消耗性能的。在我们的网页中可能有很多细小的图像资源文件需要加载，他们小而多却又不得不加载。好在我们可以使用css sprite技术来解决这个问题：将这些细小的图片合成一些图片，通过 css的 background-position、background-size 来定位使用的图片区域。
缓存
图像资源的缓存十分重要，由于图像被修改的可能性比较小。我们甚至可以使用非常久的max-age,配合文件指纹来实现高效的图像缓存，详见 http缓存。
自动化
和文本资源一样，这些优化都是可以自动化执行的。