PNG - bity, byty, chunky

Obsah

1. Struktura souboru PNG s obrázkem uloženým ve stupních šedi
2. Binární podoba obrázku uloženého ve stupních šedi
3. Struktura souboru PNG s plnobarevným obrázkem bez alfa kanálu
4. Binární podoba plnobarevného obrázku bez alfa kanálu
5. Struktura souboru PNG s plnobarevným obrázkem ve formátu RGBA
6. Binární podoba plnobarevného obrázku s alfa kanálem
7. Struktura souboru PNG s obrázkem obsahujícím barvovou paletu
8. Binární podoba obrázku s paletou
9. Obsah dalšího pokračování tohoto seriálu

1. Struktura souboru PNG s obrázkem uloženým ve stupních šedi

V předchozím pokračování tohoto seriálu jsme si uvedli, že obrázky uložené ve stupních šedi mají v hlavičce obrázku, tj. v metainfor­macích popisujících obrázek, nastaven typ kódování barev na 0. Počet bitů na pixel může nabývat hodnot 1, 2, 4, 8 nebo 16; my si však bez ztráty obecnosti ukážeme strukturu obrázku s pixely uloženými v bitové hloubce 8 bitů na pixel (bpp – bits per pixel), ve kterých je možné vzájemně rozlišit maximálně 2⁸=256 odstínů šedi. Jedná se o prakticky nejběžnější formát tzv. grayscale obrázků, jiný počet bitů na pixel (např. 16) se uplatňuje ve speciálních případech, například v lékařství. Konkrétní binární podoba obrázku o rozlišení 1×1 pixel uloženého ve stupních šedi je popsána v následující podkapitole, jeho grafická podoba je zobrazena na prvním ilustračním obrázku (jedná se o pouhý jeden pixel vykreslený černou barvou na bílém pozadí).

Obrázek 1: Jednopixelový obrázek uložený ve stupních šedi

2. Binární podoba obrázku uloženého ve stupních šedi

Nejmenší obrázek uložený ve stupních šedi při 8 bpp (bitech na pixel) má rozlišení 1×1 pixel a jeho celková délka při uložení do formátu PNG je 67 bytů. To je skoro dvakrát více, než u formátu GIF, kde měl nejmenší obrázek s tímtéž rozlišením velikost pouhých 35 bytů. Rozdílná délka je způsobena zejména poměrně velkými hlavičkami chunků (12 bytů) u PNG oproti formátu GIF, kde mají některé bloky dat délku menší, někdy dokonce pouhý jeden byte (například ukončující blok). Při práci s obrázky většími než cca 30×30 pixelů se však velikosti souborů většinou obrací, protože soubory PNG bývají díky filtrům a lepšímu komprimačnímu algoritmu menší. Vraťme se však k našemu obrázku uloženému ve formátu PNG. Při prohlížení binárních informací uložených v tomto souboru pomocí hexadecimálního editoru (biew, hiew apod.) uvidíme následující sekvenci bytů. Všechny další údaje, tj. jak offsety od začátku souboru, tak i jednotlivé byty, jsou zapsány hexadecimálně:

0000000: 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52
0000010: 00 00 00 01 00 00 00 01 08 00 00 00 00 3a 7e 9b
0000020: 55 00 00 00 0a 49 44 41 54 78 da 63 60 00 00 00
0000030: 02 00 01 e5 27 de fc 00 00 00 00 49 45 4e 44 ae
0000040: 42 60 82 

Pojďme si nyní význam jednotlivých bytů v PNG obrázku ozřejmit.

Vidíme, že celý soubor je rozdělený do čtyř bloků dat. V prvním bloku o délce osmi bytů je uložena hlavička souboru typu PNG, která má stále stejný obsah. V dalších 25 bytech je uložena hlavička obrázku obsahující nejdůležitější metainformace, které jsou potřebné pro každý program manipulující s obrázky (jedná se o chunk IHDR). Dalších 22 bytů je vyhrazeno pro datovou část, tj. vlastní informaci o uložených pixelech zabalenou v chunku IDAT. Posledních 12 bytů slouží pro uložení ukončujícího chunku IEND, který nemá datovou část, proto je jeho podoba stále stejná.

