PNG与GIF对比JPEG与SVG - 何时使用？ [英] PNG vs. GIF vs. JPEG vs. SVG - When best to use?

问题描述

在构建网站或界面等时应该何时使用某些图像文件类型？

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

我知道PNG& GIF是无损的，而JPEG则是有损的。

但是PNG与...之间的主要区别是什么？ GIF？

为什么我更喜欢一个？
什么是SVG以及何时应该使用它？

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

解决方案

你应该知道一些关键因素......

首先，有两种类型的压缩：，文件中最多只能有256种不同的颜色。这听起来相当少，而且确实如此。

GIF图像也可以设置动画并具有透明度。

适合：标识，线条图和其他需要小的简单图像。仅用于网站。

---

JPEG - 有损/直接

JPEG图像旨在通过删除人眼不会注意到的信息，使详细的摄影图像尽可能小。因此，它是一种有损格式，并且反复保存相同的文件将导致更多数据随着时间的推移而丢失。它有数千种颜色的调色板，因此非常适合拍摄照片，但有损压缩意味着它对徽标和线条图不利：它们不仅看起来模糊，而且与GIF相比，这些图像也会有更大的文件大小！

适用于：照片。此外，渐变。

---

PNG-8 - 无损/索引

PNG是一种较新的格式，而PNG-8（PNG的索引版本）确实是GIF的良好替代品。然而，遗憾的是，它有一些缺点：首先它不能像GIF那样支持动画（好吧它可以，但只有Firefox似乎支持它，不像每个浏览器都支持的GIF动画）。其次，它与IE6等旧浏览器有一些支持问题。第三，像Photoshop这样的重要软件的格式实现很差。 （该死的，Adobe！）PNG-8只能存储256种颜色，比如GIF。

适用于：PNG-8比GIF更好的主要原因是支持Alpha透明度。

---

PNG-24 - 无损/直接

PNG-24是一种很好的格式，它将无损编码与直接颜色（数千种颜色，就像JPEG）相结合。在这方面它非常像BMP，除了PNG实际上压缩图像，因此它会产生更小的文件。不幸的是，PNG-24文件仍然会比JPEG（照片）和GIF / PNG-8（用于徽标和图形）更大，所以你仍然需要考虑是否真的想要使用它。

尽管PNG-24在压缩时允许数千种颜色，但它们并不是要取代JPEG图像。保存为PNG-24的照片可能至少比同等JPEG图像大5倍，可见质量几乎没有改善。 （当然，如果您不关心文件大小，并希望获得最佳质量的图像，这可能是一个理想的结果。）

就像PNG- 8，PNG-24也支持alpha透明度。

---

SVG - 无损/矢量

目前越来越受欢迎的文件类型是SVG，它与上述所有文件类型不同，因为它是

< img src =https://i.stack.imgur.com/UydAT.pngalt =SVG vs PNG>

这意味着SVG非常适合您希望在Retina屏幕或不同尺寸上保持清晰度的徽标和图标。这也意味着可以在更大（更大）尺寸下使用小型SVG徽标而不会降低图像质量 - 这需要一个单独的更大（在文件大小方面）文件和栅格格式。

SVG文件大小通常很小，即使它们在视觉上非常大，这很好。但值得注意的是，它确实取决于所用形状的复杂程度。 SVG需要比光栅图像更多的计算能力，因为绘制曲线和线条涉及数学计算。如果您的徽标特别复杂，可能会降低用户计算机的速度，甚至文件大小也非常大。尽可能简化矢量形状非常重要。

此外，SVG文件是用XML编写的，因此可以在文本编辑器中打开和编辑（！ ）。这意味着它的值可以动态操作。例如，您可以使用JavaScript来更改网站上SVG图标的颜色，就像您对某些文本（即不需要第二个图像）一样，甚至可以为它们设置动画。

总之，它们最适合简单的扁平形状，如徽标或图形。

我希望有所帮助！

When should certain image filetypes be used when building websites or interfaces, etc?

What are their points of strength and weakness?

I know that PNG & GIF are lossless, while JPEG is lossy.
But what is the main difference between PNG & GIF?
Why should I prefer one over the other? What is SVG and when should I use it?

If you don't care about each and every pixel, should you always use JPEG since it's the "lightest" one?

解决方案

You should be aware of a few key factors...

First, there are two types of compression: Lossless and Lossy.

• Lossless means that the image is made smaller, but at no detriment to the quality.
• Lossy means the image is made (even) smaller, but at a detriment to the quality. If you saved an image in a Lossy format over and over, the image quality would get progressively worse and worse.

There are also different colour depths (palettes): Indexed color and Direct color.

• Indexed means that the image can only store a limited number of colours (usually 256), controlled by the author, in something called a Color Map
• Direct means that you can store many thousands of colours that have not been directly chosen by the author

---

BMP - Lossless / Indexed and Direct

This is an old format. It is Lossless (no image data is lost on save) but there's also little to no compression at all, meaning saving as BMP results in VERY large file sizes. It can have palettes of both Indexed and Direct, but that's a small consolation. The file sizes are so unnecessarily large that nobody ever really uses this format.

Good for: Nothing really. There isn't anything BMP excels at, or isn't done better by other formats.

---

GIF - Lossless / Indexed only

GIF uses lossless compression, meaning that you can save the image over and over and never lose any data. The file sizes are much smaller than BMP, because good compression is actually used, but it can only store an Indexed palette. This means that for most use cases, there can only be a maximum of 256 different colours in the file. That sounds like quite a small amount, and it is.

GIF images can also be animated and have transparency.

Good for: Logos, line drawings, and other simple images that need to be small. Only really used for websites.

---

JPEG - Lossy / Direct

JPEGs images were designed to make detailed photographic images as small as possible by removing information that the human eye won't notice. As a result it's a Lossy format, and saving the same file over and over will result in more data being lost over time. It has a palette of thousands of colours and so is great for photographs, but the lossy compression means it's bad for logos and line drawings: Not only will they look fuzzy, but such images will also have a larger file-size compared to GIFs!

Good for: Photographs. Also, gradients.

---

PNG-8 - Lossless / Indexed

PNG is a newer format, and PNG-8 (the indexed version of PNG) is really a good replacement for GIFs. Sadly, however, it has a few drawbacks: Firstly it cannot support animation like GIF can (well it can, but only Firefox seems to support it, unlike GIF animation which is supported by every browser). Secondly it has some support issues with older browsers like IE6. Thirdly, important software like Photoshop have very poor implementation of the format. (Damn you, Adobe!) PNG-8 can only store 256 colours, like GIFs.

Good for: The main thing that PNG-8 does better than GIFs is having support for Alpha Transparency.

---

PNG-24 - Lossless / Direct

PNG-24 is a great format that combines Lossless encoding with Direct color (thousands of colours, just like JPEG). It's very much like BMP in that regard, except that PNG actually compresses images, so it results in much smaller files. Unfortunately PNG-24 files will still be bigger than JPEGs (for photos), and GIFs/PNG-8s (for logos and graphics), so you still need to consider if you really want to use one.

Even though PNG-24s allow thousands of colours while having compression, they are not intended to replace JPEG images. A photograph saved as a PNG-24 will likely be at least 5 times larger than a equivalent JPEG image, with very little improvement in visible quality. (Of course, this may be a desirable outcome if you're not concerned about filesize, and want to get the best quality image you can.)

Just like PNG-8, PNG-24 supports alpha-transparency, too.

---

SVG - Lossless / Vector

A filetype that is currently growing in popularity is SVG, which is different than all the above in that it's a vector file format (the above are all raster). This means that it's actually comprised of lines and curves instead of pixels. When you zoom in on a vector image, you still see a curve or a line. When you zoom in on a raster image, you will see pixels.

For example:

This means SVG is perfect for logos and icons you wish to retain sharpness on Retina screens or at different sizes. It also means a small SVG logo can be used at a much larger (bigger) size without degradation in image quality -- something that would require a separate larger (in terms of filesize) file with raster formats.

SVG file sizes are often tiny, even if they're visually very large, which is great. It's worth bearing in mind, however, that it does depend on the complexity of the shapes used. SVGs require more computing power than raster images because mathematical calculations are involved in drawing the curves and lines. If your logo is especially complicated it could slow down a user's computer, and even have a very large file size. It's important that you simplify your vector shapes as much as possible.

Additionally, SVG files are written in XML, and so can be opened and edited in a text editor(!). This means its values can be manipulated on the fly. For example, you could use JavaScript to change the colour of an SVG icon on a website, much like you would some text (ie. no need for a second image), or even animate them.

In all, they are best for simple flat shapes like logos or graphs.

I hope that helps!

这篇关于PNG与GIF对比JPEG与SVG - 何时使用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！