Hlavní navigace

PNG - bity, byty, chunky

Pavel Tišnovský

V dnešním pokračování seriálu o populárních grafických formátech si ukážeme a také podrobněji popíšeme binární strukturu jednoduchých obrázků typu PNG. Bude se jednat o obrázky s barvovou paletou, obrázky uložené ve stupních šedi a konečně i o plnobarevné (truecolor) obrázky bez alfa kanálu i s alfa kanálem.

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ě 28=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í).

png3_1

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.

Sekvence bytů Význam sekvence
Hlavička souboru typu PNG
89 úvodní byte souboru typu PNG pro detekci sedmibitového přenosu
50 4e 47 řetězec ‚PNG‘ pro detekci typu souboru v některých operačních systémech
0d 0a znaky CR+LF, detekce náhrady za jinou sekvenci
1a znak Ctrl+Z pro ukončení výpisu obsahu souboru v MS-DOSu
0a znak LF, detekce nechtěného ASCII přenosu
Hlavička obrázku (metainformace)
00 00 00 0d délka dat hlavičky je 13 bytů
49 48 44 52 řetězec ‚IHDR‘ – typ chunku
00 00 00 01 šířka obrázku je jeden pixel
00 00 00 01 výška obrázku je také jeden pixel
08 bitová hloubka je 8bpp (odpovídá 256 odstínům šedi)
00 typ obrázku 0 – stupně šedi
00 použitá metoda komprimace (0=deflate)
00 použitá metoda filtrace (0=adaptivní filtrace)
00 prokládání obrázku (0=bez prokládání)
3a 7e 9b 55 CRC hlavičky obrázku
Data obrázku
00 00 00 0a délka chunku s daty je 10 bytů
49 44 41 54 řetězec ‚IDAT‘ – typ chunku
78 da 63 60
00 00 00 02
00 01 10 bytů reprezentujících jeden pixel obrázku ve formátu grayscale
e5 27 de fc CRC dat obrázku
Ukončující chunk
00 00 00 00 délka datové části ukončujícího chunku je 0 bytů
49 45 4e 44 řetězec ‚IEND‘ – typ chunku
ae 42 60 82 CRC ukončujícího chunku

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 224=16 777 216 barev, ve druhém případě dokonce 248=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:

png3_2

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í:

Sekvence bytů Význam sekvence
Hlavička souboru typu PNG
89 úvodní byte souboru typu PNG pro detekci sedmibitového přenosu
50 4e 47 řetězec ‚PNG‘ pro detekci typu souboru v některých operačních systémech
0d 0a znaky CR+LF, detekce náhrady za jinou sekvenci
1a znak Ctrl+Z pro ukončení výpisu obsahu souboru v MS-DOSu
0a znak LF, detekce nechtěného ASCII přenosu
Hlavička obrázku (metainformace)
00 00 00 0d délka dat hlavičky je 13 bytů
49 48 44 52 řetězec ‚IHDR‘ – typ chunku
00 00 00 01 šířka obrázku je jeden pixel
00 00 00 01 výška obrázku je také jeden pixel
08 bitová hloubka je 8bpp (2563=16 777 216 barev)
02 typ obrázku 2 – truecolor se třemi barvovými kanály
00 použitá metoda komprimace (0=deflate)
00 použitá metoda filtrace (0=adaptivní filtrace)
00 prokládání obrázku (0=bez prokládání)
90 77 53 de CRC hlavičky obrázku
Data obrázku
00 00 00 0c délka chunku s daty je 12 bytů
49 44 41 54 řetězec ‚IDAT‘ – typ chunku
78 da 63 60
60 60 00 00
00 04 00 01 12 bytů reprezentujících jeden pixel obrázku ve formátu RGB
c8 ea eb f9 CRC dat obrázku
Ukončující chunk
00 00 00 00 délka datové části ukončujícího chunku je 0 bytů
49 45 4e 44 řetězec ‚IEND‘ – typ chunku
ae 42 60 82 CRC ukončujícího chunku

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 232 různých barev (včetně průhlednosti), ve druhém případě dokonce 264 barev.

