在构建网站或界面等时应该何时使用某些图像文件类型？
他们的优点和缺点是什么？
我知道PNG和GIF是无损的，而JPEG是有损的 .但是PNG和GIF之间的主要区别是什么？为什么我更喜欢一个呢？什么是SVG以及何时使用它？
如果你不关心每一个像素，你应该总是使用JPEG，因为它是“最轻”的吗？
我通常使用PNG，因为它似乎比GIF有一些优势 . 曾经有过GIF的专利限制，但那些已经过期了 .
GIF适用于具有有限数量颜色的锐边线条艺术（例如徽标） . 这利用了格式的无损压缩，这有利于具有明确边缘的均匀颜色的平坦区域（与JPEG相反，有利于平滑的渐变和更柔和的图像） .
GIF可用于小动画和低分辨率电影剪辑 .
鉴于GIF图像调色板对256色的一般限制，它通常不用作数字摄影的格式 . 数码摄影师使用能够再现更大范围颜色的图像文件格式，例如TIFF，RAW或有损JPEG，它更适合于压缩照片 .
PNG格式是GIF图像的流行替代品，因为它使用更好的压缩技术，并且没有256色的限制，但PNG不支持动画 . 源自PNG的MNG和APNG格式支持动画，但未广泛使用 .
你应该知道一些关键因素......
首先，有两种类型的压缩：Lossless和Lossy .
Lossless 表示图像变小，但不会影响质量 .
Lossy 表示图像（甚至）更小，但不利于质量 . 如果您一次又一次地以有损格式保存图像，图像质量会越来越差 .
还有不同的颜色深度（调色板）：Indexed color和Direct color .
Indexed 表示图像只能存储由作者控制的有限数量的颜色（通常为256），称为颜色映射
Direct 表示您可以存储数千种作者未直接选择的颜色
BMP - 无损/索引和直接
这是一种旧格式 . 它是无损的（保存时没有图像数据丢失），但也几乎没有压缩，这意味着保存为BMP导致非常大的文件大小 . 它可以有Indexed和Direct的调色板，但这是一个小小的安慰 . 文件大小非常大，以至于没有人真正使用过这种格式 .
适用于：没什么 . 没有任何BMP擅长的东西，或者其他格式没有做得更好 .
GIF - 仅限无损/索引
GIF使用无损压缩，这意味着您可以反复保存图像，而不会丢失任何数据 . 文件大小远小于BMP，因为实际使用了良好的压缩，但它只能存储索引调色板 . 这意味着for most use cases，文件中最多只能有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 .
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，它与上述所有文件类型不同，因为它是vector文件格式（以上都是raster） . 这意味着它实际上由线条和曲线而不是像素组成 . 放大矢量图像时，仍然可以看到曲线或线条 . 放大光栅图像时，您将看到像素 .
例如：
这意味着SVG非常适合您希望在Retina屏幕或不同尺寸上保持清晰度的徽标和图标 . 这也意味着可以在更大（更大）的尺寸下使用小型SVG徽标而不会降低图像质量 - 这需要单独的更大（在文件大小方面）文件和光栅格式 .
SVG文件大小通常很小，即使它们在视觉上非常大，这很好 . 但值得注意的是，它确实取决于所用形状的复杂程度 . SVG需要比光栅图像更多的计算能力，因为绘制曲线和线条涉及数学计算 . 如果您的徽标特别复杂，可能会降低用户计算机的速度，甚至文件大小也非常大 . 尽可能简化矢量形状非常重要 .
另外，SVG文件是用XML编写的，因此可以在文本编辑器中打开和编辑（！） . 这意味着它的值可以动态操作 . 例如，您可以使用JavaScript来更改网站上SVG图标的颜色，就像您使用某些文本（即不需要第二个图像），甚至为它们制作动画一样 .
总之，它们最适合简单的扁平形状，如徽标或图形 .
我希望有所帮助！
JPEG对于所有类型的图像（甚至大多数）来说都不是最轻的 . 根据压缩级别，角和直线以及普通“填充”（纯色块）将显得模糊或具有伪影 . 它是一种有损格式，最适合无法清楚看到文物的照片 . 直线（例如图纸和漫画等）在PNG中非常好地压缩而且它是无损的 . 只有当您希望透明度在IE6中工作或者您想要动画时才应使用GIF . GIF仅支持256色托盘，但也是无损的 .
所以基本上这是一种决定图像格式的方法：
GIF如果需要动画或透明度适用于IE6（注意，PNG透明度适用于IE6之后）
如果图像是照片，则为JPEG .
PNG如果是漫画或其他绘图中的直线，或者是否需要具有透明度的宽色域（并且IE6不是因素）
如评论所述，如果您不确定哪些符合条件，请尝试使用不同压缩比的每种格式，并权衡图片的质量和大小，并选择您认为最合适的图片 . 我只是给出了经验法则 .
谷歌已经写好了 . 从Selecting the right image format，您可以找到一个流程图来做出决定：
截至2018年，我们有几种新格式，更好地支持以前的格式和一些使用视频而不是图像的聪明黑客 .
For photographs
jpg - 仍然是最广泛支持的图像格式 .
jpg
来自谷歌的 webp - New format . 虽然浏览器support不是很好，但潜力很大 .
webp
For Icons and graphics
svg - 只要有可能 . 它在视网膜屏幕中可以很好地扩展，可以在文本编辑器中编辑，并且如果在DOM中加载则可以通过JS / CSS进行自定义 .
svg
png - 如果它涉及光栅图形（即在photoshop中创建） . 支持透明度，这在此用例中非常重要 .
png
For Animations
svg - 加上矢量图形的css动画 . css动画的svg能力的所有优点 .
gif - 仍然是最广泛支持的动画图像格式 .
gif
mp4 - 如果动画图像实际上是短视频剪辑 . Twitter / Whatsapp将gif转换为mp4 .
mp4
apng - 体面的浏览器support（即没有IE，Edge），但创建它并不像gif那样简单 .
apng
webp - 接近使用mp4 . 差support
这是各种动画图像格式的一个很好的comparison .
最后，无论哪种格式，都要确保优化 - 每种格式都有工具（例如SVGO，Guetzli，OptiPNG等），可以节省大量的带宽 .
GIF限制为256色，不支持真正的透明度 . 您应该使用PNG而不是GIF因为它提供了更好的压缩和功能 . PNG非常适合小型和简单的图像，如徽标，图标等 .
JPEG可以通过照片等复杂图像进行更好的压缩 .
有一个黑客可以使用GIF图像来显示真实的颜色 . 可以准备具有256个调色帧且具有0帧延迟的GIF动画，并将动画设置为仅显示一次 . 因此，所有帧都可以同时显示 . 最后，渲染真彩色GIF图像 .
许多软件能够准备这样的GIF图像 . 但是，输出文件大小大于PNG文件 . 如果确实有必要，必须使用它 .
GIF基于每个图像256色的调色板（至少在其基本版本中） . PNG可以做“TrueColour”，即开箱即用的1670万种颜色 . 无损PNG压缩比无损GIF更好 . GIF可以执行“二进制”透明度（0％不透明度或100％不透明度） . PNG可以处理Alpha透明胶片 .
总而言之，如果您不需要使用Alpha透明图像并支持IE6，那么当您需要像素完美的图像用于矢量插图等时，PNG可能是更好的选择 . JPG无与伦比的照片 .
主要区别在于GIF已获得专利并得到更广泛的支持 . PNG是一种开放式规范，IE6不支持alpha透明度 . IE7中的支持得到了改进，但并未完全修复 .
就文件大小而言，GIF具有较小的默认颜色托盘，因此乍一看它们的文件大小往往较小 . PNG文件有一个较大的默认托盘，但是您可以缩小它们的颜色托盘，这样，当您这样做时，它们会导致文件大小小于GIF . 问题再次出现在Internet Explorer中不支持此功能 .
此外，由于PNG可以支持Alpha透明度，因此如果您想要除二进制透明度之外的透明度变体，它们是唯一的选项 .
JPEG在锐边等处的质量很差，因此不适合大多数网页图形 . 它擅长照片 .
与GIF相比，PNG提供更好的压缩，更大的调色板和更多功能，包括透明度 . 它是无损的 .
png有比gif更宽的颜色托盘，而gif是专用的，而png则没有 . gif可以做动画，普通png不能 . 浏览器只支持png-transparency大致比IE6更新，但是有一个Javascript修复了这个问题 . 两者都支持alpha透明度 . 一般来说，我会说你应该使用png进行大多数webgraphics，同时使用jpeg进行照片，截图或者类似的操作，因为png压缩在使用时效果不是很好 .
如果您选择JPEG，并且您正在处理网站的图像，您可能需要考虑免费提供的Google Guetzli感知编码器 . 根据我的经验，对于固定质量，Guetzli生成比标准JPEG编码库更小的文件，同时保持与JPEG标准的完全兼容性（因此您的图像将具有与普通JPEG图像相同的兼容性） .
唯一的缺点是Guetzli需要花费大量时间进行编码..但是当你为网站准备图像时，这只会做一次，而好处仍然是永远的！较小的图像下载时间较短，因此您的网站速度将在日常使用中增加 .
GIF具有8位（256色）调色板，其中PNG作为高达24位的调色板 . 因此，PNG可以支持更多颜色，当然算法也支持压缩
13 回答
我通常使用PNG，因为它似乎比GIF有一些优势 . 曾经有过GIF的专利限制，但那些已经过期了 .
GIF适用于具有有限数量颜色的锐边线条艺术（例如徽标） . 这利用了格式的无损压缩，这有利于具有明确边缘的均匀颜色的平坦区域（与JPEG相反，有利于平滑的渐变和更柔和的图像） .
GIF可用于小动画和低分辨率电影剪辑 .
鉴于GIF图像调色板对256色的一般限制，它通常不用作数字摄影的格式 . 数码摄影师使用能够再现更大范围颜色的图像文件格式，例如TIFF，RAW或有损JPEG，它更适合于压缩照片 .
PNG格式是GIF图像的流行替代品，因为它使用更好的压缩技术，并且没有256色的限制，但PNG不支持动画 . 源自PNG的MNG和APNG格式支持动画，但未广泛使用 .
你应该知道一些关键因素......
首先，有两种类型的压缩：Lossless和Lossy .
Lossless 表示图像变小，但不会影响质量 .
Lossy 表示图像（甚至）更小，但不利于质量 . 如果您一次又一次地以有损格式保存图像，图像质量会越来越差 .
还有不同的颜色深度（调色板）：Indexed color和Direct color .
Indexed 表示图像只能存储由作者控制的有限数量的颜色（通常为256），称为颜色映射
Direct 表示您可以存储数千种作者未直接选择的颜色
BMP - 无损/索引和直接
这是一种旧格式 . 它是无损的（保存时没有图像数据丢失），但也几乎没有压缩，这意味着保存为BMP导致非常大的文件大小 . 它可以有Indexed和Direct的调色板，但这是一个小小的安慰 . 文件大小非常大，以至于没有人真正使用过这种格式 .
适用于：没什么 . 没有任何BMP擅长的东西，或者其他格式没有做得更好 .
GIF - 仅限无损/索引
GIF使用无损压缩，这意味着您可以反复保存图像，而不会丢失任何数据 . 文件大小远小于BMP，因为实际使用了良好的压缩，但它只能存储索引调色板 . 这意味着for most use cases，文件中最多只能有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 .
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，它与上述所有文件类型不同，因为它是vector文件格式（以上都是raster） . 这意味着它实际上由线条和曲线而不是像素组成 . 放大矢量图像时，仍然可以看到曲线或线条 . 放大光栅图像时，您将看到像素 .
例如：
这意味着SVG非常适合您希望在Retina屏幕或不同尺寸上保持清晰度的徽标和图标 . 这也意味着可以在更大（更大）的尺寸下使用小型SVG徽标而不会降低图像质量 - 这需要单独的更大（在文件大小方面）文件和光栅格式 .
SVG文件大小通常很小，即使它们在视觉上非常大，这很好 . 但值得注意的是，它确实取决于所用形状的复杂程度 . SVG需要比光栅图像更多的计算能力，因为绘制曲线和线条涉及数学计算 . 如果您的徽标特别复杂，可能会降低用户计算机的速度，甚至文件大小也非常大 . 尽可能简化矢量形状非常重要 .
另外，SVG文件是用XML编写的，因此可以在文本编辑器中打开和编辑（！） . 这意味着它的值可以动态操作 . 例如，您可以使用JavaScript来更改网站上SVG图标的颜色，就像您使用某些文本（即不需要第二个图像），甚至为它们制作动画一样 .
总之，它们最适合简单的扁平形状，如徽标或图形 .
我希望有所帮助！
JPEG对于所有类型的图像（甚至大多数）来说都不是最轻的 . 根据压缩级别，角和直线以及普通“填充”（纯色块）将显得模糊或具有伪影 . 它是一种有损格式，最适合无法清楚看到文物的照片 . 直线（例如图纸和漫画等）在PNG中非常好地压缩而且它是无损的 . 只有当您希望透明度在IE6中工作或者您想要动画时才应使用GIF . GIF仅支持256色托盘，但也是无损的 .
所以基本上这是一种决定图像格式的方法：
GIF如果需要动画或透明度适用于IE6（注意，PNG透明度适用于IE6之后）
如果图像是照片，则为JPEG .
PNG如果是漫画或其他绘图中的直线，或者是否需要具有透明度的宽色域（并且IE6不是因素）
如评论所述，如果您不确定哪些符合条件，请尝试使用不同压缩比的每种格式，并权衡图片的质量和大小，并选择您认为最合适的图片 . 我只是给出了经验法则 .
谷歌已经写好了 . 从Selecting the right image format，您可以找到一个流程图来做出决定：
截至2018年，我们有几种新格式，更好地支持以前的格式和一些使用视频而不是图像的聪明黑客 .
For photographs
jpg- 仍然是最广泛支持的图像格式 .来自谷歌的
webp- New format . 虽然浏览器support不是很好，但潜力很大 .For Icons and graphics
svg- 只要有可能 . 它在视网膜屏幕中可以很好地扩展，可以在文本编辑器中编辑，并且如果在DOM中加载则可以通过JS / CSS进行自定义 .png- 如果它涉及光栅图形（即在photoshop中创建） . 支持透明度，这在此用例中非常重要 .For Animations
svg- 加上矢量图形的css动画 . css动画的svg能力的所有优点 .gif- 仍然是最广泛支持的动画图像格式 .mp4- 如果动画图像实际上是短视频剪辑 . Twitter / Whatsapp将gif转换为mp4 .apng- 体面的浏览器support（即没有IE，Edge），但创建它并不像gif那样简单 .webp- 接近使用mp4 . 差support这是各种动画图像格式的一个很好的comparison .
最后，无论哪种格式，都要确保优化 - 每种格式都有工具（例如SVGO，Guetzli，OptiPNG等），可以节省大量的带宽 .
GIF限制为256色，不支持真正的透明度 . 您应该使用PNG而不是GIF因为它提供了更好的压缩和功能 . PNG非常适合小型和简单的图像，如徽标，图标等 .
JPEG可以通过照片等复杂图像进行更好的压缩 .
有一个黑客可以使用GIF图像来显示真实的颜色 . 可以准备具有256个调色帧且具有0帧延迟的GIF动画，并将动画设置为仅显示一次 . 因此，所有帧都可以同时显示 . 最后，渲染真彩色GIF图像 .
许多软件能够准备这样的GIF图像 . 但是，输出文件大小大于PNG文件 . 如果确实有必要，必须使用它 .
GIF基于每个图像256色的调色板（至少在其基本版本中） . PNG可以做“TrueColour”，即开箱即用的1670万种颜色 . 无损PNG压缩比无损GIF更好 . GIF可以执行“二进制”透明度（0％不透明度或100％不透明度） . PNG可以处理Alpha透明胶片 .
总而言之，如果您不需要使用Alpha透明图像并支持IE6，那么当您需要像素完美的图像用于矢量插图等时，PNG可能是更好的选择 . JPG无与伦比的照片 .
主要区别在于GIF已获得专利并得到更广泛的支持 . PNG是一种开放式规范，IE6不支持alpha透明度 . IE7中的支持得到了改进，但并未完全修复 .
就文件大小而言，GIF具有较小的默认颜色托盘，因此乍一看它们的文件大小往往较小 . PNG文件有一个较大的默认托盘，但是您可以缩小它们的颜色托盘，这样，当您这样做时，它们会导致文件大小小于GIF . 问题再次出现在Internet Explorer中不支持此功能 .
此外，由于PNG可以支持Alpha透明度，因此如果您想要除二进制透明度之外的透明度变体，它们是唯一的选项 .
JPEG在锐边等处的质量很差，因此不适合大多数网页图形 . 它擅长照片 .
与GIF相比，PNG提供更好的压缩，更大的调色板和更多功能，包括透明度 . 它是无损的 .
png有比gif更宽的颜色托盘，而gif是专用的，而png则没有 . gif可以做动画，普通png不能 . 浏览器只支持png-transparency大致比IE6更新，但是有一个Javascript修复了这个问题 . 两者都支持alpha透明度 . 一般来说，我会说你应该使用png进行大多数webgraphics，同时使用jpeg进行照片，截图或者类似的操作，因为png压缩在使用时效果不是很好 .
如果您选择JPEG，并且您正在处理网站的图像，您可能需要考虑免费提供的Google Guetzli感知编码器 . 根据我的经验，对于固定质量，Guetzli生成比标准JPEG编码库更小的文件，同时保持与JPEG标准的完全兼容性（因此您的图像将具有与普通JPEG图像相同的兼容性） .
唯一的缺点是Guetzli需要花费大量时间进行编码..但是当你为网站准备图像时，这只会做一次，而好处仍然是永远的！较小的图像下载时间较短，因此您的网站速度将在日常使用中增加 .
GIF具有8位（256色）调色板，其中PNG作为高达24位的调色板 . 因此，PNG可以支持更多颜色，当然算法也支持压缩