注：在存储图像时采用JPG还是PNG主要依据图像上的色彩层次和颜色数量进行选择
一、.jpg/jpeg格式的图片(jpg全名：jpeg)
JPG（或是JPEG）：
优点：
（1）占用内存小，网页加载速度快
（2）主要用于摄影作品或者写实作品（或者其他细节、色彩丰富的图片）或大的背景图；对多色彩表现较好，不适于文字较多的图片。根据我们在页面中使用的商品图片、采用人像或者实物素材制作的广告banner等图像更适合采用jpg的图片格式保存
缺点：
jpg格式图片是有损压缩的图片，有损压缩会使原图片数据质量下降，即jpg会在压缩图片时降低图片品质。
二、PNG格式的图片
.png：
优点：
（1）png格式图片是无损压缩的图片，能在保证最不失真的情况下尽可能压缩图像文件的大小。
（2）图片质量高；色彩表现好；支持透明效果；提供锋利的线条和边缘，所以做出的logo等小图标效果会更好；更好地展示文字、颜色相近的图片。
（3）PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，并且还可存储多到16位的α通道数据。
(4) 所含颜色很少、具有大块颜色相近的区域或亮度差异十分明显的较简单的图片则需要采用PNG。但也会有一些特殊情况，例如有些图像尽管色彩层次丰富，但由于图片尺寸较小，上面包含的颜色数量有限时，也可以尝试用PNG进行存储。而有些矢量工具绘制的图像由于采用较多的滤镜特效也会形成丰富的色彩层次，这个时候就需要采用JPG进行存储了。主要用于小图标或颜色简单对比强烈的小的背景图。根据经验用于页面结构的基本视觉元素，如容器的背景、按钮、导航的背景等应该尽量用PNG格式进行存储，这样才能更好的保证设计品质。
缺点：
（1）占内存大,会导致网页加载速度慢;
（2）对于需要高保真的较复杂的图像，PNG虽然能无损压缩，但图片文件较大，不适合应用在Web页面上。
实践中的示例图：
原文链接：https://blog.csdn.net/qq_30541261/article/details/70154282