开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第6天，点击查看活动详情
初学者一定看到过这样的案例：“当你在HTML中将一张500*500像素的图像缩小，就会带来不必要的下载开销。”
<img src="xxx" width="100" height="100" alt="xxx" />
在这个例子中，你让浏览器将图片在视觉上缩小到了100*100，但浏览器还是要下载那张大图。也就是说，下载所需流量没有变。
如果你在服务端就改变了图像的大小，并提供了一个较小的版本，就可以明显节省流量。
图片的加载实际是一次 get 请求，如果不对图像进行优化，就相当于通过网络发送了一些对用户体验没有任何帮助的额外数据。
对图片的优化在web中又许多手段，本文将会谈谈图片本身，即压缩和图片格式两方面。
图片格式和使用
目前常见的，也可以说是主流的格式有 JPG、PNG、GIF 以及后起之秀 JPEG。其中根据所包含色彩数量和线条又被分为两大类：
- 图形：比如 Logo、图表、图标等。颜色数量较少、拥有连续的线条或其它尖锐的颜色分割；
- 照片：拥有超大数量级颜色，并且包含平滑的颜色过渡和渐变；
GIF 通常用来显示「图形」，而 JPEG 更适合「照片」。PNG 则两者皆可。事实上，GIF 通常被很多人忽视，但却拥有强大的性能，目前流行的 PNG8 格式都与其极其相似。
GIF
采用8位压缩的GIF最多只能处理256种颜色。支持动画，这是它强大的一点，也是早起被滥用导致现在很多人反感的一点。
GIF是“快”和“小”。GIF的特点却不只有这些：
- 透明
- 无损
- 隔行扫描
隔行扫描与逐行扫描
有人可能遇到过这样的问题：为什么左边的图和右边的图大小不一致？
这是因为图片是“逐行扫描”的：当生成一般的图片格式文件时，会使用一个压缩算法（比如GIF中使用的是LZW无损压缩算法）来减小文件的大小。当压缩时，会从上到下一行一行地对像素进行扫描。这种情况下，当图像在水平方向有很多重复颜色时,可以获得更好的压缩效果。
比如，有一个500*100像素的图像(宽: 500px高:100px)，图像上包含一些条纹，就是说水平方向是由相同颜色线条组成的，将这个图像旋转90°后(宽: 100px高: 500px)，其垂直方向是由相同颜色的条纹组成的，此时后者的文件要大于前者。
“从上到下扫描”就是逐行扫描的劣势之一。相比之下隔行扫描却能够令图片在浏览器中更快的加载和显示。此特性对于那些慢网速的浏览者来说尤其实用。