网站图像格式：为正确的任务选择正确的格式
在设计网站时，您认为用于特定任务的最佳图像格式是什么？
当我试图找出用于特定任务的格式时，我总是陷入困境......例如，我应该全部使用 .jpg 吗？ 或者，何时以及为什么我应该使用 .png？
例如，采用 Amazon 的网站，他们使用 .jpg 作为产品图片 (示例），.gif 对于此透明像素 (示例）和.png 为其 CSS Sprites (示例)
另一方面，Play.com 使用 < strong>.gif 作为其网站徽标（示例< /a>），但将 .jpg 用于其网站产品（例如 Amazon）（示例），就其主页而言，上面没有任何 .png。
那么我的网站应该使用什么格式？ 为什么我应该使用它们？
[更新]
When designing a website, what do you consider the best image format to use for a particular task?
I always find myself in a dilemma when trying to figure out what format to use for a specific task...like for example, should I use .jpg all round? or, when and why should I use a .png?
For example, taking Amazon's website, they use .jpg for product images (Example), .gif for this transparent pixel (Example) and .png for their CSS Sprites (Example)
On the other hand, Play.com use a .gif for their website logo (Example), but use .jpg for their website products (like Amazon) (Example) and as far as their main page goes, they dont have any .pngs on it.
So what formats should I use for my websites? and why should I use them?
[UPDATE]
Thanks CruellO for this link for explaining the differences, and also Dustin for giving reasons on what to use.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
您应该注意一些关键因素......
首先，有两种类型的压缩： 无损 和 有损。
无损意味着图像变小，但不影响质量。 有损意味着图像变得（甚至）更小，但会损害质量。 如果一遍又一遍地以有损格式保存图像，图像质量会变得越来越差。
还有不同的颜色深度（调色板）：索引颜色和直接颜色。
使用索引意味着图像只能存储图像作者选择的有限数量的颜色（通常为256种），使用直接意味着您可以存储许多颜色数千种颜色尚未由作者选择。
BMP - 无损/索引和直接
这是一种旧格式。 它是无损的（保存时不会丢失图像数据），但也几乎没有压缩，这意味着保存为 BMP 会导致文件大小非常大。 它可以同时具有索引和直接调色板，但这只是一个小小的安慰。 文件大小太大，以至于没有人真正使用这种格式。
适合：没什么。 BMP 没有任何擅长的地方，或者其他格式也没有做得更好的地方。
GIF - 无损/仅索引
GIF 使用无损压缩，这意味着您可以保存一遍又一遍地扫描图像，永远不会丢失任何数据。 文件大小比 BMP 小得多，因为实际上使用了良好的压缩，但它只能存储索引调色板。 这意味着文件中最多只能有 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 透明度。
重要说明： Photoshop 不支持 PNG-8 文件的 Alpha 透明度。 （该死的 Photoshop！）不过，有一些方法可以将 Photoshop PNG-24 转换为 PNG-8 文件，同时保留其透明度。 一种方法是 PNGQuant，另一种方法是使用 烟花。
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 透明度。
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.
With Indexed it means that the image can only store a limited number of colours (usually 256) that are chosen by the image author, with Direct it means that you can store many thousands of colours that have not been 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 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.
Important Note: Photoshop does not support Alpha Transparency for PNG-8 files. (Damn you, Photoshop!) There are ways to convert Photoshop PNG-24 to PNG-8 files while retaining their transparency, though. One method is PNGQuant, another is to save your files with Fireworks.
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 much bigger than JPEGs, GIFs and PNG-8s, 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 the equivalent JPEG image, with very little improvement in visible quality. (Of course, this may be a desirable outcome if you're not concerned about file size, and want to get the best quality image you can.)
Just like PNG-8, PNG-24 supports alpha-transparency, too.
JPEG 用于照片。 我偶尔会看到带有文本的 JPEG 文件，但它们看起来很糟糕。 Text最好是文本，否则使用PNG。
如果它不是照片，但您想要它的图形，请使用 PNG。 PNG 几乎总是比等效的 gif 小，并且不会像 JPEG 文件那样损失质量。 与 JPEG 等效的 PNG 通常要大得多（假设它具有照片级真实感）。 有时这可能仍然是可取的。
PNG 确实允许 8 位透明度，但如果您必须支持 IE，您会发现它们不断拒绝正确支持。 据我所知，它们确实支持 8 位图像中的一位透明度（本质上与 gif 相同）。 还有许多技巧可以让 8 位透明度在 IE 中发挥作用。 我自己从来没有打扰过。
总结：
JPEGs are for photos. I see JPEGs with text in them occasionally and they just look awful. Text is best for text, otherwise use PNG.
If it's not a photo, but you want a graphic of it, use a PNG. A PNG is almost always smaller than the equivalent gif and will not lose quality like a JPEG file. A PNG equivalent of a JPEG will typically be a lot larger (assuming it's photorealistic). There may be times where this is still desirable.
PNG does allow for 8-bits of transparency, but if you have to support IE, you'll find that they continually refuse to support that correctly. They do support a single bit of transparency in an 8-bit image (essentially the same as gif) as far as I know. There are also numerous hacks to get 8-bit transparency to work in IE. I've never bothered, myself.
In summary:
PNG 可用于以下情况：
JPEG 可以在以下情况下使用：
GIF 可在以下情况下使用：
尽管有相反的说法，但 PNG 在所有类似的比较中都优于 GIF。 PNG 能够支持除动画之外的 GIF 的所有图像模式，并且当使用相同的图像模式时，由于其比 LZW 更优越的 DEFLATE 算法，PNG 将具有更好的压缩效果。 PNG 还能够实现 GIF 无法实现的其他模式，例如 24 位颜色和多位透明度（Alpha 透明度）。 请注意，当人们使用 IE6 时，多位透明度曾经是一个问题。
PNG 模式包括（这只是一小部分）
为了获得 Web 版 PNG 的最佳压缩效果，请始终使用调色板模式。 如果您发现 PNG 文件比同等的 GIF 文件大，那么您很可能会以 24 位颜色保存 PNG，并以调色板模式保存 GIF（因为保存全色 GIF 始终需要转换为调色板模式）。 在这两种情况下，请尝试在保存之前将图像转换为调色板模式。
PNG 还具有其他模式，例如调色板中带有 alpha 透明度的调色板颜色。 诸如此类的模式可以在浏览器中使用，但像 Photoshop 这样的软件由于不支持这些图像模式而在创建或使用它们时遇到（或曾经遇到）问题。
PNG can be used when:
JPEG can be used when:
GIF can be used when:
Despite myths to the contrary, PNG outperforms GIF in all like for like comparisons. PNG is capable of every image mode of GIF apart from animation, and when using the same image mode, PNG will have better compression due to its superior DEFLATE algorithm compared to LZW. PNG is also capable of additional modes that GIF cannot do, such as 24 bit color, and multi-bit transparency (alpha transparency). Note that multi-bit transparency used to be a problem back when people used IE6.
PNG modes include (this is just a small subset)
For best compression in PNG for the web, always use a palette mode. If you find PNG files are larger than the equivalent GIF files, then chances are you're saving the PNG in 24 bit color and the GIF in palette mode (because saving a full color GIF always requires translation to palette mode). Try converting the image to palette mode before saving in both cases.
PNG also has other modes such as palette color with alpha transparency in the palette. Modes such as this work in browsers but software like Photoshop have (or once had) problems with creating or working with them due to not supporting those image modes.
如果您要存储或展示大量图像，新的 Google WebP 格式可能值得考虑因为它比 PNG/JPG 小 25%。
请注意，目前并非所有浏览器都支持此功能。
注意。 这是2010年这个问题发布后发布的。
If you are storing or presenting a large number of images the new Google WebP format might be worth considering as it is 25% smaller than PNG/JPG.
Note this is not supported by all browsers at the moment.
NB. This came out in 2010 after this question was posted.
JPEG 文件格式
GIF 文件格式
PNG 文件格式
您可以查看此信息图表以获取更多详细信息，图像文件类型：何时使用 JPEG、GIF 和 JPEG、GIF 等 巴布亚新几内亚
JPEG FILE FORMAT
GIF FILE FORMAT
PNG FILE FORMAT
You can see this infographics for more detailed information, Image File Types: When to use JPEG, GIF & PNG