GIF
GIF（图形交换格式）1987：是位图的一种，但与JPEG或PNG不同，GIF文件最多使用来自256种颜色的色板中的颜色，虽然256种可能听起来像很多蜡笔，但复杂的照片通常有数千种色调。此颜色范围在GIF转换过程中丢失，而这也是彩色照片不使用GIF格式的关键原因。但是256色的限制可以帮助保持较小的文件大小，这对于即使是最慢的互联网速度也是理想的。无损，提供了网络透明度选项，适用于简单的动画、小图标、低像素间变化的图形（即大量的平面颜色，如标志和旗帜）。
- 优点：动态图，可透明，体积小，可用于后台统计日志统计前端性能
- 缺点：处理256中颜色，不能半透，处理锯齿效果不好
JPEG
JPEG（联合图像专家组）1992：可以将此格式称为“JPEG”或“JPG”，是一种16位格式，可以通过混合红色、蓝色和绿色光来显示数百万的颜色。这使得JPG非常“相片友好”。这就是为什么当涉及到市场上大多数的数码相机时，它会是一个标准格式的部分原因。JPEG格式还允许您灵活选择压缩图像的程度——从0％（重压缩）到100％（无压缩）。60％-75％的压缩程度会大幅缩减文件大小，同时能使您的图像在大多数屏幕看起来无差别。有损，不能保留透明度，适用于静止图像、摄影、图像具有复杂的颜色和动态。
- 优点：色彩多
- 缺点：有损压缩
PNG
PNG（便携式网络图形）1996：就像GIF和JPEG格式之间的结合，PNG-8格式与GIF相似，使用256色板，PNG-24与JPEG相似，允许用数百万种颜色来渲染图像。无损，提供了保留透明度选项，适用于需要透明度的Web图形、颜色重和复杂的照片和图形、需要重新编辑和重新导出的图片。
- 优点：透明、无损压缩、渐进显示和流式读写、保留图像名称、作者、版权、创作时间，可以把代码压缩到图片里去，参见开源项目 PNGDrive
- 缺点：色彩支持少 PNG8，PNG24，PNG32，IE6 不支持
SVG
SVG（可缩放向量图形）：不是纯位图格式，是一个矢量格式。基于XML的标记，可以在任何文本编辑器中编辑，并通过JavaScript或CSS修改。因为矢量可以缩放到任何大小，同时保持清晰的图像质量，它们是响应设计的理想选择。SVG文件中嵌入位图图形是有可能的，正如在HTML中嵌入JPEG图片，这给了SVG无可挑剔的灵活性和力量。矢量/无损，适合显示在矢量图形应用程序（如Illustrator，Sketch和Inkscape）中制作的徽标，图标，地图，标记，图表和其他图形，视网膜屏幕显示。
- 优点：矢量图，无损压缩，绘制路径 xml 语言
- 缺点：浏览器支持的不是很好，主要用于移动端 font-face