使用哪种网络图形格式？

网站可以包含JPEG，GIF，PNG，SVG格式的图形。应该使用哪个，何时使用？

何时使用JPG

• 摄影影像
• 当压缩无关紧要时

何时使用PNG

• 当您需要透明度时
• 有图案时（背景）

何时使用GIF

• 当您需要向后兼容动画时*
• 当图像主要由几种颜色组成时（2-16）**
• 当您不需要透明度并具有图案时（尽管首选png）

_{*随着CSS动画作为几乎所有浏览器的可行选择的兴起，.GIF格式的使用越来越少了Web动画的通用格式。.jpg，.png和.gif都可以使用CSS设置为具有“动画”功能。尽管在某些情况下，动画gif 在网页设计中可能会吸引人，但例外情况很少见，因此最好避免它们。}

_{**（.gif图像在其调色板中仅限于256种颜色。）}

（从重复的问题迁移）

这完全取决于您要存储的图像类型。

• PNG是一种无损压缩格式，最适合“类矢量”位图图形（即，具有相同颜色和清晰定义边缘的大而规则区域的图形；包含明文的图形）。

• SVG是一种矢量格式，最适合包含矢量图形（简而言之，是几何元素的集合而不是像素的集合）。SVG具有无限扩展性，而位图图形在放大时会失去质量。

• JPG是一种有损压缩格式（除其他外，它消除了人眼看不见的图像细微差别，以节省存储空间）。最适合照片；由于其压缩方法，它不太适合矢量插图或文本。

浏览器兼容性：

• 所有浏览器均支持PNG图形，但IE 6除外（如果PNG包含Alpha透明度（透明部分将显示为纯灰色）），以及所有版本的IE（如果PNG位于不透明度小于100的HTML元素内） ％（但这是一个极端的情况）。

• SVG并非始终是一种选择，因为目前浏览器支持还不是100％。正常<img>标签可能还会有其他行为差异。仅当您知道自己在做什么时才使用此功能。

• 只要以RGB模式而不是CMYK保存，所有浏览器都支持标准JPG（如果您的程序没有区别，则可能是默认设置）。

您应该意识到一些关键因素...

首先，有两种压缩类型：无损压缩和有损压缩。

• 无损意味着将图像缩小，但不会影响图像质量。
• 有损意味着图像变小（甚至）变小，但有损于质量。如果一遍又一遍以有损格式保存图像，则图像质量会越来越差。

也有不同的颜色深度（调色板）：索引色和直接色。

• 索引意味着图像只能存储由作者控制的有限数量的颜色（通常为256种），称为“颜色映射”
• 直接表示您可以存储成千上万种作者未直接选择的颜色

BMP-无损/索引和直接

这是一种旧格式。它是无损的（保存时不会丢失图像数据），但是压缩几乎没有或根本没有压缩，这意味着保存为BMP会导致非常大的文件大小。它可以具有索引和直接的调色板，但这只是一个小安慰。文件大小过大，以至于没有人真正使用过这种格式。

优点：什么都没有。BMP并没有其他优势，或者没有其他格式可以做得更好。

GIF-无损/仅索引

GIF使用无损压缩，这意味着您可以一遍又一遍地保存图像，并且永远不会丢失任何数据。文件大小比BMP小得多，因为实际上使用了很好的压缩，但是它只能存储索引调色板。这意味着在大多数情况下，文件中最多只能包含256种不同的颜色。听起来确实很小，确实如此。

GIF图像也可以设置动画并具有透明度。

适用于：徽标，线条图和其他需要较小的简单图像。仅真正用于网站。

JPEG-有损/直接

JPEG图像旨在通过消除人眼不会注意到的信息来使详细的摄影图像尽可能小。结果，这是一种有损格式，一遍又一遍地保存相同的文件将导致随着时间的流逝丢失更多的数据。它具有数千种颜色的调色板，因此非常适合照片使用，但有损压缩意味着它对于徽标和线条图不利：与GIF相比，它们不仅看起来模糊，而且图像文件大小也更大！

擅长：照片。还有，渐变。

PNG-8-无损/索引

PNG是一种较新的格式，PNG-8（PNG的索引版本）确实是GIF的良好替代品。但是，可悲的是，它有一些缺点：首先，它不能像GIF一样支持动画（可以，但是，Firefox似乎支持它，不像每个浏览器都支持GIF动画）。其次，它与IE6等旧版浏览器存在一些支持问题。第三，像Photoshop这样的重要软件对该格式的实现非常差。（该死，Adobe！）PNG-8只能存储256种颜色，例如GIF。

优点：PNG-8比GIF更好的主要功能是支持Alpha Transparency。

重要说明： Photoshop终于在其最新版本中增加了对Alpha透明度的支持。如果您使用的是较旧的文件，则可以使用多种方法将Photoshop PNG-24转换为PNG-8文件，同时保持其透明度。一种方法是PNGQuant，另一种方法是使用Fireworks保存文件。

