在构建网站或界面等时,什么时候应该使用特定的图像文件类型?
他们的优点和缺点是什么?
我知道PNG和GIF是无损的,而JPEG是有损的。 但是PNG和GIF的主要区别是什么呢? 为什么我要选择一个而不是另一个呢? 什么是SVG,什么时候应该使用它?
如果你不关心每一个像素,你应该总是使用JPEG,因为它是“最轻”的?
在构建网站或界面等时,什么时候应该使用特定的图像文件类型?
他们的优点和缺点是什么?
我知道PNG和GIF是无损的,而JPEG是有损的。 但是PNG和GIF的主要区别是什么呢? 为什么我要选择一个而不是另一个呢? 什么是SVG,什么时候应该使用它?
如果你不关心每一个像素,你应该总是使用JPEG,因为它是“最轻”的?
当前回答
截至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需要大量的时间来编码。但这只做一次,当你为网站准备图像时,而好处永远存在!较小的图像将花费更少的时间下载,所以你的网站速度将提高在日常使用。
正如@aarjithn所指出的,WebP是用于存储照片的编解码器。
这也是一个存储动画(动画图像序列)的编解码器。截至2020年,大多数主流浏览器都有开箱即用的支持(兼容性表)。 注意WIC有一个插件可用。
它比GIF有优势,因为它基于视频编解码器VP8,比GIF有更广泛的颜色范围,GIF限制为256种颜色,它将其扩展到224 = 16777216种颜色,仍然节省大量的空间。
GIF只支持256种颜色,不支持真正的透明。你应该使用PNG而不是GIF,因为它提供更好的压缩和功能。PNG非常适合小而简单的图像,如logo、图标等。
JPEG对照片等复杂图像有更好的压缩效果。
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