示例2

那么是不是只有在存储照片的时候才需要用到JPG呢？我们不妨来看另外一个例子。

下图是最近比较火爆的某微博页面，在这里我们可以选择不同的风格，每种风格都会有一个非常有特色的背景图片。我们尝试用不同图片格式对背景进行保存时可以发现：当用JPG进行保存时（直接背景另存为）文件大小仅36.3K；而用PNG8 256色无仿色去保存时大小增加到57.7K，不仅如此由于颜色的缺失在图像上还出现了一些带锯齿的色块；为了降低这些色块对图像质量的影响我们对PNG8增加了扩散仿色的效果，此时文件大小达到了156.3K；而当采用PNG24完全不失真的保存时文件大小是231.9K。

尽管这幅背景图也是通过photoshop制作，但我们可以发现由于在图像上采用了很多的真实素材（比如白云、蚂蚁、绿叶等），而这些真实素材和摄影图像一样也会存在非常丰富的色彩层次，所以也不适合用PNG格式进行保存。这个时候我们就应该采用JPG格式。

由此我们可以得出结论：对于写实的摄影图像或是颜色层次非常丰富的图像采用JPG的图片格式保存一般能达到最佳的压缩效果。

根据经验我们在页面中使用的商品图片、采用人像或者实物素材制作的广告Banner等图像更适合采用JPG的图片格式保存。

总结

由此可见在存储图像时采用JPG还是PNG主要依据图像上的色彩层次和颜色数量进行选择。一般层次丰富颜色较多的图像采用JPG存储，而颜色简单对比强烈的则需要采用PNG。但也会有一些特殊情况，例如有些图片尽管色彩层次丰富，但由于图像尺寸较小，上面包含的颜色数量有限时，也可以尝试用PNG进行存储。而有些矢量工具绘制的图像由于采用较多的滤镜特效也会形成丰富的色彩层次，这个时候就需要采用JPG进行存储了。

另外还有一个原则就是用于页面结构的基本视觉元素，如容器的背景、按钮、导航的背景等应该尽量用PNG格式进行存储，这样才能更好的保证设计的品质。而其他一些内容元素，如广告Banner、商品图片等对质量要求不是特别苛刻的，则可以用JPG去进行存储从而降低文件大小。

出处：taobaoued
责任编辑：bluehearts

上一页 图片格式与设计 [5] 下一页 图片格式与设计 [7]