jpg、jpeg、gif、webp、png24、png8等圖片格式有什么區別

一、基本概念區分

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瀏覽器就不支持。