PNG，GIF，JPEG，SVG有哪些不同的用例? [英] What are the different usecases of PNG vs. GIF vs. JPEG vs. SVG?
问题描述
构建网站或界面等时应何时使用某些图像文件类型?
他们的优点和缺点是什么?
我知道PNG& GIF无损，而JPEG有损.
但是PNG和amp;之间的主要区别是什么? GIF?
为什么我要一个比另一个更好?
什么是SVG，什么时候应该使用它?
如果您不关心每个像素，是否应该始终使用JPEG，因为它是最轻的"像素?
您应该注意一些关键因素...
首先，有两种压缩类型:无损和索引颜色和
BMP -无损/索引和直接 这是旧格式.它是无损的(保存时不会丢失图像数据)，但几乎没有压缩或完全没有压缩，这意味着保存为BMP会导致非常大的文件大小.它可以同时具有Indexed和Direct的调色板，但这只是一个小小的安慰.文件大小过大，以至于没有人真正使用过这种格式. 优点:没什么. BMP没有什么可以胜任的，或者没有其他格式可以做得更好的. GIF -无损/仅编入索引 GIF使用无损压缩，这意味着您可以一遍又一遍地保存图像，并且永远不会丢失任何数据.文件大小比BMP小得多，因为实际上使用了良好的压缩，但是它只能存储索引调色板.这意味着在大多数情况下，文件中最多只能包含256种不同的颜色.听起来相当小，确实如此. GIF图像也可以设置动画并具有透明度. 优点:徽标，线条图和其他需要较小的简单图像.仅用于网站. JPEG -有损/直接
优点:照片.还有渐变.
PNG-8 -无损/索引
PNG是一种较新的格式，PNG-8(PNG的索引版本)确实是GIF的良好替代品.但是，可悲的是，它有一些缺点:首先，它不能像GIF那样支持动画(可以，但是，Firefox似乎支持它，这不同于每个浏览器都支持的GIF动画).其次，它与IE6等旧版浏览器存在一些支持问题.第三，像Photoshop这样的重要软件对该格式的实现非常差. (该死，Adobe！)PNG-8只能存储256种颜色，例如GIF.
优点:PNG-8比GIF更好的主要功能是对Alpha Transparency的支持.
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，它与上述所有文件都不同，它是向量文件格式(以上均为光栅).这意味着它实际上是由直线和曲线而不是像素组成的.放大矢量图像时，仍然会看到曲线或直线.放大光栅图像时，您将看到像素.
例如:
这意味着SVG非常适合您希望在Retina屏幕或其他尺寸上保持清晰度的徽标和图标.这也意味着较小的SVG徽标可以以更大(更大)的尺寸使用而不会降低图像质量-某些情况下，这需要单独使用光栅格式的更大(就文件大小而言)文件.
SVG文件的大小通常很小，即使它们在视觉上非常大，这也很棒.值得记住的是，它确实取决于所使用形状的复杂性. SVG比栅格图像需要更多的计算能力，因为在绘制曲线和线时涉及数学计算.如果您的徽标特别复杂，可能会减慢用户计算机的速度，甚至会导致文件很大.重要的是要尽可能简化矢量形状.
此外，SVG文件是用XML编写的，因此可以在文本编辑器(！)中打开和编辑.这意味着可以即时操纵其值.例如，您可以使用JavaScript来更改网站上SVG图标的颜色，就像您要输入一些文本(即不需要第二张图像)，甚至为其添加动画效果一样.
总而言之，它们最适合徽标或图形之类的简单平面形状.
希望对您有帮助！
When should certain image file types 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屋！
