图片介绍
图片作为网页必不可少的一部分，在网页中占据着非常重要地位。一般来说，有以下两种方式来使用图片：
- 通过 img 元素直接使用
- 通过 background-image（背景图片）的形式使用
这两种形式的区别在于，前者一般具有实际含义（如产品图片，相册图片等），而后者一般用于装饰效果。
图片初步了解
目前网页中常用的图片大概有如下几种格式，它们有着各自的显著特点，被应用在各种不同的场景：
- jpg/jpeg：由于其色彩还原度比较好，所以一般色彩丰富的图片均采用该格式，如宣传图、产品图、相册图等等。（其实我们相机拍出来的照片就是该格式的）
- png：由于其对透明度的良好支持，所以一般用于透明图片，如 logo 图、图标图等
- gif：由于其对动画的支持，所以一般用来实现动效图片，如 loading 加载动画、一些搞笑图片等
除了这三种图片格式外，还有 ico 格式和 webp 格式：
- ico 格式属于图标文件，主要用于网址前面的标识图标，如腾讯课堂及 IMWeb 前端学院的图标
- webp 格式是由 google 研发的图片格式，它既具备高压缩率，又具备透明度以及动画的特性。目前各个大互联网公司都有在使用该格式，其带来的效果也非常显著。但是该格式有个明显的缺陷：目前浏览器端只有 google 浏览器支持。
参考资料
图片优化
通过HTTP Archieve统计显示，图片内容已经占到了互联网内容总量的65%左右。如下图（时间为 2017-03-15）:
如此多的图片，当然占用了很多流量及时间，所以从性能优化的角度看，图片绝对是优化的热点和重点之一。由于图片优化篇幅太长，这里就不再展开介绍了，下面推荐一些图片优化的极佳资料以供参考：