數位影像檔案格式

Posted on 週三 07 二月 2018 in Category

在使用電腦的過程中,常見很多圖像檔案格式,例如:BMPJPGGIFPNG
大角蜀的你是否在使用電腦繪圖或影像處理的時候不知該使用以上何種格式而困擾?

以上舉例出的不同格式,他們各自使用不同的技術,有著各自不同的特點,這決定了他們的用途和場合,那麼:

  • 什麼樣的圖像適用什麼樣的格式?
  • 什麼樣的場合適用什麼樣的格式?

獻給各位大觸,大角蜀…

ピクセル無限大 1億TB(テラバイト)
私の理想よ データファイル内緒?
JPG!
——TVアニメ「デンキ街の本屋さん」エンディング主題歌「two-Dimension's Love」

Ver: 2.1

Copyright © 2017 undecV.
Creative Commons License
This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

點陣圖形 v. 向量圖形

有碼和無碼

數位影像分為兩種類型:點陣圖形(Raster graphics, or bitmap)向量圖形(Vector graphics)

點陣圖形(Raster graphics)

點陣圖形將圖像看成一個個「有顏色的點」所組成的陣列,這個「點」被稱之像素(pixel),每個像素存儲者它的顏色的資訊。所以,像素的數量也就決定了檔案的大小:照片的尺寸越大、每單位面積之間的像素(解析度,Dots per inch, DPI)越多,你的圖像也就越精細。

點陣圖形適合用於存儲照片等細節豐富的圖形。但是若將點陣圖形變形、放大等處理時,圖像容易失真:放大之後就變成了馬賽克…以及更多的處理調教的方法:去除雜訊、模糊、銳化、打碼

常見的點陣圖形格式有:BMPJPEG(就是 JPG)、GIFPNGTIFF。以及你的編輯器所使用的:PSDSAIXCF,他們通常還儲存了更多的資訊以便於你的編輯,例如圖層等。

向量圖形(Vector graphics)

向量圖形將圖像的每一個元素例如點、線和面記錄下來,就像給你數學公式畫出函數的圖形一樣,通過這些元素的描述(大小、顏色、輪廓、位置…),將圖像畫出來。

正如上面的描述,你可以(但是很難)將照片存儲為向量圖形,這個動作叫做矢量化(Vectorization)。但是它適合用於存儲電腦繪圖、設計等,例如設計圖、小圖標等。向量圖形可以變成點陣圖形,這個動作叫做柵格化(Rasterization)

相較於點陣圖形,向量圖形通常儲存較少的資訊(取決於圖像的複雜程度),可以便利的變形、放大、修改。

常見的向量圖形格式有:SVG,甚至PDF、Flash 的SWF也算。 以及你的編輯器所使用的:AICDR

比較項目 點陣圖 向量圖
資訊量 多(決定於圖像的大小和解析度) 少(決定於圖像的大小和解析度)
細節表現
影像處理 複雜,方法多樣 簡單
變形 失真 不失真

色彩系統

給你一點顏色!

這個世界是豐富多彩的,圖像也是ww…~

在數位影像中,顏色以數字描述,如何描述顏色也是一個大問題。 可以描述的顏色的數量,也就是色彩深度(Color depth)換總說法就是每像素需要多少 bit(bits per pixel,bpp)決定了圖像色彩的豐富。

一個未經壓縮的點陣圖形的大小 = 點陣的數量 × 色彩深度; 換句話說:大小 = 長 × 寬 × 色彩深度; 下面對圖像大小的計算舉例,均是在未壓縮的情況下和理論上的數值,將使用常見的 Full HD 熒幕的尺寸:1920 × 1080。

二元影像(Binary image)

二元影像(Binary image),非黑即白,只有兩種顏色,所以每個像素只要 1 個二進位數字(Bit)表示。

一張 FHD 的二位元影像的大小 = 2,073,600 bits 大概就是 0.247 MB。

我知道你用不到的就不多說了。

灰階(Gray scale)

灰階(Gray scale),一樣只有黑白,但是每個像素有了亮度的差別,每個像素分為 256 種亮度,因為每個像素由 8 個 bit 存儲,而 8 個 bit 可以表示 256 個值(2 的 8 次方)。

一張 FHD 的灰階影像的大小 = 16,588,800 bits 大概就是 1.978 MB。

有了這亮度的差別,我們終於可以看到一張黑白的照片了,貓熊表示很開心。

三原色模式(RGB color model)

至此,世界終於變成了彩色。

三原色模式(RGB color model)紅(Red)、綠(Green)、藍(Blue),混合除了我們所能看見的所有顏色。即加色法(Additive color):不同顏色的光(色光)混合形成新顏色。它適用於顯示器的顯示,事實上,你的顯示器的每一個像素正是有這三種顏色的發光單元所組成的。電腦中多數圖像以這種方式存儲。

常見的 RGB 分為 16 位元,24 位元,32 位元。

16 位元被稱為高彩色(High color),通常是各 5 位元給紅色和藍色,6 位元給綠色,這是因為人類眼睛對於綠色更為敏感;它能表示 65,536 種顏色。

24 位元被稱為真彩色(True Color),紅綠藍各 8 位元,它能表示 16,777,216 種顏色,這基本是你能看得出來的所有顏色了。

在上面的兩種模式中,每個像素被分成三個部分,分別給了三原色,這每個部分被稱之為通道(Channel)

32 位元在 24 位元的基礎上增加了 8 位元透明度,即阿爾法通道(α Channel,Alpha Channel)

一張 FHD 的 16 位元影像的大小大概是 3.955 MB。 一張 FHD 的 24 位元影像的大小大概是 5.933 MB。 一張 FHD 的 32 位元影像的大小大概是 7.910 MB。

索引彩色圖像(Indexed color)

然而還存在 8 位元的彩色,它只能表示 256 種顏色,顯然把分給僅僅的 8 位元分給紅綠藍三種顏色那麼畫面一定是無法直視,但是在一張圖像中,不是所有顏色都用得到,相近的顏色可以標記成一種顏色,這樣的方式我們可以將一張 16 或 24 位元的圖像精簡並提取出 256 種顏色,把這 256 種顏色列成一張表格(調色盤),在像素陣列中存儲這個顏色的索引值就可以了,這麼聰明的做法被稱為索引彩色圖像(Indexed color),或調色盤(Palette)

亦可看成是一種影像壓縮的方式。(我自己這麼認為)

印刷四分色模式(CMYK color model)

印刷四分色模式(CMYK color model)使用印刷時的顏料(色料)混合的原理,將四種顏料混合出各種顏色:青色(Cyan),洋紅色(Magenta),黃色(Yellow),黑色(blacK)。即減色法(subtractive color):每個顏色會減去(即吸收)某些顏色的光並向反射某些顏色的光,所呈現的顏色就是反射到你眼睛里的顏色;這正是你看印刷品等有顏色的物件時的物理解釋。

正如上文所述,CMYK 被用於印刷品的印刷。

HSL 與 HSV

HSL 即色相、飽和度、亮度(英語:Hue, Saturation, Lightness); HSV 將 HSL 的亮度換成明度(Value,Brightness)。他們使用更直覺的方式描述了一個顏色:「這是什麼顏色?深淺如何?明暗如何?」。繪畫軟體的調色盤多採取這種方式呈現,用於顏色選擇和調整。

影像檔案與格式

Android 把你的 JPG 給綠了你知不知道?當然是選擇原諒她。

點陣圖形,無失真

BMP, Bitmap

BMP 本名 BitMaP,由微軟 Windows 使用的點陣圖格式,是最簡單的影像檔案格式之一。 通常 BMP 的檔案是不經過壓縮的,所以檔案要大的多,正如上文的計算。 BMP 可以選擇的色彩系統很多,每像素可以是 1、4、8、16、24、32 位元。8 位元可以是索引彩色圖像,也可以是灰階圖像。

由於不經過壓縮,適用於在做影像處理時的原始影像和中間過程。 過於龐大的體積不利於儲存和在網路上傳輸。

GIF, Graphics Interchange Format

GIF 本名圖像互換格式(Graphics Interchange Format),利用上文所述的索引彩色圖像方法,以 8 位元(即 256 種顏色)重現真彩色(24 位元)的圖像。

當然,無損只在你的圖像中的顏色少於 256 色的情況下…否則相似的顏色會被合併成一種顏色表示,所以一個更多顏色的圖像被壓縮之後,就會出現顏色的細節變少了,變成同種顏色一塊一塊的。

GIF 還有一個特性便是將多張圖像放在一個檔案中,若這些圖像按順序播放,就會變成動畫(Animation),這一張張圖像被稱為幀(訊框、影格,Frame)

GIF 減少了檔案的大小,保持成像的品質,適合在網際網路中傳輸,我是說,80 年代的網路速度。 但是並不適合顏色豐富的圖像,有顏色的漸變的圖像。

使用 GIF 有演算法的專利問題,(但現在不成問題),所以 PNG 應運而生。

PNG, Portable Network Graphics

