png与gif、jpeg与svg的不同使用情形是什么?

你应该知道几个关键因素…

首先,压缩有两种类型: Lossless 和 Lossy .

• 无损的 意味着图像变小了,但不会影响质量。
• 有损的 意味着图像变得更小,但会损害图像的质量。如果以有损格式反复保存图像,图像质量会越来越差。

还有不同的颜色深度(调色板): Indexed color 和 Direct color .

• 索引的 意味着图像只能在一个称为彩色地图的东西中存储有限数量的颜色(通常是256种),由作者控制
• 直接的 意思是你可以储存很多 数千 作者没有直接选择的颜色

骨形态发生蛋白 -无损/索引和直接

这是旧格式。它是无损的(保存时不会丢失图像数据),但也几乎没有压缩,这意味着保存为bmp会导致文件非常大。它可以有索引和直接的选项板,但这是一个小小的安慰。文件大小太大,以至于没有人真正使用过这种格式。

好处:没什么。没有什么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比gifs做得更好的主要原因是支持alpha透明性。

PNG-24 -无损/直接

png-24是一种很好的格式,它将无损编码与直接颜色(数千种颜色,就像jpeg一样)结合在一起。在这方面,它非常像bmp,只是png实际上压缩了图像,所以它生成的文件要小得多。不幸的是,png-24文件仍然比jpeg(用于照片)和gifs/png-8s(用于徽标和图形)要大,所以您仍然需要考虑是否真的要使用它们。

尽管png-24s在压缩时允许数千种颜色,但它们并不打算取代jpeg图像。保存为PNG-24格式的照片可能比同等的JPEG格式的图像大至少5倍,可见质量几乎没有改善。(当然,如果您不关心文件大小,并且希望获得最佳质量的图像,那么这可能是一个理想的结果。)

就像png-8一样,png-24也支持alpha透明。

静止无功发生器 -无损/矢量

目前流行的一种文件类型是svg,它不同于以上所有文件类型,因为它是 vector 文件格式(以上都是 raster )这意味着它实际上由线条和曲线组成,而不是像素。放大矢量图像时,仍会看到曲线或直线。放大光栅图像时,将看到像素。

例如:

这意味着SVG非常适合您希望在视网膜屏幕或不同大小上保持清晰度的徽标和图标。这也意味着一个小的svg徽标可以在更大(更大)的大小下使用,而不会降低图像质量——这需要一个单独的更大(就文件大小而言)的光栅格式的文件。

svg文件的大小通常很小,即使它们在视觉上非常大,这很好。不过,值得记住的是,它确实取决于所用形状的复杂性。SVG比光栅图像需要更多的计算能力,因为在绘制曲线和直线时需要进行数学计算。如果你的标志特别复杂,它可能会减慢用户的计算机速度,甚至有一个非常大的文件大小。尽可能简化向量形状是很重要的。

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

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

我希望这能有帮助!

jpeg不是所有图像(甚至大多数图像)中最轻的。角点和直线以及普通的“填充”(纯色块)将根据压缩级别而变得模糊或有瑕疵。这是一种有损格式,最适用于那些看不清文物的照片。直线(如在绘图和漫画等)在PNG中压缩得非常好,而且是无损的。只有当你想在ie6中使用透明性或者想要动画时,才应该使用gif。gif只支持256色的托盘,但也是无损的。

所以基本上这里有一种确定图像格式的方法:

• gif如果需要在ie6上工作的动画或透明度(注意,png透明度在ie6之后工作)
• JPEG如果图像是照片。
• PNG,如果漫画或其他绘图中的直线,或者如果需要具有透明度的宽颜色范围(IE6不是一个因素)

如前所述,如果你不确定什么是合格的,尝试不同压缩比的每种格式,权衡图片的质量和大小,然后选择你认为最好的格式。我只是给出经验法则。

我通常使用png,因为它似乎比gif有一些优势。以前对gif有专利限制,但现在已经过期了。

GIF适用于边缘锐利的线条艺术(如徽标),颜色数量有限。这利用了格式的无损压缩,这有利于均匀颜色的平坦区域和清晰的边缘(与jpeg相比,jpeg有利于平滑的梯度和更柔和的图像)。

gifs可以用于小动画和低分辨率电影剪辑。

鉴于gif图像调色板一般限制为256色,因此通常不用作数字摄影的格式。数码摄影师使用能够再现更大范围颜色的图像文件格式,例如tiff、raw或有损jpeg,后者更适合压缩照片。