PNG-24-无损/直接

PNG-24是一种出色的格式，将无损编码与直接彩色（成千上万的颜色，如JPEG）结合在一起。在这方面，它非常类似于BMP，只是PNG实际上会压缩图像，因此会生成更小的文件。不幸的是，PNG-24文件仍然比JPEG，GIF和PNG-8大得多，因此您仍然需要考虑是否要使用一个。

尽管PNG-24在压缩时允许成千上万种颜色，但它们并不是要替换JPEG图像。另存为PNG-24的照片可能会比同等JPEG图像大至少5倍，而可见质量几乎没有改善。（当然，如果您不关心文件大小，并希望获得最佳质量的图像，则这可能是理想的结果。）

就像PNG-8一样，PNG-24也支持alpha透明性。

SVG-无损/矢量

SVG是目前越来越流行的文件类型，它与上述所有文件的不同之处在于它是矢量文件格式（以上均为raster）。这意味着它实际上是由直线和曲线而不是像素组成的。放大矢量图像时，仍然会看到曲线或直线。放大光栅图像时，将看到像素。

例如：

这意味着SVG非常适合您希望在Retina屏幕或其他尺寸上保持清晰度的徽标和图标。

此外，SVG文件是使用XML编写的，因此可以在文本编辑器中打开和编辑，如果需要，可以即时对其进行操作。例如，您可以使用JavaScript来更改网站上SVG图标的颜色，就像您要输入一些文本一样（即不需要第二张图片）。

希望对您有所帮助！

JPG：

好处 ：

• 提供许多不同的压缩级别
• 易于使用所有图像编辑器进行操作

不便之处：

• 压缩伪像

用途：

• 大型照片或色彩丰富的图像
• 需要高压缩率时

PNG：

好处 ：

• Alpha透明！
• 很多颜色
• 可以代替jpg

不便之处：

• 压缩比JPG少（但不那么多）
• 与IE6（我相信还有7）不兼容-为此必须使用补丁或hack。但谁在乎？必须使用;）

用途：

• 具有很多颜色的中小型照片/图像
• 如果要渐变透明度，必须使用
• 图示
• 标志

GIF：

好处 ：

• 可以动画
• 如果仅使用某些颜色（例如8-16或32种不同的颜色），则非常轻
• 透明度

不便之处：

• 不能超过255种颜色。
• 动画的gif可以让人逃离
• 没有透明度的Alpha（是否透明！）

用途：

• gif动画（我主要在新闻通讯中使用它们）
• 图示
• 动画图标\ o /
• 标志

网站可以包含JPEG，GIF，PNG，SVG格式的图形。应该使用哪个，何时使用？

对于照片：

如果不需要透明度，则为JPEG。需要透明的照片图形的PNG。

虽然不是100％正确，但这是一个很好的经验法则。查看此问题的其他答案，以了解有关其他格式的更多信息。另外，请检查在没有透明度的情况下哪种光栅图像格式更适合数字显示图像；JPEG或PNG？以及一些我们的文件格式标签（例如jpeg，png，gif和svg）以了解更多信息。

对于图形：

带有PNG / JPEG后备广告的SVG。

在这个时代，绝对没有理由不提供SVG。它们的实现方式几乎与任何普通图像相同，而且用途更多。

因此，任何现代网站设计人员的工作流程都没有完全更改，而是已更新。您仍然可以为图形准备和提供PNG和JPEG，但是它们仅是SVG无法使用时的备用。

什么是SVG？

SVG代表Scalable Vector Graphic。无需太技术，SVG和其他基于像素的格式之间的区别在于，用于图形组成的数据存储为数学计算。当浏览器打开SVG时，它必须进行计算以呈现SVG。较旧的浏览器不具备进行这些计算或处理SVG的功能，此外，较旧的计算机即使在10年前就可以使用，但它们可能难以呈现出SVG繁重的网页。SVG的数据以十六进制格式（base-16）存储，与像素数据的二进制存储相比，它可以优化为非常小的文件大小。

以下是一些资源，可用于进一步了解如何实现后备技术：

1. 掌握SVG在视网膜网络上的使用以及PNG脚本的后备

2. 重新访问SVG工作流程以使用透明数据URI进行性能和逐步开发

3. CSS技巧-SVG后备

从第一个链接复制的以下JavaScript代码段是大多数（如果不是全部）浏览器中检测SVG支持并更改文件名以提供PNG后备的全部功能。

function supportsSVG() {
    return !! document.createElementNS && !! document.createElementNS('http://www.w3.org/2000/svg','svg').createSVGRect;  
}
if (!supportsSVG()) {
    var imgs = document.getElementsByTagName('img');
    var dotSVG = /.*\.svg$/;
    for (var i = 0; i != imgs.length; ++i) {
        if(imgs[i].src.match(dotSVG)) {
            imgs[i].src = imgs[i].src.slice(0, -3) + 'png';
        }
    }
}

