很久以前，有强大的GIF图像格式，这是最受欢迎的web图像压缩类型。然后，它宣布使用GIF的软件程序需要许可证(这是因为Unisys公司在GIF中使用的LZW压缩方法的专利)。这一改变加快了它的继承者:PNG格式的开发。
PNG代表便携式网络图形如今，它可能是网页设计中最常用的图像格式，仅次于JPEG。在本指南中，我们将涵盖所有你，作为一个网页设计师，需要知道的关于PNG图像格式。
了解数码影像格式
有许多数字图像格式可供你使用，但只有一些是优化的网页使用。例如，TIFF图像格式不是为网页使用而设计的;它是用来印刷的。网页图像格式的例子有JPEG、PNG、GIF和SVG。
为什么某些图片格式适合于网络，而另一些则不适合?因为网页上的图片必须经过优化和高度压缩，这样它们才不会变得太大。一些数字图像格式，尤其是那些为打印而设计的格式(如TIFF)，在分辨率、元数据和色彩丰富度上都是不必要的高——这些在计算机显示器上观看时都变得无关紧要——以至于它们的文件尺寸对于网络使用来说太大了。
压缩方法
图像压缩一般有两种方法:有损压缩和无损压缩。有损压缩是指使用的压缩算法导致一些数据丢失。这意味着，如果您尝试解压它，将不会得到与原始图像完全相同的图像。
在大多数情况下，数据丢失的处理方式不会让质量损失太多;至少不会引起人们的注意。另一方面，无损压缩是有损的对立面。无损压缩涉及到压缩算法，当解压时，会得到与原始图像完全相同的图像。
无损压缩的一个例子是使用ZIP格式对文档进行压缩。当您解压文件时，它将与原件相同。PNG采用无损压缩算法。
另一方面，JPEG使用有损压缩算法。这本质上意味着，通过使用JPEG保存原始图像，您可能会看到一些质量损失(在某些情况下PNG也是如此，稍后您将看到)。
关于PNG的一些技术问题
除了使用无损压缩，PNG是一种位图图像格式，这意味着它是一种栅格图像格式。如果你跳过了设计101，光栅图像，不像矢量图像格式，如SVG，不能在不损失质量的情况下重新缩放。然而，对于像照片这样的复杂图像，栅格图像比矢量图像更好。
PNG是为了在网络上快速传输图像和在电脑屏幕上显示图像而设计的，所以它只使用RGB颜色模型。CMYK颜色模型，通常用于打印目的，在PNG格式保存图像时是不可用的。简而言之:PNG图像格式对于将要打印的图形来说不是最佳的。
PNG-8和PNG-24
有两种PNG格式:PNG-8和PNG-24。这些数字是“8位PNG”或“24位PNG”的缩写。不要在技术上讲太多——因为作为一个网页设计师，你可能并不关心——8位png意味着图像是每像素8位，而24位png意味着每像素24位。简单地说，PNG-24可以处理更多的颜色，适合具有大量颜色的复杂图像，如照片(就像JPEG)，而PNG-8更适合具有简单颜色的内容，如徽标和图标和按钮等用户界面元素。另一个区别是PNG-24本身支持alpha透明，这对透明背景很好。
这种差异是不100%正确，因为Adobe产品除了网络命令允许带有alpha透明度的PNG-8．
简短的故事:何时使用png格式
当您需要保持透明度和大量的颜色，以及实现完全或部分透明度时，PNG图像格式是最好的。由于它是无损格式，使用PNG格式保存的图像不会一直都很小，但由于PNG存储了大量额外的数据，您可以轻松地保存它优化图片用于web使用，以减少文件大小。
PNG、GIF、JPEG
让我们比较一下使用PNG和其他两种流行的网络图像格式的优缺点。
PNG和GIF
简短的回答:总是使用PNG而不是GIF，除非你要制作一个动画GIF，或者当你想在旧版本的IE上使用透明背景的图像(然而，有一个解决方案来支持PNG透明在IE6和以下，使用JavaScript PNG修复库)．我不是唯一一个这样做的人，StackOverflow和Coding Horror博客的创始人Jeff Atwood，会同意．PNG比GIF有一些重要的优势，这是网页设计师所关心的，例如:
- 比GIF更好的压缩，一个差异可以意味着高达25%的文件大小
- 不需要许可证
- 这是一个打开的文件格式由W3C维护
- 完全无损压缩
- 真正的alpha透明在支持alpha透明的web浏览器上，这是大多数浏览器所不支持的旧版本的ie浏览器
当然，还有很多其他的优点，但这些对网页设计师来说才是最重要的。这里是PNG和GIF的视觉对比。注意，对于下面的示例图片，您不会使用PNG-24，因为它的颜色很简单，而且重量也比GIF大。
然而，PNG比GIF的概念仍然成立:如果你保存了一张照片(比如你父母的照片)，PNG-24会比GIF有更好的结果。
 |
 |
 |
| PNG-8文件大小:3.73 KB | PNG-24文件大小:5.68 KB | GIF文件大小:4.20 KB |
优化建议:有很多工具你可以使用优化你的图片．下面,我用pngcrush为PNG图像和Smush。它用于GIF图像。
没有明显的质量下降，PNG-8仍然胜过GIF。
 |
 |
 |
