png、jpg、webp和gif是市面上最常使用的三種圖片格式。在介紹它們的區別之前,先讓我來簡單介紹下圖片的基礎知識。
圖片是由很多像素點組成的,每個像素點只能保存一種顏色。如果說一個圖片格式是8位的,就說明這個像素點可以表示2的8次方種顏色,即256種顏色。所以圖片格式的位數越多,一個像素點能表示的顏色數越多,圖片就越豐富。
Alpha透明通道:一個8位的灰度通道,該通道用256級灰度來記錄圖像中的透明度信息,定義透明、不透明和半透明區域,其中黑表示透明,白表示不透明,灰表示半透明。
下面,我分別對png、jpg、webp和gif圖片從像素點位數、是否支持透明通道、是有損壓縮還是無損壓縮、知否支持動態圖四個維度進行說明。
PNG
png有PNG8、PNG24、PNG32三種格式。PNG8表示圖片的每個像素點是8位。PNG24表示圖片的每個像素點是24位。PNG32表示圖片的每個像素點是32位。所以,PNG32比PNG8能表示的顏色數量更多。
png支持透明通道。
PNG8有1位的布爾透明通道(要么完全透明,要么完全不透明)。PNG24用的就是Alpha透明通道,就是有8位(256階)的布爾透明通道(所謂半透明),它有1600萬種顏色。
png是無損壓縮。Android之所以用png格式圖片,就是為了不同手機的適配,如果用jpg的話,對於高分辨率手機,可能圖片會虛。
雖然png是無損壓縮。但是也有一些網站可以對png圖片進行有損壓縮,比如tinypng網站。正如tinypng官網上介紹的:
When you upload a PNG (Portable Network Graphics) file, similar colors in your image are combined. This technique is called “quantization”. By reducing the number of colors, 24-bit PNG files can be converted to much smaller 8-bit indexed color images. All unnecessary metadata is stripped too. The result: better PNG files with 100% support for transparency.
它的原理是把相似像素的24bit位用8bit位來表示,並且移除了不必要的元數據,是有損壓縮,不過肉眼很難看出來。
png不支持動態圖。
JPG
jpg又叫jpeg,兩者是完全相同的壓縮算法。之所以有兩個名字,是因為很久之前的Windows系統僅支持擴展名為三位的文件,所以將jpeg格式簡寫成jpg來供Windows系統識別。當然,現在的Windows系統已經可以支持擴展名為多位數的文件了,但是由於歷史原因導致的jpg就延續到至今了。
jpg是24位的。
jpg不支持透明通道。
jpg是有損壓縮。每次保存都會有數據損失, 所以盡量不要多次保存。不然圖像會失真。
jpg不支持動態圖。
WebP
WebP是Google發明的一種圖片格式。在達到圖片同樣效果的情況下,WebP格式的圖片體積更小。
WebP剛出現時是不支持透明通道的,后來Google讓WebP支持了透明通道。
WebP有無損壓縮和有損壓縮兩種,壓縮比例大。
WebP支持動態圖。
GIF
gif是8位的。
gif支持透明度。
gif是有損壓縮,反復保存gif,圖片質量會逐漸變低。
gif可以保存多個圖層,所以支持動態圖。