每日一學(六)常用圖片格式及比較

NO IMAGE

本文介紹和比較幾種常見圖片檔案格式的優缺點,並介紹不同的檔案格式對應用程式效能的影響。

有損vs無損

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

  • 有失真壓縮。指在壓縮檔案大小的過程中,損失了一部分圖片的資訊,也即降低了圖片的質量,並且這種損失是不可逆的,我們不可能從有一個有失真壓縮過的圖片中恢復出全來的圖片。常見的有失真壓縮手段,是按照一定的演算法將臨近的畫素點進行合併。
  • 無失真壓縮。只在壓縮檔案大小的過程中,圖片的質量沒有任何損耗。我們任何時候都可以從無失真壓縮過的圖片中恢復出原來的資訊。

索引色vs直接色

計算機在表示顏色的時候,有兩種形式,一種稱作索引顏色(Index Color),一種稱作直接顏色(Direct
Color
)。

  • 索引色。用一個數字來代表(索引)一種顏色,在儲存圖片的時候,儲存一個數字的組合,同時儲存數字到圖片顏色的對映。這種方式只能儲存有限種顏色,通常是256種顏色,對應到計算機系統中,使用一個位元組的數字來索引一種顏色。
  • 直接色。使用四個數字來代表一種顏色,這四個數字分別代表這個顏色中紅色、綠色、藍色以及透明度。現在流行的顯示裝置可以在這四個維度分別支援256種變化,所以直接色可以表示2的32次方種顏色。當然並非所有的直接色都支援這麼多種,為壓縮空間使用,有可能只有表達紅、綠、藍的三個數字,每個數字也可能不支援256種變化之多。

點陣圖vs向量圖

  • 點陣圖,也叫做點陣圖,畫素圖。構成點陣圖的最小單位是象素,點陣圖就是由象素陣列的排列來實現其顯示效果的,每個象素有自己的顏色資訊,在對點陣圖影象進行編輯操作的時候,可操作的物件是每個象素,我們可以改變影象的色相、飽和度、明度,從而改變影象的顯示效果。點陣圖縮放會失真,用最近非常流行的沙畫來比喻最恰當不過,當你從遠處看的時候,畫面細膩多彩,但是當你靠的非常近的時候,你就能看到組成畫面的每粒沙子以及每個沙粒的顏色。
  • 向量圖,也叫做向量圖。向量圖並不紀錄畫面上每一點的資訊,而是紀錄了元素形狀及顏色的演算法,當你開啟一付向量圖的時候,軟體對圖形象對應的函式進行運算,將運算結果[圖形的形狀和顏色]顯示給你看。無論顯示畫面是大還是小,畫面上的物件對應的演算法是不變的,所以,即使對畫面進行倍數相當大的縮放,其顯示效果仍然相同(不失真)。

BMP

Bitmap的縮寫,是無損的、既支援索引色也支援直接色的、點陣圖。

這是一種比較老的圖片格式。BMP是無損的,但同時這種圖片格式幾乎沒有對資料進行壓縮,所以BMP格式的圖片通常具有較大的檔案大小。雖然同時支援索引色和直接色是一個優點,但是太大的檔案格式格式導致它幾乎沒有用武之地,現在除了在Windows作業系統中還比較常見之外,我們幾乎看不到它。

從上圖中可以看到,在同樣的圖片質量下,BMP格式的圖片檔案大小是GIF格式的很多倍。

GIF

全稱Graphics Interchange Format,採用LZW壓縮演算法進行編碼。是無損的、採用索引色的、點陣圖。

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一樣,是支援圖片透明度的。

SVG

全稱Scalable Vector Graphics,是無損的、向量圖。

SVG跟上面這些圖片格式最大的不同,是SVG是向量圖。這意味著SVG圖片由直線和曲線以及繪製它們的方法組成。當你放大一個SVG圖片的時候,你看到的還是線和曲線,而不會出現畫素點。這意味著SVG圖片在放大時,不會失真,所以它非常適合用來繪製企業Logo、Icon等。

SVG是很多種向量圖中的一種,它的特點是使用XML來描述圖片。藉助於前幾年XML技術的流行,SVG也流行了很多。使用XML的優點是,任何時候你都可以把它當做一個文字檔案來對待,也就是說,你可以非常方便的修改SVG圖片,你所需要的只需要一個文字編輯器。

SVG並非只能繪製簡單的Logo類的圖片,它可以繪製出精緻的圖片的。

SVG載入速度會快於PNG,但渲染速度會慢於PNG,畢竟PNG有硬體加速,但平均下來,載入速度的提升彌補了繪製的速度缺陷。

WebP

WebP是谷歌開發的一種新圖片格式,WebP是同時支援有損和無失真壓縮的、使用直接色的、點陣圖。

從名字就可以看出來它是為Web而生的,什麼叫為Web而生呢?就是說相同質量的圖片,WebP具有更小的檔案體積。現在網站上充滿了大量的圖片,如果能夠降低每一個圖片的檔案大小,那麼將大大減少瀏覽器和伺服器之間的資料傳輸量,進而降低訪問延遲,提升訪問體驗。

  • 在無失真壓縮的情況下,相同質量的WebP圖片,檔案大小要比PNG小26%;
  • 在有失真壓縮的情況下,具有相同圖片精度的WebP圖片,檔案大小要比JPEG小25%~34%;
  • WebP圖片格式支援圖片透明度,一個無失真壓縮的WebP圖片,如果要支援透明度只需要22%的格外檔案大小。

想象Web上的圖片之多,百分之幾十的提升,是非常非常大的優化。只可惜,目前只有Chrome瀏覽器和Opera瀏覽器支援WebP格式,所以WebP的應用並不廣泛。為了使用更先進的技術,比如WebP圖片格式,來壓縮網際網路上傳輸的資料流量,谷歌甚至提供了Chrome Data Compression Proxy,設定了Chrome Data Compression Proxy作為Web代理之後,你訪問的所有網站中的圖片,在經過Proxy的時候,都會被轉換成WebP格式,以降低圖片檔案的大小。