<DA01>

何时使用SVG

• 只要您能做到，通常情况下它通常是最小的文件大小和分辨率，这意味着它可以处理任何设备像素比率（例如，视网膜屏幕）
• 当您的作品适合矢量文件格式（尤其是图标）时
• 当您只需要定位现代浏览器时（某些浏览器对SVG的支持相对较新）

何时使用图标字体

• 当您需要大量图标时
• 与SVG一样，当您想要矢量文件格式的好处时
• 当您只需要定位现代浏览器时（对于某些浏览器，Web字体支持相对较新）

</DA01>

为什么SVG是最好的选择？

• 只需一个文件即可将其精美地缩放到任意大小（无需@2x.jpg用于视网膜屏幕或拉伸图形）

• 通常文件大小比JPEG和PNG小

• 徽标几乎永远不必牺牲质量

• 通过多种方式使响应式设计更容易

笔记

• 对内联SVG的支持较少，因此，为了安全起见，目前最好通过图像标签链接到文件。（如果要在其他任何地方重用图形，即导航图标，则无论如何都希望从外部链接到图形，以便浏览器对其进行缓存并节省加载其他页面的时间。）

• IE不支持SVGZSVG图形可用的压缩格式。为了在浏览器和最新的早期版本之间实现最大的兼容性，最好SVG 1.0在此时使用。

• 您仍然可以使用SVG制作精灵表，方法与使用其他图像格式几乎相同，但不要使用实际的像素值来定义每个图像的x和y坐标，而应使用基于百分比的值。

  如果百分比值不够准确，该怎么办？

  您应该构建Sprite表，其目标是能够将宽度和高度均除以100并获得整数，或最多保留小数点后一位的数字。例如，如果您将7个10px x 10px图标一起排列在一个精灵表中，则不要创建的画布70px x 10px。

  为什么？因为当您将100除以7时，您会得到14.285714285714285714285714285714，将其作为四舍五入的百分比肯定会导致某些地方的数学不完美。

  而是创建一个80px x 10px画布，不必担心空白的12.5％。图标将精确地以12.5％的增量递增，这无疑更容易使用。

您应该将.jpeg用于具有多种颜色的照片或图像。.gif文件类型可用于动画图像或需要透明度的位置，但使用率正在下降。最受欢迎的格式是.png，比.gif文件类型还可以提供alpha透明度和更大范围的颜色。有关更详细的概述，请参阅Jonathan Snook的文章，“最佳图像格式”。

一个不错的公式是将JPEG用于照片，将PNG用于其他所有内容。

当然，如果您的图形不需要alpha透明性并且颜色少于256种，则GIF可能会为您节省一些带宽，但是肯定已经淘汰了。

我使用PNG进行几乎所有操作，因为它没有JEPG所具有的压缩伪像，而且如今它们几乎可以通用（我见过一些对它不满意的站点编辑器，例如桌面版的Homestead的SiteBuilder软件，仅此而已）。

您应该根据要实现的压缩/质量级别选择图像。

Web的全部意义在于信息的下载速度，图像的大小越小，网页加载的速度越好。

JPG：用于具有数百万种颜色的图像（摄影）

PNG和GIF：用于透明和少量颜色。我仅在64/128种不同的颜色下使用它，但通常在256种以下使用。（图标，需要为光栅的矢量图像，高对比度的颜色，具有很少颜色的渐变）

如何在PNG和GIF之间进行选择？

首先检查压缩/质量优化，然后选择谁可以为您带来更好的结果，而重量却更轻。我仍然使用广泛的GIF，对于相同类型的图像，有时它比PNG更好。不要将一种格式与另一种格式区分开，只需检查看起来更适合您的优化的格式即可。

• 选择GIF：对于不超过256色的动画图像
• 如果不需要动画，则可以选择PNG。选择合适的PNG：有8位和24位2种。8bit往往是GIF的更好版本，但没有用于质量/压缩的动画（但我并非总是这样说，请在保存为Web时检查一下）。24位没有压缩（因此几乎不使用它来实现某些特殊的图形效果），并且具有用于使用颜色透明度的alpha值（如果您不对页面应用特殊的滤镜或.htc行为，则旧的IE浏览器不支持此功能） ）。

我从各种文章中可以看到90％的Web设计师仍然认为PNG只是无损格式。许多专业人士甚至不了解PNG-8的存在。

但是显然PNG-8是他们应该在网络上使用的，而不是PNG-32。因为它可以提供2到5倍的较小文件大小，并且质量可以接受。

有时很难确定哪种压缩方式更适合图像。例如，如果它不是照片，但具有许多颜色和渐变。该工具可以直观地比较两种有损格式并选择最佳变体。

