png8,png24,jpg,jpeg,gif,webp 圖片格式區別

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).文件屬性詳細信息。

二、jpg和jpeg

JPEG的文件格式通常有兩種文件擴展名：.jpg和.jpeg，這兩種擴展名的實質是相同的，咱們能夠把.jpg的文件更名爲.jpeg，而對文件自己不會有任何影響。嚴格來說，JPEG的文件擴展名應該爲.jpeg，但因爲DOS時代的8.3文件名命名原則，PC機使用了.jpg的擴展名，而因爲Mac並不限制擴展名的長度，所以當時蘋果機上都使用了.jpeg的後綴名。雖然如今windows也能夠支持任意長度的擴展名了，但你們已經習慣了.jpg的叫法，所以也就沒有強制修正。這種狀況相似於.htm和.html的區別。

三、gif：
區別與png與jpg以及其餘圖像格式的，是gif能夠支持動畫，相似於png8的布爾透明類型，只有全透明跟全不透明，沒有半透明，是無損耗的圖像格式。

四、webp：
是谷歌2010年推出的一種旨在加快圖片加載速度的圖片格式，圖片的體積只有jpg的2/3，美中不足的是，webp是一種有損壓縮，並且目前支持這種圖片格式的，只有谷歌以及Opera11.10以後的版本，火狐以及IE暫不支持。而且這種圖片格式的編碼時間是jpg的8倍。所以在使用時也應結合本身的實際狀況。

五、base64：
是網絡上最多見的用於傳輸8bit字節碼的編碼方式之一。可用於在http環境下傳遞較長信息，使用base64編碼格式存儲圖片在網頁上傳輸圖片的優缺點以下：

優勢：①減小http請求；②某些文件可避免跨域問題；

缺點：①瀏覽器的支持問題（IE6/IE7不支持，可是IE9版本的IE7模式下又是支持的）；②增長css的尺寸；③增長編碼成本。

2、實際運用（前端切圖）

1）色彩豐富的、比較大的圖片切成jpg格式，例如一些網站的banner圖

2）尺寸小的、色彩不豐富的、以及背景透明的切成gif或者png8

3）半透明的圖片切成png24格式

WEBP由於體積小，正在被大量網站使用。網站加速的內容一半包含了WEBP這種格式，可是寫代碼必須考慮部分不支持webp，好比蘋果系統的Safari瀏覽器就不支持。

https://java-er.com/blog/png8-png24-jpg-jpeg-gif-webp/