PNG 本名可攜式網路圖形(Portable Network Graphics),目標是改善並取代 GIF,所以又名「PNG is Not GIF」。 PNG 也可以選擇很多色彩系統,可以是索引彩色圖像,也可以是灰階圖像,也可以是顏色豐富的真彩色,亦支持阿爾法通道,可以儲存透明和半透明的圖像。

無損壓縮使得檔案變小而不會失真。

相比於 GIF,PNG 壓縮效果更高,可以支持更高的顏色深度,沒有專利問題並且是 ISO 和 IEC 的國際標準,亦被 W3C 推薦,使用自由格式授權。但是,動畫的功能,目前 PNG 只能使用擴充標準實現。

PNG 適合儲存和在網路上傳輸,我是說,現代的網路速度。

TIFF, Tagged Image File Format

TIFF 本名標籤圖檔格式(Tagged Image File Format)

TIFF 非常的靈活,支持很多種的壓縮算法,同檔案也可以包含多個圖像,支持二元、灰階、索引和全彩色。

許多專業的設備和軟體支持和使用 TIFF,但也是由於靈活性,在不同的軟體間可能會有兼容問題。

TIFF 是專業的選擇:適合儲存,更適合在專業的設備和軟體間做資料交換。

點陣圖形,有失真

JPEG

說了那麼多終於講到這個著名的格式了。

JPEG 本名聯合圖像專家小組(Joint Photographic Experts Group),常見的後綴名是 JPG,是 ISO 國際標準,也最普遍的被用來儲存和傳輸相片的格式。

JPEG 使用一些線性代數之類的難懂的演算法,有效降低了圖像的大小,但是會造成失真。 可以使用較低的壓縮率來減少這種現象,但是就會來了檔案大小的增加,畢竟魚和熊掌不可兼得:可以調整壓縮率以權宜。

在網路上,一張 JPEG 可能被重複的壓縮、導致整張圖像慘不忍睹。

JPEG 適合細節豐富的照片,非常適合在網路上傳輸;但是在壓縮過程中圖像的品質會遭受到可見的破壞,特別是有線條繪圖(drawing)和其他文字或圖示(iconic)中,這類的圖像在相鄰像素之間有明顯對比:因為壓縮的演算法,它們會有很顯眼的失真。

JPEG 亦有一些專利爭議,(但現在好像也不成問題)。

WebP

WebP 是 Google 的兒子,是 WebM 多媒體格式的姊妹項目,使用自由格式授權。可選擇有損壓縮或無損壓縮,目標是減少檔案大小,但達到和 JPEG 格式相同的圖像品質,為網路所優化。目前茁壯成長中。

向量圖形

SVG

SVG 本名可縮放向量圖形(Scalable Vector Graphics),基於 XML 的描述二維向量圖形的格式。SVG 由 W3C 制定,是一個開放標準。 SVG 內的物件可以是向量圖形、點陣圖像以及文字。點陣圖像可以是包括 PNG、JPEG。 由於基於 XML,甚至可以用一般的文字編輯器便可檢視或修改。(但是一般由繪圖軟體生成和修改,何必傷害自己呢…

適合存儲電腦繪圖、設計等,也適合在網路上傳輸。

總結

明明是講圖像的文章我卻一張圖都沒有用是不是很厲害!

如果你懂音樂的檔案格式:

  • BMP 就像 WAV;
  • JPG 就像 MP3;
  • PNG 就像 FLAC;
  • SVG 就像 MIDI。

(我亂說的)

以下是非常不負責任的總結:

  • XCF, PDF, AI, etc.:各個平臺的原生檔案格式,用於專案的之間的交換、備份存檔,但是不適合作為發佈使用。
  • BMP小畫家存檔;影像處理時的原始影像和中間過程,要存儲請轉成 PNG。
  • GIF:動圖;以及在網際網路中傳輸入門的選擇。
  • PNG梗圖;存儲 JPEG 水土不服的,那些在相鄰像素之間有明顯對比的圖像(例如,在編輯後添加過文字等物件的照片);數位創作(畫的插畫、漫畫…);在網際網路中傳輸進階的選擇。
  • TIFF:專業的選擇,如果你用的到這個的話,我覺得你也不需要我的建議了ww…
  • JPEG:細節豐富的圖像;照片;處理過的照片;調教過的照片;不包括哪些有水土不服特徵的圖像;在網際網路中傳輸通常的選擇。
  • SVG:向量圖形,幾乎唯一的選擇。

參考

大部分內容均參考、照抄、翻譯自中文、英文、日文的維基百科。(CC BY-SA 3.0)


  • Release Notes:
  • 2.1 Release (20180207).
  • 2.0 Release (20180206). Fix for jekyll.
  • 1.1 Release (20171209).
  • 1.0 Release (20171202).