PNG与GIF与JPEG与SVG的不同用途有哪些？

Question

在构建网站或界面等时应该何时使用某些图像文件类型？

他们的优点和缺点是什么？

我知道PNG和GIF是无损的,而JPEG是有损的.
但是PNG和GIF之间的主要区别是什么？
为什么我更喜欢一个呢？什么是SVG以及何时使用它？

如果你不关心每个像素,你应该总是使用JPEG,因为它是"最轻"的吗？

Answer 1

你应该知道一些关键因素......

首先,有两种类型的压缩:无损和有损.

• 无损意味着图像变小,但不会对质量造成损害.
• 有损意味着图像(甚至)变小,但对质量有害.如果您一次又一次地以有损格式保存图像,图像质量会越来越差.

还有不同的颜色深度(调色板):索引颜色和直接颜色.

• 索引意味着图像只能存储由作者控制的有限数量的颜色(通常为256),称为颜色映射
• 直接意味着您可以存储数千种未经作者直接选择的颜色

BMP - 无损/索引和直接

这是一种旧格式.它是无损的(保存时没有图像数据丢失),但也几乎没有压缩,这意味着保存为BMP导致非常大的文件大小.它可以包含Indexed和Direct的调色板,但这是一个小小的安慰.文件大小非常大,以至于没有人真正使用过这种格式.

适合:真的没有.没有任何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.

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,它与上述所有不同,因为它是矢量文件格式(以上都是栅格).这意味着它实际上由线条和曲线而不是像素组成.放大矢量图像时,仍然可以看到曲线或线条.放大光栅图像时,您将看到像素.

例如:

这意味着SVG非常适合您希望在Retina屏幕上或不同尺寸上保持清晰度的徽标和图标.这也意味着可以在更大(更大)尺寸下使用小型SVG徽标而不会降低图像质量 - 这需要单独的更大(在文件大小方面)文件和光栅格式.

SVG文件大小通常很小,即使它们在视觉上非常大,这很好.但值得注意的是,它确实取决于所用形状的复杂程度.SVG需要比光栅图像更多的计算能力,因为绘制曲线和线条涉及数学计算.如果您的徽标特别复杂,可能会降低用户计算机的速度,甚至会导致文件非常大.尽可能简化矢量形状非常重要.

另外,SVG文件是用XML编写的,因此可以在文本编辑器中打开和编辑(!).这意味着它的值可以动态操作.例如,您可以使用JavaScript来更改网站上SVG图标的颜色,就像您对某些文本(即不需要第二个图像)一样,甚至可以为它们制作动画.

总之,它们最适合简单的扁平形状,如徽标或图形.

我希望有所帮助!

Answer 2

JPEG对于所有类型的图像(甚至大多数)来说都不是最轻的.根据压缩级别,角和直线以及普通"填充"(纯色块)将显得模糊或具有伪影.它是一种有损格式,最适用于无法清楚看到文物的照片.直线(如图纸和漫画等)在PNG中非常好地压缩而且它是无损的.只有当您希望透明度在IE6中工作或者您想要动画时才应使用GIF.GIF仅支持256色托盘,但也是无损的.

所以基本上这是一种决定图像格式的方法:

• GIF如果需要动画或透明度适用于IE6(注意,PNG透明度适用于IE6之后)
• 如果图像是照片,则为JPEG.
• PNG如果是漫画或其他绘图中的直线,或者是否需要具有透明度的宽色域(并且IE6不是因素)

如评论所述,如果您不确定哪些符合条件,请尝试使用不同压缩比的每种格式,并权衡图片的质量和大小,并选择您认为最合适的图片.我只是给出了经验法则.

Answer 3

我通常使用PNG,因为它似乎比GIF有一些优势.曾经有过GIF的专利限制,但那些已经过期了.

GIF适用于具有有限数量颜色的锐边线条艺术(例如徽标).这利用了格式的无损压缩,这有利于具有明确边缘的均匀颜色的平坦区域(与JPEG相反,有利于平滑的渐变和更柔和的图像).

GIF可用于小动画和低分辨率电影剪辑.

鉴于GIF图像调色板对256色的一般限制,它通常不用作数字摄影的格式.数码摄影师使用能够再现更大范围颜色的图像文件格式,例如TIFF,RAW或有损JPEG,这更适合于压缩照片.

PNG格式是GIF图像的流行替代品,因为它使用更好的压缩技术,并且没有256色的限制,但PNG不支持动画.源自PNG的MNG和APNG格式支持动画,但没有广泛使用.

Answer 4

JPEG在锐边等处的质量很差,因此不适合大多数网页图形.它擅长照片.

与GIF相比,PNG提供更好的压缩,更大的调色板和更多功能,包括透明度.它是无损的.

Answer 5

GIF限制为256色,不支持真正的透明度.您应该使用PNG而不是GIF,因为它提供了更好的压缩和功能.PNG非常适合徽标,图标等小而简单的图像.

JPEG可以通过照片等复杂图像进行更好的压缩.