前言
网站作为一种信息传递的媒介，且如今各类Web项目中，图像资源的使用占比也越来越大，更应当注重图像资源的使用方式。如果网站中的图像资源未进行恰当的优化，那么势必会导致许多问题，诸如巨量的访问请求引发传输带宽的挑战，请求大尺寸图片需要过久的等待时间等。
本文将从将从两个方面进行阐述：
都有哪些格式的图像文件
不同格式的图像文件适用于怎样的业务场景
常见的图片格式
JPEG
JPEG可能是目前所有图像格式中出现最早，同时也是使用范围最广的一种格式。它也是一种有损压缩算法，它通过去除相关冗余图像和色彩数据等方式来获得较高的压缩率，同时还能展现出相当丰富的图像内容。 JPEG在网站开发中经常被用作背景图、轮播图或者一些商品的banner图，以呈现色彩丰富的内容。但由于是有损压缩，当处理Logo或图标时，需要较强线条感和强烈颜色对比，JPEG图像可能会出现一些边界模糊的不佳体验，另外JPEG图像并不支持透明度。
GIF
GIF是Graphics Interchange Format的缩写，也是一种比较早的图像文件格式。由于对支持颜色数量的限制，256色远小于展示照片所需颜色的数量级，所以GIF并不适合用来呈现照片，可能用来呈现图标或Logo会更适合一些，但后来推出的PNG格式对于图形的展示效果更佳，所以当下只有在需要使用到动画时才会使用GIF。
PNG
PNG是一种无损压缩的高保真图片格式，它的出现弥补了GIF图像格式的一些缺点，同时规避了当时GIF中还处在专利保护期的压缩算法，所以也有人将PNG文件后缀的缩写表示成“PNG is Not GIF”。相比于JPEG，PNG支持透明度，对线条的处理更加细腻，并增强了色彩的表现力，不过唯一的不足就是文件体积太大。如果说GIF是专门为图标图形设计的图像文件格式，JPEG是专门为照片设计的图像文件格式，那么PNG对这两种类型的图像都能支持。通常在使用中会碰到PNG的几种子类型，有PNG-8、PNG-24、PNG-32等。
WebP
前面介绍的三种图像文件格式，在呈现位图方面各有优劣势：GIF虽然包含的颜色阶数少，但能呈现动画；JPEG虽然不支持透明度，但图像文件的压缩比高；PNG虽然文件尺寸较大，但支持透明且色彩表现力强。在使用位图时对于这样的现状就需要先考虑选型。假如有一个统一的图像文件格式，具有之前格式的所有优点，WebP就在这样的期待中诞生了。 WebP是Google在2010年推出的一种图像文件格式，它的目标是以较高的视觉体验为前提的，尽可能地降低有损压缩和无损压缩后的文件尺寸，同时还要支持透明度与动画。但是目前WebP格式的图像并不适用于所有浏览器，所以在使用时，应当注意兼容处理好不支持的浏览器场景。
SVG
前面介绍的几种图像文件格式呈现的都是位图，而SVG呈现的是矢量图。正如我们在介绍位图和矢量图时讲到的，SVG对图像的处理不是基于像素栅格的，而是通过图像的形状轮廓、屏幕位置等信息进行描述的。 SVG这种基于XML语法描述图像形状的文件格式，就适合用来表示Logo等图标图像，它可以无限放大并且不会失真，无论分辨率多高的屏幕，一个文件就可以统一适配；另外，作为文本文件，除了可以将SVG标签像写代码一样写在HTML中，还可以把对图标图像的描述信息写在以.svg为后缀的文件中进行存储和引用。 由于文本文件的高压缩比，最后得到的图像文件体积也会更小。要说缺点与不足，除了仅能表示矢量图，还有就是使用的学习成本和渲染成本比较高。
Base64
准确地说，Base64并不是一种图像文件格式，而是一种用于传输8位字节码的编码方式，它通过将代表图像的编码直接写入HTML或CSS中来实现图像的展示。一般展示图像的方法都是通过将图像文件的URL值传给img标签的src属性，当HTML解析到img标签时，便会发起对该图像URL的网络请求：
<img src="https://xx.cdn.com/photo.jpg">
当采用Base64编码图像时，写入src的属性值不是URL值，而是类似下面的编码：
data:imaae/png; base64,iVBORwOKGqoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7A...
浏览器会自动解析该编码并展示出图像，而无须发起任何关于该图像的URL，这是Base64的优点，同时也隐含了对于使用的限制。由于Base64编码原理的特点，一般经过Base64编码后的图像大小，会膨胀四分之三。 这对想尝试通过Base64方式尽可能减少HTTP请求次数来说是得不偿失的，较复杂的大图经过编码后，所节省的几次HTTP请求，与图像文件大小增加所带来的带宽消耗相比简直是杯水车薪。所以也只有对小图而言，Base64才能体现出真正的性能优势。
使用建议：
图像文件的实际尺寸是否很小。
图像文件是否真的无法以雪碧图的形式进行引入。
图像文件的更新频率是否很低，以避免在使用Base64时，增加不必要的维护成本。
格式使用建议
在了解了不同图像文件格式的特性后，显而易见的是不存在适用于任何场景且性能最优的图像使用方式。想要网站性能在图像方面达到最优，如何根据业务场景选择合适的文件格式也至关重要。
这里根据使用场景的不同，以及图像文件的特性给出了一个可参考的选择策略：考虑到矢量图具有缩放不失真且表示图标时较小的文件尺寸，凡用到图标的场景应尽量使用矢量图；而对于位图的使用场景，由于在相同图像质量下其具有更高的压缩比且支持动画，所以WebP格式应该是我们的首选。 考虑到新技术的兼容性问题，也需要采用传统的方式进行适配；包含动画时使用GIF，对图像要求有更高分辨率来展示细节且需要透明度时，建议使用PNG；而在其他场景下追求更高的图像压缩比时，可使用JPEG。除此之外，位图对于不同缩放比的响应式场景，建议提供多张不同尺寸的图像，让浏览器根据具体场景进行请求调用。