网站图片格式：为正确的任务select正确的格式
在devise一个网站时，你认为什么是最好的图像格式用于特定的任务？
当我试图弄清楚某个特定任务需要使用哪种格式时，我总是觉得自己处于一个两难的境地……例如， 我应该全程使用.jpg吗？ 或者， 为什么我应该使用.png？
例如，在亚马逊的网站上，他们使用.jpg作为产品图片（ 例子 ） ，.gif用于这个透明像素（ Example ） ，.png用于他们的CSS Sprites（ 例子 ）
另一方面， Play.com使用一个.gif作为他们的网站标志（ 例子 ），但是使用.jpg作为他们的网站产品（例如Amazon）（ 例子 ），并且就他们的主页去说，他们没有任何.png在这上面。
那么，我应该使用什么格式的网站？ 为什么要使用它们？
[UPDATE]
感谢CruellO 这个链接来解释差异，还有达斯汀给出了使用的理由。
JPEG是用于照片的。 我偶尔会看到带有文字的JPEG，而且看起来很糟糕。 文字最适合文字，否则使用PNG。
如果它不是一张照片，但你想要一个图片，使用PNG。 PNG几乎总是比同等的gif小，不会像JPEG文件一样丢失质量。 一个JPEG的PNG等价物通常会大得多（假设它是照片真实的）。 可能有时候这仍然是可取的。
PNG允许8位透明度，但是如果你必须支持IE浏览器，你会发现他们不断地拒绝正确的支持。 就我所知，它们确实支持8位图像（基本上与gif相同）中的一点透明度。 在IE中也有很多黑客可以获得8位透明度。 我从来没有打扰过，我自己。
综上所述：
- 照片→jpg
- ！照片→png
你应该知道一些关键因素…
首先，有两种types的压缩： 无损和有损 。
无损意味着图像变小，但不影响质量。 有损意味着图像被制造（甚至）更小，但是损害质量。 如果您一次又一次地以有损格式保存图像，则图像质量会越来越差。
也有不同的颜色深度（调色板）： 索引颜色和直接颜色 。
使用索引 ，意味着图像只能存储由图像作者select的有限数量的颜色（通常为256），而使用Direct则意味着可以存储数千种作者未select的颜色。
BMP – 无损/索引和直接
这是一个旧的格式。 它是无损的（保存时没有图像数据丢失），但是也几乎没有任何压缩，这意味着将BMP保存为非常大的文件大小。 它可以有索引和直接的调色板，但这是一个小小的安慰。 文件大小是如此之大，以至于没有人真的使用过这种格式。
好：没什么。 没有任何BMP擅长或者没有其他格式做得更好。
GIF – 无损/仅索引
GIF使用无损压缩，这意味着您可以反复保存图像，永不丢失任何数据。 文件大小比BMP小得多，因为实际使用的是良好的压缩，但它只能存储一个Indexed调色板。 这意味着文件中最多只能有256种不同的颜色。 这听起来像是一个很小的数字，而且是。
GIF图像也可以是animation和透明度。
适用于：标志，线条图和其他简单的图片，需要很小。 只有真正用于网站。
JPEG – 有损/直接
JPEG图像被devise成通过去除人眼不会注意到的信息来尽可能小地制作详细的照片图像。 因此，这是一种有损耗的格式，反复保存相同的文件会导致更多的数据随着时间stream逝而丢失。 它具有上千种颜色的调色板，对于照片来说非常适合，但是有损压缩意味着对于徽标和线条图不利：不仅它们看起来模糊，而且与GIF相比，这样的图像也将具有更大的文件尺寸！
适合：照片。 另外，渐变。
PNG-8 – 无损/索引
PNG是一种较新的格式，而PNG-8（PNG的索引版本）确实是GIF的一个很好的替代品。 然而令人遗憾的是，它有一些缺点：首先它不能支持像GIF那样的animation（好吧它可以，但只有Firefox似乎支持它，不像每个浏览器支持的GIFanimation）。 其次它与IE6等旧浏览器有一些支持问题。 第三，像Photoshop这样重要的软件格式的实现很差。 （该死的，Adobe！）PNG-8只能存储256种颜色，比如GIF。
好处：PNG-8比GIF更好的主要是支持Alpha透明度。
重要说明： Photoshop不支持PNG-8文件的Alpha透明度。 （该死的你，Photoshop！）虽然有办法将Photoshop PNG-24转换成PNG-8文件，同时保留它们的透明度。 一种方法是PNGQuant ，另一种是使用Fireworks保存文件。
PNG-24 – 无损/直接
PNG-24是一种将无损编码和直接颜色（数千种颜色，如JPEG）结合在一起的优秀格式。 在这方面，它非常像BMP，除了PNG实际上是压缩图像，所以会产生更小的文件。 不幸的是，PNG-24文件仍然比JPEG，GIF和PNG-8大得多，所以你仍然需要考虑是否真的想要使用它。
尽pipePNG-24在压缩的同时允许数千种颜色，但并不是要取代JPEG图像。 保存为PNG-24的照片可能至less比同等JPEG图像大5倍，可见质量的改善很小。 （当然，如果您不关心文件大小，并希望获得最佳质量的图像，这可能是一个理想的结果。）
就像PNG-8一样，PNG-24也支持alpha透明。
我希望有帮助！
在以下情况下应该使用PNG ：
- 您需要透明度（1位或Alpha透明度）
- 无损压缩可以很好地工作（如图表或徽标，或计算机生成的图像）
在下列情况下应该使用JPEG ：
- 无损压缩将无法正常工作（如照片）
- 全彩色是必要的
GIF应该是：
- PNG不可用，例如在非常旧的软件或浏览器上
- animation是必要的
尽pipe神话相反，PNG在大多数方面都优于GIF。 除了animation之外，PNG能够实现GIF的每一种图像模式，并且当使用相同的图像模式时，与LZW相比，由于其优越的DEFLATEalgorithm，PNG将具有更好的压缩。 PNG还可以使用GIF无法实现的其他模式，例如24位色彩和alpha透明度，但这也是您可能遇到的networking问题。 Alpha透明与IE6的兼容性问题已经被很好的logging（尽pipe黑客存在）。
PNG模式包括（这只是一个小子集）
- 2至256色的调色板颜色（如GIF）
- 调色板颜色2至256色，透明色（如GIF）
- 真彩色（24位彩色）
- 真正的颜色与阿尔法通道（24位颜色+ 8位阿尔法透明度）
为了在网页中实现最佳的PNG压缩效果，请始终使用调色板模式。 如果您发现PNG文件大于等效的GIF文件，那么您将以24位色彩保存PNG，在调色板模式下保存GIF（因为GIF始终处于调色板模式）。 尝试先转换到调色板模式。
如果在GIF文件中发现带有透明度的PNG文件在IE6中无法正常工作，则在PNG和调色板模式下使用24位颜色+ Alpha透明度，并使用带有GIF的透明颜色。 您将必须确保您将PNG转换为具有透明颜色的调色板颜色模式。
PNG也有其他的模式，如调色板中的透明度调色板。 像这样的模式不能在Photoshop中使用。
尝试看看这个网站http://www.killersites.com/articles_2005/theory/imagesInWebPages.jsp
他们试图解释什么时候使用
JPEG文件格式
- 非常适合需要保持小尺寸的图像
- 照片的好select
- 不好的标志，线条艺术，和广泛的平面颜色领域
GIF文件格式
- 伟大的animation效果
- 剪贴画，平面graphics和使用最less颜色和精确线条的图像的不错select
- 简单的标志与颜色块的好select
PNG文件格式
- 无损
- 当透明度是必须的时候，这是最好的选
- 标志和线条艺术的好select
- 不支持任何地方
你可以看到这个图表更详细的信息， 图像文件types：什么时候使用JPEG，GIF和PNG
如果您要存储或呈现大量图片，则可能需要考虑新的Google WebP格式，因为它比PNG / JPG小25％。 请注意，目前所有浏览器都不支持此function。 NB。 这个问题发布后，这个在2010年出来。
