注：在存儲圖像時采用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