png3_3

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ů:

Sekvence bytů Význam sekvence
Hlavička souboru typu PNG
89 úvodní byte souboru typu PNG pro detekci sedmibitového přenosu
50 4e 47 řetězec ‚PNG‘ pro detekci typu souboru v některých operačních systémech
0d 0a znaky CR+LF, detekce náhrady za jinou sekvenci
1a znak Ctrl+Z pro ukončení výpisu obsahu souboru v MS-DOSu
0a znak LF, detekce nechtěného ASCII přenosu
Hlavička obrázku (metainformace)
00 00 00 0d délka dat hlavičky je 13 bytů
49 48 44 52 řetězec ‚IHDR‘ – typ chunku
00 00 00 01 šířka obrázku je jeden pixel
00 00 00 01 výška obrázku je také jeden pixel
08 bitová hloubka je 8bpp (2564 barev s průhledností)
06 typ obrázku 6 – truecolor se třemi barvovými kanály a jedním α kanálem
00 použitá metoda komprimace (0=deflate)
00 použitá metoda filtrace (0=adaptivní filtrace)
00 prokládání obrázku (0=bez prokládání)
1f 15 c4 89 CRC hlavičky obrázku
Data obrázku
00 00 00 0d délka chunku s daty je 13 bytů
49 44 41 54 řetězec ‚IDAT‘ – typ chunku
78 da 63 60
60 60 60 00
00 00 05 00
01 13 bytů reprezentujících jeden pixel obrázku ve formátu RGB
7a a8 57 50 CRC dat obrázku
Ukončující chunk
00 00 00 00 délka datové části ukončujícího chunku je 0 bytů
49 45 4e 44 řetězec ‚IEND‘ – typ chunku
ae 42 60 82 CRC ukončujícího chunku

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.

png3_4

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:

Sekvence bytů Význam sekvence
Hlavička souboru typu PNG
89 úvodní byte souboru typu PNG pro detekci sedmibitového přenosu
50 4e 47 řetězec ‚PNG‘ pro detekci typu souboru v některých operačních systémech
0d 0a znaky CR+LF, detekce náhrady za jinou sekvenci
1a znak Ctrl+Z pro ukončení výpisu obsahu souboru v MS-DOSu
0a znak LF, detekce nechtěného ASCII přenosu
Hlavička obrázku (metainformace)
00 00 00 0d délka dat hlavičky je 13 bytů
49 48 44 52 řetězec ‚IHDR‘ – typ chunku
00 00 00 01 šířka obrázku je jeden pixel
00 00 00 01 výška obrázku je také jeden pixel
01 bitová hloubka je 1bpp (2 barvy)
03 typ obrázku 3 – obrázek s barvovou paletou
00 použitá metoda komprimace (0=deflate)
00 použitá metoda filtrace (0=adaptivní filtrace)
00 prokládání obrázku (0=bez prokládání)
25 db 56 ca CRC hlavičky obrázku
Barvová paleta
00 00 00 06 délka datové části barvové palety je 6 bytů
50 4c 54 45 řetězec ‚PLTE‘ – typ chunku
00 00 00 první barva v paletě: zcela černá barva
ff ff ff druhá barva v paletě: čistě bílá barva
a5 d9 9f dd CRC barvové palety
Data obrázku
00 00 00 0a délka chunku s daty je 10 bytů
49 44 41 54 řetězec ‚IDAT‘ – typ chunku
78 da 63 60
00 00 00 02
00 01 10 bytů reprezentujících jeden pixel obrázku ve formátu RGB
e5 27 de fc CRC dat obrázku
Ukončující chunk
00 00 00 00 délka datové části ukončujícího chunku je 0 bytů
49 45 4e 44 řetězec ‚IEND‘ – typ chunku
ae 42 60 82 CRC ukončujícího chunku

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.

