在设计网站时,您认为用于特定任务的最佳图像格式是什么？
在尝试找出用于特定任务的格式时,我总是发现自己处于两难境地......例如,我应该全面使用.jpg吗？ 或者,何时以及为什么要使用.png？
例如,在亚马逊网站上,他们使用.jpg作为产品图片(例如),.gif用于此透明像素(示例)和.png用于其CSS Sprites(示例)
另一方面,Play.com使用.gif作为他们的网站徽标(示例),但使用.jpg作为他们的网站产品(如亚马逊)(示例),并且就他们的主页而言,他们没有任何.png在它上面.
那么我应该为我的网站使用哪些格式？我为什么要用它们？
[UPDATE]
感谢CruellO提供了解释差异的链接,也感谢Dustin提供了使用内容的理由.
你应该知道一些关键因素......
首先,有两种类型的压缩:无损和有损.
无损意味着图像变小,但不会对质量造成损害.有损意味着图像(甚至)变小,但对质量有害.如果您一次又一次地以有损格式保存图像,图像质量会越来越差.
还有不同的颜色深度(调色板):索引颜色和直接颜色.
使用Indexed意味着图像只能存储图像作者选择的有限数量的颜色(通常为256),而Direct表示您可以存储数千种作者未选择的颜色.
BMP - 无损/索引和直接
这是一种旧格式.它是无损的(保存时没有图像数据丢失),但也几乎没有压缩,这意味着保存为BMP导致非常大的文件大小.它可以包含Indexed和Direct的调色板,但这是一个小小的安慰.文件大小非常大,以至于没有人真正使用过这种格式.
适合:真的没有.没有任何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 Transparency.
重要说明: 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大得多,所以你仍然需要考虑是否真的想要使用它.
尽管PNG-24在压缩时允许数千种颜色,但它们并不是要取代JPEG图像.保存为PNG-24的照片可能至少比同等JPEG图像大5倍,可见光质量几乎没有改善.(当然,如果您不关心文件大小,并希望获得最佳质量的图像,这可能是一个理想的结果.)
就像PNG-8一样,PNG-24也支持alpha透明度.
我希望有所帮助!
JPEG用于照片.我偶尔看到带有文字的JPEG,看起来很糟糕.文本最适合文本,否则使用PNG.
如果它不是照片,但你需要它的图形,请使用PNG.PNG几乎总是小于等效的gif,并且不会像JPEG文件一样丢失质量.相当于JPEG的PNG通常会大得多(假设它是真实的).有时候这仍然是可取的.
PNG确实允许8位透明度,但如果你必须支持IE,你会发现他们不断拒绝正确支持.据我所知,它们确实支持8位图像中的单个透明度(基本上与gif相同).还有许多黑客可以在IE中使用8位透明度.我自己从未打扰过.
综上所述:
照片→jpg
!照片→png
在以下情况下应使用PNG:
您需要透明度(1位或Alpha透明度)
无损压缩效果很好(例如图表或徽标,或计算机生成的图像)
在以下情况下应使用JPEG:
无损压缩效果不佳(例如照片)
需要全彩色
GIF应该在以下时间:
PNG不可用,例如在非常旧的软件或浏览器上
动画是必要的
尽管有相反的神话,但PNG在大多数方面都优于GIF.除了动画之外,PNG能够实现GIF的每种图像模式,并且当使用相同的图像模式时,由于其优于DEZATE算法,与LZW相比,PNG将具有更好的压缩.PNG还具有GIF无法执行的其他模式,例如24位颜色和Alpha透明度,但这是您可能在网络上遇到问题的地方.Alpha透明度与IE6的兼容性问题已得到充分记录(尽管存在黑客攻击).
PNG模式包括(这只是一小部分)
调色板颜色为2至256色(如GIF)
调色板颜色为2至256色,透明色(如GIF)
真彩色(24位色)
带alpha通道的真彩色(24位色+ 8位Alpha透明度)
要在Web上使用PNG进行最佳压缩,请始终使用调色板模式.如果您发现PNG文件大于等效的GIF文件,那么您将以24位颜色保存PNG并在调色板模式下保存GIF(因为GIF始终处于调色板模式).首先尝试转换为调色板模式.
如果您发现在GIF文件中IE6中具有透明度的PNG文件无法正常工作,那么您在PNG和调色板模式下使用24位颜色+ Alpha透明度,并使用带GIF的透明颜色.您必须确保将PNG转换为具有透明色的调色板颜色模式.
PNG还有其他模式,例如调色板中具有Alpha透明度的调色板颜色.这样的模式不能在Photoshop中使用.
京公网安备 11010802040832号 | 京ICP备19059560号-6 