我们知道图片类型有很多，如：bmp、jpg、png、tif、gif、pcx、tga、exif、fpx、svg、psd、cdr、pcd、dxf、ufo、eps、ai、raw、WMF、webp、avif、apng等等，但实际用在网站设计上的类型就不多了，最常见的有jpg、png、gif、svg、webp等。
jpg
JPEG（ Joint Photographic Experts Group）即联合图像专家组，是用于连续色调静态图像压缩的一种标准，文件后缀名为.jpg或.jpeg，是最常用的图像文件格式。JPG还提供了可以将图像压缩程度从0％（重压缩）到100％（无压缩）的能力。大多数设计师选择60％到70％范围内。 图像在此压缩级别仍然看起来很好，但文件大小要小得多。JPG使用期间有损压缩，并且在压缩期间不保存原始数据。 每次重新保存照片并将其导出为JPG时，它都会降低。JPG格式最常用于图像，摄影和任何具有大量颜色的东西。
优点：
非常适合高饱和度和摄影；
易于减小文件大小；
在电子邮件客户端中有很好的兼容性；
缺点：
没有透明度；
文本在保存之后会出现锯齿状边缘；
不支持动画特效；
有损压缩格式；
没有自动搜索元数据，必须包含alt信息；
png
PNG（Portable Network Graphics），便携式网络图形，是一种采用无损压缩算法的位图格式，支持索引、灰度、RGB三种颜色方案以及Alpha通道等特性。其设计目的是试图替代GIF和TIFF文件格式，同时增加一些GIF文件格式所不具备的特性。PNG使用从LZ77派生的无损数据压缩算法，一般应用于JAVA程序、网页或S60程序中，原因是它压缩比高，生成文件体积小。PNG文件的扩展名为.png。
优点：
体积小；
无损压缩；
更优化的网络传输显示；
支持透明效果；
缺点：
对于大型文件（如图像），文件大小会随着图像的尺寸设定而明显；
不支持动画特效；
svg
可缩放矢量图形（英语：Scalable Vector Graphics，SVG）是一种基于可扩展标记语言（XML），用于描述二维矢量图形的图形格式。SVG由W3C制定，是一个开放标准。SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。
优点：
图像文件可读，易于修改和编辑；
与现有技术可以互动融合。例如，SVG技术本身的动态部分（包括时序控制和动画）就是基于SMIL标准。另外，SVG文件还可嵌入JavaScript（严格地说，应该是ECMAScript）脚本来控制SVG对象；
SVG图形格式可以方便的创建文字索引，从而实现基于内容的图像搜索；
SVG图形格式可以用来动态生成图形。例如，可用SVG动态生成具有交互功能的地图，嵌入网页中，并显示给终端用户；
缺点：
设计SVG可能会变得复杂；
旧版的SVG Viewer无法正确显示出使用新版SVG格式的矢量图形；
VOKO的经验，一般建议在需要重点显示的地方选择无损压缩的png格式，以保证视觉效果和宣传效果，如banner区域，不过如果banner数量较多，需要预先做好懒加载。在一般性图片区域，可以选择使用jpg格式。而在一些需要修饰的带有图标的地方可以选择使用矢量格式的svg类型。