PNG、GIF、JPEG 和 SVG 的不同用例是什么? [英] What are the different usecases of PNG vs. GIF vs. JPEG vs. SVG?
问题描述
在构建网站或界面等时应何时使用某些图像文件类型?
他们的强项和弱点是什么?
我知道 PNG &GIF 是无损的，而 JPEG 是有损的.
但是PNG和PNG之间的主要区别是什么?动图?
为什么我应该更喜欢一个?什么是 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-8s(用于徽标和图形)大，因此您仍然需要考虑是否真的要使用.
尽管 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屋！
