資訊專欄INFORMATION COLUMN
摘要：由于采用了無損壓縮，相比古老的格式，尺寸較小，而且支持透明和動畫。采用無損壓縮，是基于直接色的位圖格式。正是因為其高品質，無損壓縮，非常適合用于源文件或需要二次編輯的圖片格式的保存。
前言
在大多數的web頁面中，圖片占到了頁面大小的60%-70%。因此在web開發中，不同的場景使用合適的圖片格式對web頁面的性能和體驗是很重要的。圖片格式種類非常多，本文僅針對幾種web應用中常用的圖片格式：gif、png、jpg、webp進行一個基本的總結。
圖片格式分類無壓縮。無壓縮的圖片格式不對圖片數據進行壓縮處理，能準確地呈現原圖片。BMP格式就是其中之一。
無損壓縮。壓縮算法對圖片的所有的數據進行編碼壓縮，能在保證圖片的質量的同時降低圖片的尺寸。png是其中的代表。
有損壓縮。壓縮算法不會對圖片所有的數據進行編碼壓縮，而是在壓縮的時候，去除了人眼無法識別的圖片細節。因此有損壓縮可以在同等圖片質量的情況下大幅降低圖片的尺寸。其中的代表是jpg。
gif采用LZW壓縮算法進行編碼，是一種無損的基于索引色的圖片格式。由于采用了無損壓縮，相比古老的bmp格式，尺寸較小，而且支持透明和動畫。缺點是由于gif只存儲8位索引（也就是最多能表達2^8=256種顏色），色彩復雜、細節豐富的圖片不適合保存為gif格式。色彩簡單的logo、icon、線框圖適合采用gif格式。
jpgjpg是一種有損的基于直接色的圖片格式。由于采用直接色，jpg可使用的顏色有1600w之多（2^24），而人眼識別的顏色數量大約只有1w多種，因此jpg非常適合色彩豐富圖片、漸變色。jpg有損壓縮移除肉眼無法識別的圖片細節后，可以將圖片的尺寸大幅度地減小。
但是jpg不適合icon、logo，因為相比gif/png-8，它在文件大小上絲毫沒有優勢。
png-8png-8采用無損壓縮，是基于8位索引色的位圖格式。png-8相比gif對透明的支持更好，同等質量下，尺寸也更小。非常適合作為gif的替代品。但png-8也一個明顯的不足就是不支持動畫。這也是png-8沒辦法完全替代gif的重要原因。如果沒有動畫需求推薦使用png-8來替代gif。
png-24png-24采用無損壓縮，是基于直接色的位圖格式。png-24的圖片質量堪比bmp，但是卻有bmp不具備的尺寸優勢。當然相比于jpg，gif，png-8，尺寸上還是要大。正是因為其高品質，無損壓縮，非常適合用于源文件或需要二次編輯的圖片格式的保存。
png-24與jpg一樣能表達豐富的圖片細節，但并不能替代jpg。圖片存儲為png-24比存儲為jpg，文件大小至少是jpg的5倍，但在圖片品質上的提升卻微乎其微。所以除非對品質的要求極高，否則色彩豐富的網絡圖片還是推薦使用jpg。
png-24與png-8一樣也支持透明。
webpWebP圖片是一種新的圖像格式，由Google開發。與png、jpg相比，相同的視覺體驗下，WebP圖像的尺寸縮小了大約30％。另外，WebP圖像格式還支持有損壓縮、無損壓縮、透明和動畫。理論上完全可以替代png、jpg、gif等圖片格式，當然目前webp的還沒有得到全面的支持。
看一下png圖片與webp圖片的對比：
詳見png VS webp。
再看一下webp的兼容性：
可以看到webp格式的支持度還不是很好，但是移動端的支持整體還可以。
結合以上的介紹，我們了解了各種圖片格式的優缺點及適用場景，我們再來通過一個圖表來做一個抽象總結：
| 格式 | 優點 | 缺點 | 適用場景 |
|---|---|---|---|
| gif | 文件小，支持動畫、透明，無兼容性問題 | 只支持256種顏色 | 色彩簡單的logo、icon、動圖 |
| jpg | 色彩豐富，文件小 | 有損壓縮，反復保存圖片質量下降明顯 | 色彩豐富的圖片/漸變圖像 |
| png | 無損壓縮，支持透明，簡單圖片尺寸小 | 不支持動畫，色彩豐富的圖片尺寸大 | logo/icon/透明圖 |
| webp | 文件小，支持有損和無損壓縮，支持動畫、透明 | 瀏覽器兼容性不好 | 支持webp格式的app和webview |
最后附上Google關于圖片格式的選擇指南：
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93227.html
摘要：由于采用了無損壓縮，相比古老的格式，尺寸較小，而且支持透明和動畫。采用無損壓縮，是基于直接色的位圖格式。正是因為其高品質，無損壓縮，非常適合用于源文件或需要二次編輯的圖片格式的保存。 前言 在大多數的web頁面中，圖片占到了頁面大小的60%-70%。因此在web開發中，不同的場景使用合適的圖片格式對web頁面的性能和體驗是很重要的。圖片格式種類非常多，本文僅針對幾種web應用中常用的圖...
摘要：由于采用了無損壓縮，相比古老的格式，尺寸較小，而且支持透明和動畫。采用無損壓縮，是基于直接色的位圖格式。正是因為其高品質，無損壓縮，非常適合用于源文件或需要二次編輯的圖片格式的保存。 前言 在大多數的web頁面中，圖片占到了頁面大小的60%-70%。因此在web開發中，不同的場景使用合適的圖片格式對web頁面的性能和體驗是很重要的。圖片格式種類非常多，本文僅針對幾種web應用中常用的圖...
PngPNG包括png-8和png-24 png-32 相對來說體積小；支持透明 24（160W）比8（256） 像素 色塊 色彩 要多很多 8位保存的時候會有鋸齒邊緣 24位是透明邊緣 24位PNG，支持160萬種不同的像素顏色且支持Alpha透明效果，這就意味著，無論透明度設置為多少，PNG圖片均能夠與背景很好的融合在一起。 JpgJPG能顯示的顏色比gif和png要多的多；同時能得到很好...
PngPNG包括png-8和png-24 png-32 相對來說體積小；支持透明 24（160W）比8（256） 像素 色塊 色彩 要多很多 8位保存的時候會有鋸齒邊緣 24位是透明邊緣 24位PNG，支持160萬種不同的像素顏色且支持Alpha透明效果，這就意味著，無論透明度設置為多少，PNG圖片均能夠與背景很好的融合在一起。 JpgJPG能顯示的顏色比gif和png要多的多；同時能得到很好...
PngPNG包括png-8和png-24 png-32 相對來說體積小；支持透明 24（160W）比8（256） 像素 色塊 色彩 要多很多 8位保存的時候會有鋸齒邊緣 24位是透明邊緣 24位PNG，支持160萬種不同的像素顏色且支持Alpha透明效果，這就意味著，無論透明度設置為多少，PNG圖片均能夠與背景很好的融合在一起。 JpgJPG能顯示的顏色比gif和png要多的多；同時能得到很好...
閱讀 1019·2022-07-19 10:19
閱讀 1794·2021-09-02 15:15
閱讀 1007·2019-08-30 15:53
閱讀 2652·2019-08-30 13:45
閱讀 2651·2019-08-26 13:57
閱讀 1983·2019-08-26 12:13
閱讀 1005·2019-08-26 10:55
閱讀 545·2019-08-26 10:46
