在构建网站或界面等时,什么时候应该使用特定的图像文件类型?
他们的优点和缺点是什么?
我知道PNG和GIF是无损的,而JPEG是有损的。 但是PNG和GIF的主要区别是什么呢? 为什么我要选择一个而不是另一个呢? 什么是SVG,什么时候应该使用它?
如果你不关心每一个像素,你应该总是使用JPEG,因为它是“最轻”的?
在构建网站或界面等时,什么时候应该使用特定的图像文件类型?
他们的优点和缺点是什么?
我知道PNG和GIF是无损的,而JPEG是有损的。 但是PNG和GIF的主要区别是什么呢? 为什么我要选择一个而不是另一个呢? 什么是SVG,什么时候应该使用它?
如果你不关心每一个像素,你应该总是使用JPEG,因为它是“最轻”的?
当前回答
有一个黑客可以使用GIF图像来显示真实的颜色。一个人可以准备一个GIF动画与256色调色帧0帧延迟,并设置动画只显示一次。所以,所有的帧都可以同时显示。最后,一个真正的彩色GIF图像被渲染。
许多软件都能够准备这样的GIF图像。但是,输出文件的大小大于PNG文件。如果确实有必要,就必须使用。
编辑:正如@mwfarnley提到的,可能会有小问题。不过,仍有可能的变通办法。这里可以看到一个工作示例。最终渲染的图像是这样的:
full-color-gif-image
其他回答
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格式
如上所述,如果你不确定哪种格式合适,可以尝试不同压缩比的每种格式,权衡图片的质量和大小,然后选择一种你认为最好的格式。我只是给出一些经验之谈。
JPEG会有较差的质量在尖锐的边缘等,因此它不适合大多数网络图形。它擅长摄影。
与GIF相比,PNG提供了更好的压缩,更大的调色板和更多的功能,包括透明度。而且它是无损的。
有一个黑客可以使用GIF图像来显示真实的颜色。一个人可以准备一个GIF动画与256色调色帧0帧延迟,并设置动画只显示一次。所以,所有的帧都可以同时显示。最后,一个真正的彩色GIF图像被渲染。
许多软件都能够准备这样的GIF图像。但是,输出文件的大小大于PNG文件。如果确实有必要,就必须使用。
编辑:正如@mwfarnley提到的,可能会有小问题。不过,仍有可能的变通办法。这里可以看到一个工作示例。最终渲染的图像是这样的:
full-color-gif-image
正如@aarjithn所指出的,WebP是用于存储照片的编解码器。
这也是一个存储动画(动画图像序列)的编解码器。截至2020年,大多数主流浏览器都有开箱即用的支持(兼容性表)。 注意WIC有一个插件可用。
它比GIF有优势,因为它基于视频编解码器VP8,比GIF有更广泛的颜色范围,GIF限制为256种颜色,它将其扩展到224 = 16777216种颜色,仍然节省大量的空间。
以下是包含WebP格式的更新答案:
JPEG格式:
创建JPEG文件格式是为了优化照片和其他图像 使用复杂的颜色范围。 当保存JPEG(例如在Photoshop中)时,您可以设置您想要实现的优化级别,从无损意味着没有细节丢失到极度有损。 在大多数情况下,对于web应用程序,您可以将压缩设置为 75%,没有太多细节丢失。
何时使用JPEG?任何时候你有一张照片或一个复杂的颜色梯度的图形,你不能使用webP。
PNG
PNG主要是一种无损位图图像格式,用于HQ计算机生成图像。 与JPEG不同,它可以有一个透明层。当你在网上看到一个透明的图像或图形时,它通常是PNG格式的。
什么时候使用PNG?任何时候你有一个计算机生成的图形或透明图像。一般照片不建议使用PNG格式 文件大小通常会明显大于 等价的JPEG或webP。
GIF:
GIF is a 256 color graphic format supporting both images and animations. Way back, GIFs were often used for simple graphics and then were slowly replaced by JPEG and PNG. GIF Images: Low file size and low quality. They have almost no colored depth they only have 256 colors to work with. Replace them with SVGs. Animated GIF: They can become very large very quickly and can potentially create huge performance issues. Replace them with videos. (Twitter for example, converts all animated GIFs that are uploaded into standard video files and then share those video files instead of the animated GIF.)
什么时候使用GIF?对于web应用程序,就不要这样做!用svg替换GIF图像;用视频代替动画gif。
SVG
SVG是一种网络原生图形格式,描述线条、曲线和形状,并允许浏览器实时绘制图形。 svg是可伸缩的,这意味着图形在任何尺寸下都很好看,从很小到非常大。 甚至CSS也可以应用于它们。
什么时候使用SVG?只要你有电脑生成的图形 这可能需要缩放或需要响应-就像一个图标,一个标志或图形。
WebP
一个全新的无损有损图像格式的透明度,是专门为网络创建的。 它的目标是取代JPEG,因为它提供了良好的压缩,并增加了透明度。 所有现代浏览器都支持WebP,但在旧浏览器中没有任何支持,因此现在使用它们需要使用旧的图像格式。
什么时候使用webP?图像和计算机图形,如果你知道你的 用户将使用更新的浏览器。如果你需要赡养长辈 浏览器提供JPEG或PNG的备选方案。