| PNG-8文件大小:3.69 KB | PNG-24文件大小:5.41 KB | GIF文件大小:3.71 KB |
PNG和JPEG
当我们谈论照片图像时，JPEG的文件大小比png更小。这是因为它使用了一种有损压缩算法，专门为摄影、色彩丰富的图像设计。所以对于网络使用来说，如果你要在网页上放一张照片(比如你的猫的照片)，一定要选择JPEG而不是PNG。
在这种情况下，使用PNG而不是JPEG会导致文件更大(通常是JPEG的5-10倍)。这里是使用图片的PNG和JPEG(质量:70)的对比。请注意，我们使用的是PNG-24，而不是PNG-8，因为它是摄影图像的合适格式。
 |
 |
| PNG-24文件大小:66.6 KB | JPEG文件大小:14.41 KB |
进一步优化pngcrush和Smush.it:
 |
 |
| PNG-24文件大小:64 KB | JPEG文件大小:14.2 KB |
优化建议:你(作为网页设计师)会批评你的图片，而不是你的网站用户，所以一个好的建议是在保存你的网页图片时要更“残忍”一点。
在文件大小和质量之间找到一个好的平衡。降低您的质量设置，直到它变得难以忍受。
何时使用每种格式
以下是对文件格式比较的简单总结:
- 使用PNG-8在GIF的图片简单的颜色(商标、图标、按钮)
- 使用PNG-8在JPEG的图片简单的颜色(商标、图标、按钮)
- 使用PNG-24在GIF为照片
- 使用PNG在JPEG当使用alpha透明度
- 使用JPEG在PNG为照片
- 使用GIF为背景旧浏览器的透明度(IE6和下面)
- 使用GIF为动画gif
PNG-8颜色还原优化
当选择PNG-8图像格式时，您可能会看到图像中颜色的数量减少。这就是为什么它适用于简单的美术作品，如徽标、图标和UI元素(如按钮)。在调色板有限的情况下选择PNG-8。
这将帮助您实现一个更小的图像文件大小没有任何可见的差异，让您建立更快，更精简和响应性更强的网页设计。您可以执行的一个优化技巧是减少PNG图像的颜色数量。这将大大减少它的文件大小，而且你可以做到几乎没有明显的质量损失。
大多数可以保存PNG文件的软件应用程序都可以允许你手动输入要包含的颜色的数量。例如,ps的保存到Web和设备这个功能(你可以通过File > Save for Web & Devices)提供了一个下拉菜单来设置PNG格式的颜色数量。减少颜色的数量，直到你看到明显的质量差异。
下面，你可以看到我们之前使用的RSS图标的优化，通过减少颜色的数量。将颜色的数量从256减少到16会导致非常明显的质量损失，并导致文件大小减少62% -超过一半的文件大小被削掉了!
 |
 |
 |
 |
| PNG-8 256种颜色文件大小:3.73 KB | PNG-8 64种颜色文件大小:2.18 KB | PNG-8 32个颜色文件大小:1.75 KB | PNG-8 16个颜色文件大小:1.41 KB |
PNG-24多色调分色法优化
这种优化技术可以帮助你优化PNG-24格式，这是它的工作原理:它通过组合相似的颜色来减少颜色的数量。在Photoshop中，你可以这样做优化技巧:在Photoshop中打开图像。选择图像>调整>色调分离，然后降低色阶，直到它导致可见的质量损失。
然后使用Save for the Web & Devices功能将图像保存为PNG-24格式。
 |
 |
| PNG-24原始文件大小:29.5 KB | PNG-24特里文件大小:23.9 KB |
总结
对于网页设计师来说，减小图片尺寸的重要性是提高网页整体速度的一种方法。网页设计中优化的小图片意味着:
- 更快的网页加载更快
- 更少的带宽消耗
- 更少的数据需要传输给站点访问者，这意味着更低的数据活动
你可能想知道PNG是否是最好的图像格式——这是一个不可避免的问题。答案是:这取决于．如本指南所示，有许多变量将影响您选择的图像格式。
某些情况下，PNG-8会比PNG-24更好，而其他情况下，使用JPEG会产生更好的结果。PNG比GIF有一定的优势，比如文件大小更小，是一种开放的格式。然而，PNG的透明度在IE6不支持，所以你可能不得不使用gif(或JavaScript库，在IE6中模拟PNG alpha透明度，如IE PNG修复)．
同样的道理也适用于处理动画图像，gif可以做到这一点。关于PNG和JPEG:选择很大程度上取决于你要优化的图像类型。具体来说，PNG在有限的配色方案、纯色和支持透明度(JPEG不支持)方面做得非常好。
对于复杂的图片，JPEG是最好的选择。这里需要注意的主要事情是，您应该使用图像格式的组合。你不应该严格使用PNG、JPEG或GIF。
此外，您不应该害怕手动优化每个图像，以便您可以获得更好的结果和更小的文件大小。您应该始终使用图像优化器，它将挤出每一个多余的字节。有两件事可以帮助你选择正确的格式:实验和经验。
你在网页上保存的图片越多，你就能越快地识别出哪些情况下应该使用PNG, JPEG，甚至GIF。
引用和资源
- 维基百科:便携式网络图形
- 编写恐怖代码:充分利用PNG
- 8个优化你的图像的优秀工具
- 为Web保存图像的全面指南
- 维基百科:pngcrush
- 截图:JPEG vs. GIF(vs . PNG)
- 编码恐怖:渐进图像渲染
- 高级PNG优化器
- 优化映像——谷歌性能最佳实践
- 5个最佳图像编辑软件
- 15开发更快网页的工具
