logo标签列表

在网站中使用PNG图片

imagepng
14

在网站上使用PNG图片是否可行？我并没有看到它们被广泛使用，所以想知道它们的缺点是什么。肯定有一些问题，否则大家一定会一直使用它们吧？...

例如，它们是否符合MSIE和Chrome等标准...

8个回答
13

如果您在PNG图像中使用滤镜，IE 6将仅呈现类似于GIF的透明度。
有关更多详细信息，请参见此处

除此之外，它们工作得很好，并且现在越来越受欢迎。

2
即使这是可以解决的：http://www.twinhelix.com/css/iepngfix/（虽然他们只声称接近本地）。 - ehdv
7
以下是一些Fortune 500公司网站在其首页上实现PNG的例子：
- microsoft.com - apple.com - google.com（Google标志是PNG格式） - hp.com（它们实际上使用了twinhelix的IEPNGFIX和透明PNG） 实际上，我只找到一个没有使用PNG的（我只看了大约10个），那就是Siemens.com。
4

现在它们可以很好地使用。旧版本的IE（6.0及更早版本）不支持全部的透明模式，这是人们避免使用该格式的最大原因。其他浏览器如Firefox、Chrome、Opera、Konqueror或Links没有这样的问题。

3

可以使用png图片，但有一些需要注意的事项。

  • Internet Explorer 6不支持透明度。如一些评论所指出，您可以使用过滤器来解决此问题。然而，在相对容器上使用它或尝试使用背景重复时可能会出现某些问题。个人使用没有这些问题的vml实现。

  • 通常不建议将png图像与其他图像类型（如jpeg）混合使用（即重叠）。即使它们具有相同的背景颜色，IE也可能会显示它们略有不同，因此它们不太能很好地融合在一起。

  • Mac OS X使用存储的伽马校正渲染png图像。您可能需要删除它。我使用pngcrush。

  • 一些浏览器上，嵌套的半透明表面可能会非常缓慢。

2

如今，PNG文件成为标准，特别是因为PNG是专门为Web设计的开放格式。W3C建议在网站中使用PNG，因为使用PNG处理图形、徽标等将会产生更紧凑的文件。PNG是一种无损压缩格式。

虽然PNG是唯一允许您使用透明度的格式，但对于较大的图片，您可能希望使用JPG（这是一种主要是有损压缩格式）。

而且，你猜怎么着？即使是谷歌也在使用一个png图像作为其奥林匹克标志。

GIF 也允许透明度。 - awesomo
2
PNG是唯一适用于Web的格式，可以实现真正的Alpha透明度，而GIF只能指定单个透明颜色。 - erjiang
2

PNG文件在IT技术中非常常见，几乎没有不使用PNG文件的网站。同时，PNG文件也不会有太多问题，唯一需要注意的是IE6浏览器的兼容性问题，但这个问题有两种解决方案：

  • 使用DirectX滤镜。只需要在谷歌上搜索一下，就可以找到很多相关信息。它可以不对PNG文件进行任何修改即可解决兼容性问题，但需要注意的是：透明区域的点击事件会被穿透；同时，不能和其他背景图片混合使用。
  • 设置PNG的背景颜色。这种方式不需要在网页中进行任何特殊编码，但并不总是适用。PNG文件可以指定一个默认的“背景”颜色，并且IE6浏览器会自动套用这个颜色。由于PNG文件通常显示在一个纯色或近乎纯色的背景上，这种方式效果非常好。可以使用TweakPNG工具来设置背景颜色。
2

别忘了，Stack Overflow 的标志是PNG格式，这也是使用它的另一个原因！

1

PNG是一种更多用途的网页图形格式，具有优秀的alpha透明度以及良好的压缩和无专有限制（GIF曾经因为Compuserve声称对所使用的压缩格式拥有所有权而成为了一个长期IP权利案件的主题）。

然而，它们的普遍使用还没有定论。它们似乎特别适合小型的标志和图标，但是对于大型详细图像而言，GIF的文件大小基本相当，JPEG仍然具有最佳的整体文件大小与质量比率（这对网站的加载时间可能会有很大的影响）。

PNG正在作为一种格式获得推广，你可以预见到在你看到的任何地方都会越来越多地使用它。仅凭alpha透明度功能，PNG就成为了一种有用的格式，用于有趣的界面元素，如覆盖和剖面图。

如果大的GIF图像所占用的字节数比PNG还要少，那么你必须是在使用劣质的PNG软件（比如Photoshop）或者使用的是PNG24而不是PNG8。PNG压缩严格上讲是更优秀的，而且图片越大，它的优势就越明显。可以尝试一些PNG优化器，比如ImageOptim或TinyPNG。 - Kornel
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接