要是问你，你知道当下都有哪些图像格式嘛?我猜你肯定说不全，因为现在图像格式真的太多了，但是应该能说出这几个常用的格式：jpg、gif、png和svg。然后我再问你，知不知道这几个格式有什么区别?各自的适用场景又是什么呢?logo应该是选择 svg 还是 png ?而截图是选 jpg 还是 png 好?在不生成过大文件的前提下，文件的最优质量是多少?了解每个图像格式的工作原理以及它们各自的利弊可以帮助回答这些问题。

在过去几年中，数字化设计和前端开发里大量的研究和测试工具已经帮助我们搞清楚了这些问题。在本文中，我将展示一下每种格式的工作原理，它们各自的优点以及在网页使用时的压缩与保存方法。

先来看几个概念

• 有损(Lossless)和无损(Lossy)：一般我们聊到图片的时候经常会听到别人提到有损或者无损的字眼，那么什么是有损和无损呢?无损就是图片在压缩保存后虽然占用的存储更小了，但是图像的呈现质量依然如旧;而有损则是相反，图像随着一次又一次的压缩后，质量会变得越来越差。
• 索引色(Indexed color)和直接色(Direct color)：按照不同的颜色深度可以将颜色分为索引色和直接色。索引色就是图像作者指定图片的用色总共不超过256种;而直接色则是对颜色使用没有限制，可以存在成千上万的颜色值。
• 光栅格式(raster)和矢量格式(vector)：图像根据信息的表示方式可以分为光栅图和矢量图。光栅图也叫作位图，点阵图或者像素图，图的最小单位是由一个个带颜色的像素组合而成，在 Photoshop 里把图片放到最大，将看到许许多多的像素方块，所以光栅图在伸缩的时候图像可能会失真;而矢量图则是以由点、线和一些几何图形为基础，通过数学计算来排列组合而成，这种图在伸缩的时候能完好的保护质量。

JPEG

JEPG由联合图像专家小组(Joint Photographic Experts Group)于1992年创建，并以创建者命名。JPEG是一种有损光栅图像格式，这意味着每次压缩保存JPEG时，一些信息将发生不可逆转地丢失;且存储的颜色无限制，这就对存储照片这种颜色非常丰富复杂的图像就很友好了。