一、基本概念區分
1、PNG圖片
1). PNG8(布爾透明)
簡單說可以理解爲靜態的GIF
他們都只有256色,也支持索引透明,就是指定一個像素點是不是透明
2). PNG8(Alpha透明)
可指定像素點的透明度,例如50%透明度，比布爾透明高級一點
這種優點在於比PNG24/32體積小,但效果一樣
缺點在於IE6支持不好,會把半透明的像素點顯示成全透明
3). PNG24
是指24位索引圖，有全透明跟半透明以及全不透明的類型，即最多可展示的顏色數量大於1600M，所以它展示的圖片顏色更豐富，更清晰。不過圖片的大小也會相應增加，適用於攝影作品的展示。
PNG24不透明,但是顏色數很多,不止256色, 而Photoshop裏導出的png24其實是png32
4). PNG32
和photoshop的PSD一樣,是Fireworks的默認源文件格式,包含圖層和通道信息
和PNG24的區別在於多了透明信息
PNG32 不僅可以使用更多的顏色，而且還支持透明度設定。屬於 PNG 系列中較常用的一種格式。
缺點在於IE6支持不好,會把透明區域顯示成藍灰底色 : 只能通過影響性能的方法AlphaImageLoader與需要加特殊標籤（VML）。
png8 和 png24的區別
png8與png24的根本區別是存儲方式的不同，那我們如何辨別png8還是png24格式的圖片呢？在ps中，打開圖像—>模式。如果是png8格式的圖片，只有8位/或單通道，而且該通道會自動添加上‘索引’，而png24格式的圖片還有其他的通道可選。
如何區分png8和24
1).在ps裏看圖像—模式，png8當然只有8位/通道了。
2).當打開png8的圖片時，ps會默認給它的圖片標題上加上“索引”兩字，png24的則沒有。
3).文件屬性詳細信息。
2、jpg和jpeg
JPEG的文件格式一般有兩種文件擴展名：.jpg和.jpeg，這兩種擴展名的實質是相同的，我們可以把.jpg的文件改名爲.jpeg，而對文件本身不會有任何影響。嚴格來講，JPEG的文件擴展名應該爲.jpeg，但由於DOS時代的8.3文件名命名原則，PC機使用了.jpg的擴展名，而由於Mac並不限制擴展名的長度，因此當時蘋果機上都使用了.jpeg的後綴名。雖然現在windows也可以支持任意長度的擴展名了，但大家已經習慣了.jpg的叫法，因此也就沒有強制修正。這種情況類似於.htm和.html的區別。
3、gif：
區別與png與jpg以及其他圖像格式的，是gif可以支持動畫，類似於png8的布爾透明類型，只有全透明跟全不透明，沒有半透明，是無損耗的圖像格式。
4、webp：
是谷歌2010年推出的一種旨在加快圖片加載速度的圖片格式，圖片的體積只有jpg的2/3，美中不足的是，webp是一種有損壓縮，而且目前支持這種圖片格式的，只有谷歌以及Opera11.10之後的版本，火狐以及IE暫不支持。並且這種圖片格式的編碼時間是jpg的8倍。因此在使用時也應結合自己的實際情況。
5、base64：
是網絡上最常見的用於傳輸8bit字節碼的編碼方式之一。可用於在http環境下傳遞較長信息，使用base64編碼格式存儲圖片在網頁上傳輸圖片的優缺點如下：
優點：①減少http請求；②某些文件可避免跨域問題；
缺點：①瀏覽器的支持問題（IE6/IE7不支持，但是IE9版本的IE7模式下又是支持的）；②增加css的尺寸；③增加編碼成本。
二、實際運用（前端切圖）
1）色彩豐富的、比較大的圖片切成jpg格式，例如一些網站的banner圖
2）尺寸小的、色彩不豐富的、以及背景透明的切成gif或者png8
3）半透明的圖片切成png24格式
WEBP因爲體積小，正在被大量網站使用。網站加速的內容一半包含了WEBP這種格式，但是寫代碼必須考慮部分不支持webp，比如蘋果系統的Safari瀏覽器就不支持。