乾貨!網頁設計圖片格式PNG,JPG,GIF的選擇

乾貨!網頁設計圖片格式PNG,JPG,GIF的選擇

網頁設計圖片格式PNG,JPG,GIF的選擇 GIF優點:

GIF最突出的地方就是他支持動畫,同時GIF也是一種無損的圖片格式,也就是說你在修改圖片之後,圖片質量並沒有損失.再者GIF支持半透明(全透明或是全不透明).

根據Google的說法:

GIF適用於很小或是較簡單的圖片(10×10以下或是3種顏色以下的圖片). 缺點 不支持透明,如果圖片顏色很多種,特別是有紅色的時候,儘量少用gif 不然會失真

PNG優點: PNG包括了PNG-8跟真彩色-PNG(PNG-24 or PNG-32).那PNG相對於GIF最大的優勢是: ①通常體積會更小 ②支持alpha(全透明) ③但是我們知道PNG是不支持動畫的 ④同時需要留意IE6是可以支持PNG-8的 但是在處理PNG-24的透明時會顯示會灰色.相關例子可以參考sitepoint. ⑤,通常圖片保存為PNG-8會在同等質量下獲得比GIF更小的體積,而全透明的圖片我們現在只能使用PNG-24.但是請留意在保存圖片在PNG-8與GIF中進行比較.因為定律並不一直正確.

JPG優點: JPG所能顯示的顏色比GIF,PNG要多的多,同時得到很好的壓縮,所以JPG很適用於保存數碼照片.但是注意它是一種失真壓縮,這意味著你每次修改圖片都會造成像素失真.

具體說法

有損vs無損

圖片文件格式有可能會對圖片的文件大小進行不同程度的壓縮,圖片的壓縮分為有損壓縮和無損壓縮兩種。

有損壓縮。指在壓縮文件大小的過程中,損失了一部分圖片的信息,也即降低了圖片的質量,並且這種損失是不可逆的,我們不可能從有一個有損壓縮過的圖片中恢復出全來的圖片。常見的有損壓縮手段,是按照一定的算法將臨近的像素點進行合併。

無損壓縮。只在壓縮文件大小的過程中,圖片的質量沒有任何損耗。我們任何時候都可以從無損壓縮過的圖片中恢復出原來的信息。

GIF是無損的,採用GIF格式保存圖片不會降低圖片質量。但得益於數據的壓縮,GIF格式的圖片,其文件大小要遠小於BMP格式的圖片。文件小,是GIF格式的優點,同時,GIF格式還具有支持動畫以及透明的優點。但,GIF格式僅支持8bit的索引色,即在整個圖片中,只能存在256種不同的顏色。

GIF格式適用於對色彩要求不高同時需要文件體積較小的場景,比如企業Logo、線框類的圖等。因其體積小的特點,現在GIF被廣泛的應用在各類網站中。

JPEG

JPEG是有損的、採用直接色的、點陣圖。

JPEG圖片格式的設計目標,是在不影響人類可分辨的圖片質量的前提下,儘可能的壓縮文件大小。這意味著JPEG去掉了一部分圖片的原始信息,也即是進行了有損壓縮。JPEG的圖片的優點,是採用了直接色,得益於更豐富的色彩,JPEG非常適合用來存儲照片,用來表達更生動的圖像效果,比如顏色漸變。

與GIF相比,JPEG不適合用來存儲企業Logo、線框類的圖。因為有損壓縮會導致圖片模糊,而直接色的選用,又會導致圖片文件較GIF更大。

PNG-8

PNG全稱Portable Network Graphics,PNG-8是PNG的索引色版本。PNG-8是無損的、使用索引色的、點陣圖。

PNG是一種比較新的圖片格式,PNG-8是非常好的GIF格式替代者,在可能的情況下,應該儘可能的使用PNG-8而不是GIF,因為在相同的圖片效果下,PNG-8具有更小的文件體積。除此之外,PNG-8還支持透明度的調節,而GIF並不支持。 現在,除非需要動畫的支持,否則我們沒有理由使用GIF而不是PNG-8。當然了,PNG-8本身也是支持動畫的,只是瀏覽器支持得不好,不像GIF那樣受到廣泛的支持。

可以看到PNG-8具有更好的透明度支持。

PNG-24

PNG-24是PNG的直接色版本。PNG-24是無損的、使用直接色的、點陣圖。

無損的、使用直接色的點陣圖,聽起來非常像BMP,是的,從顯示效果上來看,PNG-24跟BMP沒有不同。PNG-24的優點在於,它壓縮了圖片的數據,使得同樣效果的圖片,PNG-24格式的文件大小要比BMP小得多。當然,PNG24的圖片還是要比JPEG、GIF、PNG-8大得多。

雖然PNG-24的一個很大的目標,是替換JPEG的使用。但一般而言,PNG-24的文件大小是JPEG的五倍之多,而顯示效果則通常只能獲得一點點提升。所以,只有在你不在乎圖片的文件體積,而想要最好的顯示效果時,才應該使用PNG-24格式。

另外,PNG-24跟PNG-8一樣,是支持圖片透明度的。

那麼簡單粗暴地說,小圖標,用png儲存最好。

png可以儲存透明,完爆gif的地方在於失真小,沒鋸齒;劣勢是不支持動畫;

png採用無損壓縮,在多數情況下都可以保留圖片裡所有像素。PNG無損壓縮算法,簡單地說,就是把圖片裡出現的每一個顏色都記錄下來。通過記錄這些顏色相對應的值記錄一張圖片。

png分為兩種,一種是Index,一種是RGB。Index記錄同一種顏色的值和出現的位置(簡單地說,比如一個2px*2px的超級小圖,從左往右從上往下依次的顏色是紅,白,白,紅,那麼記錄的方法就是“紅-1,4;白-2,3”);而RGB圖則把所有像素的色值依次記錄下來(即“紅,白,白紅”)。對於相同的圖片,Index格式的尺寸總是小於RGB。

但除非圖片尺寸,顏色層次豐富,這時候可能會失真,因為無論PNG8還是PNG24,儲存的索引色的數量都是有限的(PNG8最多儲存256個索引色,PNG24可以儲存1600多萬個,但相應的尺寸也會更大。)這時候,反而用jpg會好一些。你問題中說的是小圖標,那麼就png是恰當的。

jpg適用於攝影圖片,以及色彩豐富的圖片。它採用壓縮算法,會對圖片上每8px*8px的像素進行處理,通過強制漸變的方法來減小文件尺寸,因此無論選擇的儲存質量多高,還是會多多少少失真一些,但對於攝影之類的圖片來說,jpg格式就會比png小很多了。


分享到:


相關文章: