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

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

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

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


当前回答

正如@aarjithn所指出的,WebP是用于存储照片的编解码器。

这也是一个存储动画(动画图像序列)的编解码器。截至2020年,大多数主流浏览器都有开箱即用的支持(兼容性表)。 注意WIC有一个插件可用。

它比GIF有优势,因为它基于视频编解码器VP8,比GIF有更广泛的颜色范围,GIF限制为256种颜色,它将其扩展到224 = 16777216种颜色,仍然节省大量的空间。

其他回答

正如@aarjithn所指出的,WebP是用于存储照片的编解码器。

这也是一个存储动画(动画图像序列)的编解码器。截至2020年,大多数主流浏览器都有开箱即用的支持(兼容性表)。 注意WIC有一个插件可用。

它比GIF有优势,因为它基于视频编解码器VP8,比GIF有更广泛的颜色范围,GIF限制为256种颜色,它将其扩展到224 = 16777216种颜色,仍然节省大量的空间。

GIF有8位(256色)调色板,而PNG有24位调色板。所以,PNG可以支持更多的颜色,当然算法也支持压缩

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

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

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

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

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

full-color-gif-image

GIF只支持256种颜色,不支持真正的透明。你应该使用PNG而不是GIF,因为它提供更好的压缩和功能。PNG非常适合小而简单的图像,如logo、图标等。

JPEG对照片等复杂图像有更好的压缩效果。