在构建网站或界面等时,什么时候应该使用特定的图像文件类型?

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

我知道PNG和GIF是无损的,而JPEG是有损的。 但是PNG和GIF的主要区别是什么呢? 为什么我要选择一个而不是另一个呢? 什么是SVG,什么时候应该使用它?

如果你不关心每一个像素,你应该总是使用JPEG,因为它是“最轻”的?


当前回答

JPEG会有较差的质量在尖锐的边缘等,因此它不适合大多数网络图形。它擅长摄影。

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

其他回答

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

就文件大小而言,GIF有一个较小的默认颜色托盘,所以乍一看它们往往是较小的文件大小。PNG文件有一个更大的默认托盘,但是你可以缩小他们的颜色托盘,这样当你这样做的时候,他们会导致一个比GIF更小的文件大小。问题又来了,这个特性在Internet Explorer中不受支持。

另外,因为png可以支持alpha透明度,所以如果你想要二进制透明度以外的其他透明度,它们是唯一的选择。

JPEG is not the lightest for all kinds of images(or even most). Corners and straight lines and plain "fills"(blocks of solid color) will appear blurry or have artifacts in them depending on the compression level. It is a lossy format, and works best for photographs where you can't see artifacts clearly. Straight lines(such as in drawings and comics and such) compress very nicely in PNG and it's lossless. GIF should only be used when you want transparency to work in IE6 or you want animation. GIF only supports a 256 color pallete but is also lossless.

这里有一个决定图像格式的方法:

GIF如果需要在IE6上运行的动画或透明(注意,PNG透明在IE6后工作) 如果图像是照片,则为JPEG格式。 如果像漫画或其他绘画中的直线,或者如果需要透明的宽颜色范围(IE6不是一个因素),则使用PNG格式

如上所述,如果你不确定哪种格式合适,可以尝试不同压缩比的每种格式,权衡图片的质量和大小,然后选择一种你认为最好的格式。我只是给出一些经验之谈。

PNG具有比GIF更广泛的调色板,GIF是专有的,而PNG不是。GIF可以做动画,而normal-png不能。png-transparency只有IE6以上的浏览器才支持,但是Javascript已经修复了这个问题。两者都支持alpha透明性。 一般来说,我想说的是,你应该在大多数网页图形上使用png,而在照片、截图或类似的地方使用jpeg,因为png压缩在这些地方效果不太好。

有一个黑客可以使用GIF图像来显示真实的颜色。一个人可以准备一个GIF动画与256色调色帧0帧延迟,并设置动画只显示一次。所以,所有的帧都可以同时显示。最后,一个真正的彩色GIF图像被渲染。

许多软件都能够准备这样的GIF图像。但是,输出文件的大小大于PNG文件。如果确实有必要,就必须使用。

编辑:正如@mwfarnley提到的,可能会有小问题。不过,仍有可能的变通办法。这里可以看到一个工作示例。最终渲染的图像是这样的:

full-color-gif-image

如果你选择JPEG格式,并且你正在处理一个网站的图像,你可能会考虑谷歌Guetzli感知编码器,它是免费的。根据我的经验,对于一个固定质量的Guetzli生成的文件比标准JPEG编码库更小,同时保持与JPEG标准的完全兼容性(因此您的图像将具有与普通JPEG图像相同的兼容性)。

唯一的缺点是Guetzli需要大量的时间来编码。但这只做一次,当你为网站准备图像时,而好处永远存在!较小的图像将花费更少的时间下载,所以你的网站速度将提高在日常使用。