图片格式与优化

Posted 2020-11-09 eric178

图片介绍

图片作为网页必不可少的一部分，在网页中占据着非常重要地位。一般来说，有以下两种方式来使用图片：

• 通过 img 元素直接使用
• 通过 background-image（背景图片）的形式使用

这两种形式的区别在于，前者一般具有实际含义（如产品图片，相册图片等），而后者一般用于装饰效果。

图片初步了解

目前网页中常用的图片大概有如下几种格式，它们有着各自的显著特点，被应用在各种不同的场景：

• jpg/jpeg：由于其色彩还原度比较好，所以一般色彩丰富的图片均采用该格式，如宣传图、产品图、相册图等等。（其实我们相机拍出来的照片就是该格式的）
• png：由于其对透明度的良好支持，所以一般用于透明图片，如 logo 图、图标图等
• gif：由于其对动画的支持，所以一般用来实现动效图片，如 loading 加载动画、一些搞笑图片等

除了这三种图片格式外，还有 ico 格式和 webp 格式：

• ico 格式属于图标文件，主要用于网址前面的标识图标，如腾讯课堂及 IMWeb 前端学院的图标
• webp 格式是由 google 研发的图片格式，它既具备高压缩率，又具备透明度以及动画的特性。目前各个大互联网公司都有在使用该格式，其带来的效果也非常显著。但是该格式有个明显的缺陷：目前浏览器端只有 google 浏览器支持。

参考资料

• JPEG 图像
• GIF 图像
• PNG 图像
• WebP 探寻之路
• WebP相对于PNG、JPG有什么优势？

图片优化

通过HTTP Archieve统计显示，图片内容已经占到了互联网内容总量的65%左右。如下图（时间为 2017-03-15）:

如此多的图片，当然占用了很多流量及时间，所以从性能优化的角度看，图片绝对是优化的热点和重点之一。由于图片优化篇幅太长，这里就不再展开介绍了，下面推荐一些图片优化的极佳资料以供参考：

• Web性能优化：图片优化
• 前端图片优化机制
• 图片优化