Ve skutečnosti, zejména u delších obrázků, může být rastrový obrázek rozdělen do více chunků IDAT. Efekt rozdělení je dvojí: obrázek je možné zobrazit již při přenosu (podle specifikace by se měla zobrazit pouze ta část obrázku, která má korektní CRC) a i poškozený obrázek je možné částečně zrekonstruovat. Vzhledem k tomu, že každý chunk IDAT zvyšuje velikost souboru o minimálně 12 bytů, je vhodné používat velikost bloku cca 50–100 kB.

3. Struktura souboru PNG s plnobarevným obrázkem bez alfa kanálu

Grafický formát PNG nativně podporuje plnobarevné (truecolor) obrázky, které jsou ukládány bezeztrátově. To je velká změna oproti populárnímu formátu GIF, který má s těmito obrázky velké problémy, resp. problémy leží na straně zobrazovacích programů. Při práci s plnobarevnými obrázky se pracuje buď se třemi barvovými kanály (RGB), nebo s kanály čtyřmi (RGBA), kde čtvrtý kanál nazývaný α reprezentuje průhlednost pixelů. U plnobarevných obrázků jsou podporovány pouze dvě bitové hloubky, a to 8 bitů na kanál a 16 bitů na kanál. V prvním případě se rozlišuje 2²⁴=16 777 216 barev, ve druhém případě dokonce 2⁴⁸=281 474 9­76 710 656 různých barevných odstínů (tato bitová hloubka se uplatní zejména při zpracovávání fotografií a synteticky generovaných obrázků v nejvyšší kvalitě). Dále popisovaný pidiobrázek o rozlišení 1×1 pixel a celkové délce 69 bytů je zobrazený zde:

Obrázek 2: Jednopixelový plnobarevný obrázek ve formátu RGB

4. Binární podoba plnobarevného obrázku bez alfa kanálu

Plnobarevný obrázek bez uloženého alfa kanálu je velmi podobný obrázku se stupněmi šedi – jsou použity pouze tři chunky, a to IHDR, IDAT a samozřejmě také chunk IEND ukončující celý soubor. Podobně jako ve druhé kapitole, i zde si nejprve uvedeme podobu uloženého obrázku PNG tak, jak ji můžeme spatřit v hexadecimálním editoru, resp. po zpracování utilitou typu xxd:

0000000: 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52
0000010: 00 00 00 01 00 00 00 01 08 02 00 00 00 90 77 53
0000020: de 00 00 00 0c 49 44 41 54 78 da 63 60 60 60 00
0000030: 00 00 04 00 01 c8 ea eb f9 00 00 00 00 49 45 4e
0000040: 44 ae 42 60 82 

Význam jednotlivých skupin bytů je následující:

Plnobarevný obrázek se tedy příliš neliší od svého šedobílého předka. Hlavička souboru PNG je shodná, zcela v souladu se specifikací. V hlavičce obrázku (chunk ‚IHDR‘), která následuje ihned za hlavičkou souboru, je provedena drobná změna – typ obrázku již není nastaven na 0 (grayscale), ale na 2, což značí truecolor obrázek. Dále se zvýšila délka chunku s daty (‚IDAT‘) z původních deseti bytů na bytů dvanáct, je to způsobeno jejich odlišným kódováním, protože na vstupu se pro každý pixel používají tři byty a ne byte jeden. Ukončující chunk ‚IEND‘ je pro oba typy souborů zcela stejný.

Za zmínku jistě stojí fakt, že při uložení stejného obrázku o rozlišení 1×1 pixel do souboru typu JPEG vznikne molochovitý soubor o celkové délce 284 bytů, v tomto případě je již PNG úspornější.

5. Struktura souboru PNG s plnobarevným obrázkem ve formátu RGBA

Na třetím obrázku je zobrazena bitmapa s rozlišením 1×1 pixel, uložená v souboru typu PNG ve formátu RGBA. Při použití formátu RGBA, který je v hlavičce označen číslem 6, je každý pixel popsán čtveřicí hodnot. První tři hodnoty reprezentují barvu pixelu v barvovém modelu RGB, čtvrtá hodnota pak představuje průhlednost pixelu. Počet bitů na jeden barevný kanál je buď 8 nebo 16. V prvním případě je k dispozici celkem 2³² různých barev (včetně průhlednosti), ve druhém případě dokonce 2⁶⁴ barev.

