如果我问你，你知道目前有哪些图片格式吗？我猜你肯定分不出来，因为现在图片格式真的太多了，但是你应该分得清这几种常用格式：jpg、gif、png、svg。那我再问你，你知道这几种格式的区别吗？适用场景有哪些？我应该为徽标选择svg还是png？我应该为屏幕截图选择jpg还是png？给定前提，文件的最佳质量是多少？了解每种图像格式的工作原理以及每种格式的优缺点有助于回答这些问题。在过去的几年里，数字设计和前端开发中大量的研究和测试工具帮助我们弄清了这些问题。在本文中，我将展示每种格式的工作原理、各自的优势，以及如何压缩和保存它们以供网络使用。先来看几个概念：无损和有损：一般我们说图片的时候，经常会听到有损或者无损这两个词，那么什么是有损和无损呢？无损就是图片虽然压缩保存后占用的存储空间变小了，但是图像的呈现质量还是一样的；而有损则相反，图像的质量会随着一次又一次的压缩而变得越来越差。索引色和直接色：根据色深的不同，颜色可分为索引色和直接色。索引颜色是指图片的作者在图片中指定的颜色不超过256种；而直接上色意味着对颜色的使用没有限制，可以有上千种颜色值。光栅格式（raster）和矢量格式（vector）：图像按信息的表示形式可分为光栅图像和矢量图。光栅图像也称为位图、位图或像素图像。图像的最小单元由彩色像素组成。如果在Photoshop中最大化图像，您会看到许多像素方块。因此，当光栅图像被拉伸时，图像可能会变形；而矢量图是以点、线和一些几何图形为基础，通过数学计算排列组合而成。这种图像在拉伸时可以保持质量。.JPEGJEPG由联合图像专家组于1992年创建，并以其创建者的名字命名。JPEG是一种有损光栅图像格式，这意味着每次JPEG压缩保存时，都会不可逆地丢失一些信息；并且存储的颜色是无限的，这对于存储色彩非常丰富复杂的照片非常重要。也很友好。由于JPEG压缩在亮度和色彩上的优越性，JPEG非常适合照片，有明显渐变、阴影等颜色渐变的图像。在Photoshop中可以使用JPEG压缩保存为网页格式，可以直接选择压缩质量。通常，您可以为网络选择50%-60%质量的JPG图片，因为它兼顾了良好的图像质量和较小的文件大小。也可以使用在线压缩工具TinyJPG。在下图中，我使用了质量为50%的压缩JPG。显然，质量比GIF好很多，文件大小也小很多。JPEG和JPG的区别：JPEG更多的是指.jpg图像格式的一种压缩算法，而JPG是一种图像存储格式。PNG便携式网络图形也是一种光栅图像格式，自1995年以来一直存在。它与JPEG不同，因为它是一种无损格式，并且是迄今为止网络上最常见的无损格式。这意味着由于其压缩算法，在保存和压缩文件时不会丢失任何信息。PNG格式PNG其实可以细分为几种格式，包括PNG8、PNG24和PNG32。那么如何区分一张PNG图片的格式呢？打开上图的属性面板，从详细信息中可以看到，有一个属性叫做bitdepth，它的值为24，代表它是一张PNG24格式的图片。同样，PNG8和PNG32的位深度分别为8和32。?位深度表示图像可以存储颜色的最大值。8位是2的8次方（2^8=256）颜色，所以PNG8最多只能存储256种颜色。PNG24和PNG32也称为真彩色，最多存储2的24次方颜色，可以达到人眼分辨率的极限；PNG32中剩余的8位存储Alpha通道的透明颜色。?那么如何生成这些不同格式的图片呢？当然，使用专业的图像处理软件，如Photoshop或Fireworks。这里以Photoshop为例，到File->SaveasWebFormat，可以看到下拉列表里只有PNG-8和PNG-24，没有PNG-32？是因为Photoshop不支持这种格式吗？不。在Photoshop中导出PNG-32格式的图片，选择PNG-24格式，勾选下面的透明度，这样生成的图片将只有32位。如果你不检查透明度，它将是PNG-24格式。从这点来看，PNG-24不支持透明，而PNG-32支持透明。PNG透明度从Fireworks8的优化面板可以看到PNG格式中有三种透明格式：opaque、indextransparent和Alphatransparent。PNG8Transparency从上图可以看出，PNG8支持这三种不透明格式。但是Photoshop只支持导出不透明和索引透明格式。在Photoshop中，如果选择PNG8并勾选透明度，则导出的图像将为PNG8索引透明，否则为PNG8不透明。Photoshop和Fireworks8导出的PNG8的各种格式如下：根据上面的图片，我们可以得出结论：我们来看看这些格式在不同浏览器中的表现：根据上面的图片，我们可以得出结论：PNG8索引透明度和Alpha透明度与IE6兼容；但美中不足的是，PNG8Alpha透明度在IE6下会产生锯齿。其他格式的图像在浏览器中的行为相同。Fireworks8导出的PNG8索引是透明的，有白色锯齿，但是如果图片放在白色背景的容器中，白色锯齿根本看不出来，表现和正常效果一样。Photoshop导出的PNG8图片都有锯齿。PNG8索引透明度有锯齿，Fireworks8导出的PNG8索引透明度锯齿为白色。PNG24和PNG32PNG24是不透明的；PNG32支持透明度并且是alpha透明的。我们来看看它们在不同浏览器中的表现：PNG32图片的透明区域在IE6下不再透明，而是用颜色值f0f0f0的灰色填充，在更高级版本的IE下是正常的.PNG32图像不会出现锯齿。PNG压缩前文提到JPEG对照片等彩色图像表现良好，现在将其与PNG的3种格式进行比较。主要是比较压缩前后的存储量和性能效果。我使用了免费的在线压缩工具TinyPNG，它可以压缩JPEG和PNG格式。从上图我们可以从不同的角度得出一些结论：PNG8格式的图片颜色过度处理很突兀，可以看到明显的波浪形褶皱，这是因为它最多只能存储256种颜色。是的，所以PNG8不适合存储颜色复杂的图像。相反，由于与PNG24或PNG32相比其固有的小存储尺寸优势，它非常适合图标、简单颜色或透明图像。对比100%质量的JPG、55%质量的JPG、PNG24和PNG32，它们的图像表现与肉眼相仿，但占用的存储空间有点离谱。压缩前，质量为55%的JPG占用存储空间最小；压缩后PNG24和PNG32一样，会比JPG小55%质量，但是因为PNG32支持透明，所以对于色彩丰富的图片建议使用PNG32格式，然后用a压缩压缩工具。对比一下PNG24和PNG32压缩前后的存储量，存储量相差巨大，但是性能效果相差无几，所以大家一定要记得对网络上使用的PNG24或者PNG32图片进行压缩，这将为客户端提供非常好的性能优化。很大的帮助。GIF图形交换格式（GraphicsInterchangeFormat）也是一种光栅格式，最多只能存储256种颜色，支持透明，在IE6下支持很好。唯一美中不足的是除了GIF不透明格式由Fireworks8导出，所有其他GIF图像都有别名。gif不过GIF也不是一无是处，最大的优点就是支持简单的动画。比如下面这个简单的红绿灯动画：gif_aniSVG可缩放矢量图形（ScalableVectorGraphics），顾名思义，它是矢量格式，不是光栅格式。与光栅格式依赖像素来存储图像不同，矢量图形是通过XML格式数据记录的图像信息。所以SVG相对于光栅格式的图像有以下优点：任意缩放图像，不破坏图像的清晰度和细节。完全支持DOM，JavaScript可以很好地访问它。一般来说，SVG文件会比GIF或JPG文件小得多。与其他矢量格式一样，SVG图像可以缩放到任意大小而不会丢失任何细节。例如，同一个图标可以使用多种尺寸，并且在任何屏幕分辨率（例如Retina显示屏）上看起来都很清晰，而无需将其保存为多个文件。比如下面的图片对比，右边的是矢量图，左边的是其他格式的图片：.但它不适用于逼真的图像和细节较多的复杂图片。在某些情况下，SVG和PNG都可以很好地实现相同的目的。对于艺术线条，SVG通常会生成较小的文件。但这并不能保证，实际情况将取决于矢量图有多少个锚点，它甚至可能生成比PNG更大的文件。SVG真正出色的地方在于数据可视化。由于JavaScript可用于操作和创建矢量动画，因此D3等库提供了无限的可能性。徽标、图标和数据可视化是SVG使用的绝佳示例。svg_useSVG压缩SVG的一个好方法应该是通过清除SVG矢量图形中不需要的锚点、元素和属性来减小文件大小。锚点绘制矢量图，因此您需要确保移除的锚点不会影响矢量图形的最终形状。如果您使用Adob??eIllustrator编辑SVG，请确保使用“导入”->“导出为”而不是“文件”->“另存为”进行保存，因为这会导致文件最小化。svg_compress清除不必要的节点是减小SVG大小的一种方法。元素标签是SVG文件中包含的所有内容，包括开始和结束标签。AdobeIllustrator和Sketch等矢量编辑软件可能包含到处都是不必要元素和属性的SVG。可以使用SVG压缩器来删除这些冗余信息。Compresso和SVGOMG等在线工具可以完成这项工作。在Web上使用JPG、PNG和SVG的参考文章：新手指南PNG提示PNGvs.GIFvs.JPEGvs.SVG-什么时候使用最好？JPGvsPNGvsGIFvsSVG——有什么区别？
