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

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

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

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


当前回答

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

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

其他回答

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

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

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

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

动图适用于边缘锐利的线条艺术(如logo),颜色数量有限。这充分利用了该格式的无损压缩特性,它有利于色彩均匀、边缘清晰的平面区域(与JPEG相反,JPEG有利于平滑的渐变和更柔和的图像)。

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

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

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

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

的照片

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

webp -谷歌的新格式。很好的潜力,尽管浏览器支持不是很好。

图标和图形

SVG——只要可能。它在视网膜屏幕上的伸缩性很好,在文本编辑器中可编辑,如果在DOM中加载,则可通过JS/CSS自定义。

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

对于动画

SVG -加上CSS动画矢量图形。svg的所有优点+ css动画的力量。

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

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

apng -不错的浏览器支持(即没有IE, Edge),但创建它不像gif那样简单。

Webp -接近使用mp4。可怜的支持

这是各种动画图像格式的一个很好的比较。

最后,无论哪种格式,都要确保优化它——每种格式都有工具(如SVGO, Guetzli, OptiPNG等),可以节省大量的带宽。

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

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