Obrázek 3: Jednopixelový plnobarevný obrázek ve formátu RGBA

6. Binární podoba plnobarevného obrázku s alfa kanálem

Při pohledu na binární podobu obrázku ve formátu RGBA zjistíme, že i když se stále jedná o obrázek s rozlišením 1×1 pixel, délka souboru se zvýšila na rovných 70 bytů, což je o jeden byte více než v případě obrázku ve formátu RGB a o tři byte více než u obrázku uloženého ve stupních šedi. Rozdílná délka je způsobena větším chunkem IDAT, který musí nést více informací. Binární podoba obrázku ve formátu RGBA o rozlišení 1×1 pixel je následující:

0000000: 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52
0000010: 00 00 00 01 00 00 00 01 08 06 00 00 00 1f 15 c4
0000020: 89 00 00 00 0d 49 44 41 54 78 da 63 60 60 60 60
0000030: 00 00 00 05 00 01 7a a8 57 50 00 00 00 00 49 45
0000040: 4e 44 ae 42 60 82 

Význam jednotlivých skupin bytů:

Uvedenou strukturu pravděpodobně nemá cenu podrobněji popisovat, kromě jiného typu obrázku (6) se zvýšila délka chunku IDAT na 13 datových bytů. V ostatních ohledech zůstává struktura obrázku nezměněna.

7. Struktura souboru PNG s obrázkem obsahujícím barvovou paletu

Obrázek obsahující barvovou paletu je v jednom ohledu zajímavější, než všechny tři předešlé typy obrázků. Do obrázku totiž musí být přidána informace o paletě, která je uložena v samostatném chunku nazvaném jednoduše PLTE. Paleta by se měla nacházet ještě před datovým chunkem IDAT a to z toho důvodu, že některé prohlížeče obrázek zobrazují již při jeho přenosu po mnohdy pomalých datových linkách a bez informace o barvové paletě není možné obrázek průběžně korektně zobrazit.

Obrázek 4: Jednopixelový obrázek s barvovou paletou

8. Binární podoba obrázku s paletou

Obrázek o velikosti 1×1 pixel s barvovou paletou a pouhými dvěma barvami (1 bpp) má velikost 85 bytů a následující binární podobu:

0000000: 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52
0000010: 00 00 00 01 00 00 00 01 01 03 00 00 00 25 db 56
0000020: ca 00 00 00 06 50 4c 54 45 00 00 00 ff ff ff a5
0000030: d9 9f dd 00 00 00 0a 49 44 41 54 78 da 63 60 00
0000040: 00 00 02 00 01 e5 27 de fc 00 00 00 00 49 45 4e
0000050: 44 ae 42 60 82 

Větší velikost obrázku je způsobena právě barvovou paletou. V praxi, tj. při práci s většími obrázky, se poměr velikostí převrací a paletové obrázky mají většinou menší velikost, než obrázky celobarevné. Jedinou výjimkou je použití ditheringu, tato technika má negativní dopad na kompresní poměr (podrobnější informace si povíme příště). Význam jednotlivých skupin bytů v souboru PNG:

Za povšimnutí stojí pouze fakt, že data jsou v barvové paletě uložena v nekomprimované podobě. Vzhledem k tomu, že je nastavena bitová hloubka pouze 1 bit na pixel, obsahuje barvová paleta jen dvě barvy. V našem případě se jedná o černou a bílou barvu, ve skutečnosti je však možné použít dvě zcela libovolné barvy (některé prohlížeče však v tomto případě barvy ignorují, což je nekorektní chování).

9. Obsah dalšího pokračování tohoto seriálu

V následujícím pokračování tohoto seriálu si vysvětlíme, jakým způsobem je možné v grafickém formátu PNG využívat filtry a jak se pomocí nich dá zvýšit komprimační poměr, tj. poměr mezi nezkomprimovanou a zkomprimovanou délkou dat popisujících rastrový obrázek. Také si popíšeme doposud nepopsané přídavné chunky, například chunk pro uložení gamma korekce nebo chunky určené pro uložení textových informací o obrázku.