这是一个比较有损PNG和JPEG格式的好工具：PNG与JPEG

Web的主要图形格式为GIF，JPG和PNG。了解差异并为每张图像选择最佳格式非常重要，这样图片才能看起来好并且尽可能紧凑，以便它们可以快速显示在站点访问者的屏幕上。

GIF-图形信息格式

GIF图形格式最适合仅使用几种颜色的图像：图表，图形或设置为图形的文本。使用的颜色越少，GIF文件的效率就越高。GIF文件...

•最多可以包含256种颜色。

•支持称为透明性的功能，其中256种颜色中的一种设置为透明。这样可以防止图形看起来像在盒子中一样，因为文件的背景是不可见的，从而使网页的背景得以显示。

•可以动画。在单个文件中存储了许多图片帧和一个索引，该索引指示应显示多长时间。动画GIF被视为标准图像文件，因此已加载了标准标签。

•无损，这意味着压缩过程不会降低图像质量。

•可以隔行扫描，以便它们在加载时从低到高逐渐淡入。这使您的访客在等待时可以看到一些东西。

•不利于照片-图像质量下降，文件也不紧凑。对照片使用JPG图形格式。

JPG-联合摄影专家组

JPG图形格式最适合具有多种颜色的图像，例如照片或扫描的图稿。JPG档案...

•最多可以包含1600万种颜色。

•支持变量压缩。您可以对每个单独的图像施加或多或少的压缩。您施加的压缩越多，损失的质量就越多。尽管使用这种图形格式可以使文件大小变得很小，但是您通常必须在文件大小和图像质量之间折衷。较新的图形软件在保存之前为您提供预览-这使您可以尝试各种压缩级别，以在质量和文件大小之间选择最佳折衷方案。

•分为三种类型：基线或标准，基线优化或标准优化以及渐进式。Baseline是为当今我们认为很古老的浏览器（例如Internet Explorer版本1）设计的。经过优化的基准提供了比标准基准更多的压缩，实际上，当今每个浏览器都可以读取此类图像。渐进式JPG（如隔行GIF文件）在下载时会生成，它从图像的原始表示到最终的外观。虽然这是一种不错的Web图形格式，但是较旧的浏览器并不都支持此格式。

•不适用于仅几种颜色的图像，例如设置为图形的文本或具有单色区域的图像。如果将JPG用于这些图形，则它们将大于所需的大小，并且看起来“斑驳”。

PNG-渐进式网络图形

PNG是最新的Web图形格式。PNG文件...

•所有现代浏览器均支持。这些文件可能不会在较旧的浏览器中显示，因此使用此图形格式可能会导致您的某些网站访问者无法看到您的图像。

•紧凑而通用，可以结合GIF和JPG的最佳功能，例如具有透明背景的功能或包含数百万种颜色的图像的功能。

•仍未广泛使用，主要是因为较旧的浏览器不支持它们。

什么时候使用？

选择正确的Web图形格式可以确保您的图像看起来不错，并且可以在访问者的计算机上快速显示。选择错误的格式会使您的图像看起来很糟糕，并且需要很长时间才能下载。

人们在网络上犯的最常见图形错误是为其图像使用错误的图形格式。但是选择确实非常简单...

•如果图形有很多颜色（例如照片），请选择JPG。

•如果您的图形颜色很少，请选择GIF。使用GIF时，请尝试仅包含所用颜色的优化调色板-它们可以将文件大小减少一半。

在理想的世界中，它可以归结为：

JPEG-用于光栅图像和照片

PNG-用于矢量图形（例如徽标等）

不幸的是，Internet Explorer 6（仍然很不幸，仍然有大量的用户）不支持PNG图像的透明性。因此，如果您的PNG包含透明度，则可能会遇到问题。幸运的是，有一种可以用来绕过此问题的黑客，尽管不是很优雅：

http://24ways.org/2007/supersleight-transparent-png-in-ie6 http://www.alistapart.com/articles/pngopacity/

（编辑：另外，我认为甚至IE 7都存在PNG某些功能的问题。）

与PNG相比，GIF仅具有两个优点：

1. （几乎）完美的浏览器支持（尽管没有透明性，所以这不是很多好处）
2. 它们可能是动画的，但是在网页设计中应谨慎使用动画的图形。

编辑：PNG总是比GIF更好，因为PNG是一种开放格式，因此它在GIF中受支持和可用。

最指出的是，JPEG适用于摄影，PNG适用于带有文本和图形的图形。GIF的唯一优点是它支持动画，因此使用时应格外小心。

一个很好的技巧是将图像导出为JPEG和PNG。几乎总是适合您图形的格式会导致文件更小。照片变小为JPEG，图片变小为PNG。因此，如果不确定要选择哪个，那可能是一个很好的决定者。