Našli jste v článku chybu?

23. 9. 2008 18:06

chunk IDAT (neregistrovaný)
PNG používá deflate kompresi,to znamená že i ten jeden pixel co má jen 3 byty je komprimovaný a jelikož deflate používá hlavičku pro dekomprimaci tak dochází k navýšení velikosti o několik bytů.

V takovém připadě by bylo lepší nepoužívat žádnou kompresi,ale to v PNG nejde... vždycky je použitá deflate komprese ... i když je na vstupu jen jeden bajt.

Ty obrázky jsou jen demonstrační... ještě jsem nikde neviděl používát jakýkoliv grafický formát pro ukládaní jen jednoho pixelu v praxi :)



11. 2. 2007 18:25

cinky (neregistrovaný)
Mam jednu otazku. V prikladoch prezentovanych v tomto clanku je 1-pixelovy obrazok PNG. Dajme tomu, ze mam na mysli napriklad obrazok PNG v RGB. Teda jeden pixel je reprezentovany troma zlozkami, a to R, G a B, cize 3 byti. Preco je potom v casti IDAT tych bytov 10 (v pripade RGB)? Co je tam navyse? Namiesto troch bytov je 10..tuto vec poriadne nechapem. Ak mi to niekto vysvetli tak budem rad. Dakujem
120na80.cz: Pánové, pečujte o svoje přirození a prostatu

Pánové, pečujte o svoje přirození a prostatu

Lupa.cz: Kdo pochopí vtip, může jít do ČT vyvíjet weby

Kdo pochopí vtip, může jít do ČT vyvíjet weby

DigiZone.cz: ČRo rozšiřuje DAB do Berouna

ČRo rozšiřuje DAB do Berouna

Vitalia.cz: Vychytané vály a válečky na vánoční cukroví

Vychytané vály a válečky na vánoční cukroví

Lupa.cz: Propustili je z Avastu, už po nich sahá ESET

Propustili je z Avastu, už po nich sahá ESET

Lupa.cz: Proč firmy málo chrání data? Chovají se logicky

Proč firmy málo chrání data? Chovají se logicky

Podnikatel.cz: K EET. Štamgast už peníze na stole nenechá

K EET. Štamgast už peníze na stole nenechá

Vitalia.cz: Jsou čajové sáčky toxické?

Jsou čajové sáčky toxické?

Podnikatel.cz: Udávání a účtenková loterie, hloupá komedie

Udávání a účtenková loterie, hloupá komedie

DigiZone.cz: Flix TV: dva set-top boxy za korunu

Flix TV: dva set-top boxy za korunu

Měšec.cz: Stavební spoření: alternativa i pro seniory

Stavební spoření: alternativa i pro seniory

120na80.cz: Horní cesty dýchací. Zkuste fytofarmaka

Horní cesty dýchací. Zkuste fytofarmaka

Měšec.cz: mBank cenzuruje, zrušila mFórum

mBank cenzuruje, zrušila mFórum

Vitalia.cz: Paštiky plné masa ho zatím neuživí

Paštiky plné masa ho zatím neuživí

Lupa.cz: Co se dá měřit přes Internet věcí

Co se dá měřit přes Internet věcí

Podnikatel.cz: Chtějte údaje k dani z nemovitostí do mailu

Chtějte údaje k dani z nemovitostí do mailu

Vitalia.cz: Pamlsková vyhláška bude platit jen na základkách

Pamlsková vyhláška bude platit jen na základkách

Lupa.cz: Teletext je „internetem hipsterů“

Teletext je „internetem hipsterů“

Podnikatel.cz: Udávání kvůli EET začalo

Udávání kvůli EET začalo

Root.cz: Certifikáty zadarmo jsou horší než za peníze?

Certifikáty zadarmo jsou horší než za peníze?