今天看了一篇“图片格式与设计那点事儿”的文章，解决了我多年制作网页过程中，什么时候应该使用PNG或JPG的疑惑，觉得总结的很不错，在这里和大家分享下。（PS：以下是引用原文部分段子）

我们在平时工作中也会遇到许多与图片格式相关的问题。比如设计师会奇怪为什么有些页面的产出物总是没法达到设计稿那样的品质和效果，什么样的设计才 更适合Web页面；页面重构师和前端工程师则想知道在切图的时候应采用什么图片格式、如何进行参数设置才能达到品质和性能的最优化。

接下来就为大家讲述在网页制作的实际应用中什么时候应该使用PNG或JPG图片。

什么时候应该使用PNG图片？

• 图像上颜色较少，并且主要以纯色或者平滑的渐变色进行填充。
• 具备较大亮度差异以及强烈对比的简单图像（如“立刻购买”按钮中的背景和文字）。

根据经验具备上述条件的图像一般是使用photoshop或其他软件中的矢量工具进行绘制然后再保存成位图的图像。

什么时候应该使用JPG图片？

• 对于写实的摄影图像或是颜色层次非常丰富的图像采用JPG的图片格式保存一般能达到最佳的压缩效果。

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

总结

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

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

介绍到这里相信大家在网页制作中，什么时候应该使用PNG或JPG图片该有一定的了解了，以上内容只是引用原作者对于什么时候应该使用PNG或JPG的一个总结，并没有详细介绍JPG和PNG各自的压缩算法，有兴趣的朋友可以去详细查看原文，完。