png格式是gif图像的流行替代格式,因为它使用更好的压缩技术,并且没有256色的限制,但是png不支持动画。mng和apng格式都源于png,支持动画,但应用并不广泛。

jpeg在锐利的边缘等处会有很差的质量,因此它不适合大多数web图形。它擅长摄影。

与gif相比,png提供了更好的压缩、更大的托盘和更多的功能,包括透明度。而且是无损的。

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

jpeg对像照片这样的复杂图像有更好的压缩效果。

png比gif有更宽的颜色托盘,gif更合适,而png没有。gif可以做动画,而普通png不能。png透明性只在浏览器中得到支持,它比ie6更新得多,但是有一个javascript解决了这个问题。两者都支持alpha透明。 一般来说,我会说,你应该使用PNG为大多数网络图形,而使用JPEG为照片,截图,或类似的,因为PNG压缩工作不太好对thoose。

基于每幅图像256色调色板的gif(至少在其基本形式中)。PNG可以做到“真正的颜色”,即1670万种颜色。无损PNG比无损GIF压缩效果好。gif可以做“二进制”透明度(0%不透明度或100%不透明度)。PNG可以处理Alpha透明胶片。

总之,如果不需要使用alpha透明图像并支持ie6,那么当需要像素完美的图像用于矢量插图等时,png可能是更好的选择。JPG的照片是无与伦比的。

有一种方法可以使用gif图像来显示真彩色。一个可以准备一个带有256个彩色调色板帧的gif动画,延迟为0帧,并将动画设置为只显示一次。因此,所有帧可以同时显示。最后,渲染一个真正的彩色gif图像。

许多软件都能对这样的gif图像进行渲染。但是,输出文件的大小大于PNG文件。如果真有必要的话,一定要用。

主要的区别是gif获得了专利,并且得到了更广泛的支持。PNG是一个开放的规范,IE6不支持alpha透明。IE7中的支持得到了改进,但没有完全修复。

就文件大小而言,gif有一个较小的默认颜色托盘,因此乍一看它们往往是较小的文件大小。PNG文件有一个更大的默认托盘,但是您可以缩小它们的颜色托盘,这样,当您这样做时,它们会导致比GIF文件更小的文件大小。问题再次出现在Internet Explorer中不支持此功能。

另外,因为png可以支持alpha透明度,所以如果您希望透明度的变化而不是二进制透明度,那么它们是唯一的选项。

gif有8位(256色)调色板,其中png最多为24位调色板。因此,png可以支持更多的颜色,当然算法支持压缩

如果您选择JPEG,并且正在处理网站的图像,则可能需要考虑 Google Guetzli 感知编码器,免费提供。以我的经验,对于一个固定质量的guetzli产生比标准jpeg编码库更小的文件,同时保持与jpeg标准的完全兼容性(因此您的图像将具有与普通jpeg图像相同的兼容性)。

唯一的缺点是格兹利 许多 编码的时间..但这只做了一次,当你准备网站的形象,而利益永远保留!较小的图片将花费较少的时间下载,所以您的网站速度将增加在日常使用。

截至2018年,我们有几种新格式,更好地支持以前的格式,以及一些使用视频代替图像的巧妙技巧。

为了拍照

jpg -仍然是最广泛支持的图像格式。

webp - New format 来自谷歌。很有潜力,尽管浏览器 support 不是很好。

用于图标和图形

svg -只要可能。它在retina屏幕上可以很好地扩展,在文本编辑器中可以编辑,如果加载到dom中可以通过js/css进行定制。

png -如果它涉及光栅图形(即在photoshop中创建时)。支持透明性,这在本用例中非常重要。

对于动画

静止无功发生器 -加上矢量图形的css动画。svg的所有优点+css动画的强大功能。

gif -仍然是最广泛支持的动画图像格式。

mp4 -如果动画图像实际上是短视频剪辑。 Twitter /whatsapp将gif转换为mp4。

apng -像样的浏览器 support (也就是说,没有i e,edge),但是创建它并不像gifs那么简单。

韦伯 -接近使用MP4。贫穷的 支持

这真不错 comparison 各种动画图像格式。

最后,无论是哪种格式,都要确保对其进行优化-每种格式都有工具(如svgo、guetzli、optipng等),可以节省相当多的带宽。