Rastrový grafický formát ICO

Obsah

1. Grafický formát ikon – ICO
2. AND-bitmapy a XOR-bitmapy
3. Ukázka souboru ICO obsahujícího jednu ikonu
4. Ukázka souboru ICO obsahujícího sadu ikon
5. Odkazy na další informační zdroje
6. Obsah dalšího pokračování tohoto seriálu

1. Grafický formát ikon – ICO

Grafický formát ICO zavedla firma Microsoft pro potřeby svého operačního systému Microsoft Windows. Historie tohoto formátu dokonce sahá až ke grafickým kartám CGA a Windows 2.0. Jedná se o soubor, ve kterém se může nacházet několik ikon (malých rastrových obrázků) s různou barevnou hloubkou, rozlišením a volitelnou průhledností. Na platformě Microsoft Windows se tento typ souborů stal zákonitě populární a velmi rozšířený; prakticky každá aplikace obsahuje jednu či několik těchto ikon, ať už ve formě samostatných souborů s příponou .ico nebo prostředků (resources) vložených do spustitelných souborů (většinou s koncovkou .exe) a dynamických knihoven (.dll) – viz funkce LoadIcon() a LoadImage(). Velké množství ikon je obsažených například v systémových knihovnách moricons.dll a shell32.dll.

Formát ICO však není zdaleka omezen pouze na tento operační systém, protože je v současnosti podporován prakticky všemi rozšířenějšími webovými prohlížeči s grafickou podporou pro zobrazení „ikony“ či loga webových stránek. Tato ikona, která bývá označována termíny favicon (Favorite Icon), Page Icon či URL Icon, může být ve webovém prohlížeči zobrazena jak v bookmarcích, tak i na titulkové liště celého okna nebo jednotlivých tabů či v adresovém řádku. Dnes je patrná snaha místo formátu ICO používat pro tento účel formát PNG, který je však z několika důvodů nevhodný; například nepodporuje ukládání více obrázků s různou barevnou hloubkou a různým rozlišením v jednom souboru, což komplikuje podporu pro různá zařízení (mobilní telefony atd.). Přiřazení ikony nějaké WWW stránce je možné kromě konfigurace HTTP serveru provést například tímto kódem:

<link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/x-icon">
<link rel="icon" href="http://example.com/favicon.ico" type="image/x-icon"> 

Struktura grafického formátu ICO s uloženými ikonami je poměrně složitá, ale implementace dekodéru (například v prohlížečích) je kupodivu jednodušší, než se na první pohled může zdát. Soubor .ico s uloženými ikonami začíná takzvanou informační resp. souborovou hlavičkou, ve které jsou mimo dvou vcelku bezvýznamných (konstantních a nicneříkajících) položek uloženy především informace o celkovém počtu ikon, které se v souboru nachází. Všechny vícebytové údaje (rozlišení, offsety, bytové délky atd.) jsou uloženy v pořadí nižší byte-vyšší byte, tj. jedná se o uspořádání little-endian, které je pro procesory Intel řady x86 nativní. Informační/sou­borová hlavička obsahuje celkem tři položky s následujícím formátem:

Jména jednotlivých položek informační hlavičky odpovídají názvům složek céčkovských struktur z oficiálních hlavičkových souborů WinAPI (i když je pravda, že ve WinAPI se na tak nízké úrovni většinou nepracuje). Uvedené datové typy (BYTE, WORD, DWORD) jsou bezznaménkové celočíselné typy odpovídající v třicetidvou­bitových překladačích jazyka C typům unsigned char, unsigned short int a unsigned int. Po informační hlavičce jsou v souboru uloženy hlavičky jednotlivých ikon (ikony mohou mít různé rozměry, čehož se typicky využívá pro uložení toho samého obrázku ve více velikostech). Těchto hlaviček za sebou může být uloženo více, celkový počet hlaviček souhlasí s hodnotou idCount. Každá hlavička ikony má následující formát:

Mezi hlavičkami ikon a jejich definicemi se teoreticky může nacházet libovolné množství nadbytečných bytů (v budoucnu může být například podporována animace), proto by měl dekódovací program vždy načítat a správně zpracovat hodnotu dwImageOffset a nespoléhat se na to, že ihned po hlavičkách nalezne data první ikony. Na daném offsetu (dwImageOffset) můžeme najít čtyři struktury plně popisující danou ikonu. Jedná se o hlavičku obrázku (není těch hlaviček už nějak moc?), kterou již známe z dílů, ve kterých jsme se zabývali grafickým formátem BMP. Dále o barvovou paletu následovanou dvojicí bitmap. První bitmapa je nazývaná podle své funkce XOR-bitmapa, druhá bitmapa pak AND-bitmapa. Nejdříve si ukážeme, jak jednotlivé struktury vypadají, posléze si popíšeme význam obou bitmap.

Struktura s hlavičkou obrázku vypadá následovně:

Z výše uvedené struktury, která odpovídá datové struktuře BITMAPINFOHEADER je patrné, že některé hodnoty jsou duplikovány již v hlavičce ikony. Některé položky, které mají význam pouze u samostatných bitmap, jsou v případě souborů s ikonami nulové, konkrétně se jedná o položky biXPelsPerMeter, biYPelsPerMeter, biClrUsed a biClrImportant. Tyto položky může dekodér ignorovat.

Po hlavičce bitmapy následuje barvová paleta. Ta je uložena stejným způsobem, jako u grafického formátu BMP. Každá barva je reprezentována čtveřicí bytů. V prvním bytu je uložena hodnota barvové složky R (Red, červená), ve druhém bytu hodnota barvové složky G (Green, zelená), ve třetím bytu hodnota složky B (Blue, modrá) a čtvrtý byt je rezervovaný – obsahuje nulovou hodnotu. Barvová paleta je platná pro XOR-bitmapu, kterou si popíšeme v následující kapitole. AND-bitmapa je vždy monochromatická a vlastně se přímo nevykresluje, proto se pro ni žádná barevná paleta neukládá.

2. AND-bitmapy a XOR-bitmapy

Každá ikona je představována dvojicí bitmap. Jedna z těchto bitmap se nazývá AND-bitmapa, druhá je XOR-bitmapa. Jaký je jejich význam? Musíme si uvědomit, že ikony jsou sice obdélníkové či čtvercové rastrové obrázky, ale většinou jsou vykreslovány s průhledností například na desktopový obrázek (wallpaper). Původní obrázky typu BMP neměly podporu průhlednosti, proto firma Microsoft přišla s nápadem použití dvou bitmap, kde jedna bitmapa představuje masku (AND-bitmapa) a druhá bitmapa vlastní obarvené pixely (XOR-bitmapa). Není to nápad nijak nový, podobným způsobem jsou řešeny například sprity v mnoha starších i moderních hrách.

Kromě toho je možné pomocí dvojice bitmap zajistit, že se některé barvy pozadí (podkladového obrázku) budou invertovat, tj. k průhlednosti se přidává i negativní maskování. Již víme, že AND-bitmapa je monochromatická, každý pixel je tedy představován pouze jedním bitem. Jak se vzájemná interakce obrázku na pozadí, AND-bitmapy a XOR bitmapy projeví nám ukazuje následující tabulka. Vidíme, že názvy obou bitmap jsou zvoleny přiléhavě, protože 0 xor pozadí=pozadí a max xor pozadí=inverze pozadí, kde max je maximální povolený index barvy (například 15 či 255 podle bitů na pixel).

3. Ukázka souboru ICO obsahujícího jednu ikonu

V operačních systémech Microsoft Windows se často setkáme se soubory .ico, které mají velikost přesně 766 bytů. Tyto ikony jsou opravdu typické a možná proto si mnoho lidí myslí, že ikony mohou mít velikost pouze 32×32 pixelů v šestnácti barvách – přesně taková ikona je v těchto souborech uložena. Podívejme se nyní, co se v souborech této délky nachází:

V hexadecimálním výpisu uvedeném níže je obsah souboru py.ico, který si můžete stáhnout zde. Jedná se o ikonu z instalace interpreteru programovacího jazyka Python.

0000000: 00 00 01 00 01 00 20 20 10 00 00 00 00 00 e8 02
0000010: 00 00 16 00 00 00 28 00 00 00 20 00 00 00 40 00
0000020: 00 00 01 00 04 00 00 00 00 00 80 02 00 00 00 00
0000030: 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00
0000040: 00 00 00 00 80 00 00 80 00 00 00 80 80 00 80 00
0000050: 00 00 80 00 80 00 80 80 00 00 80 80 80 00 c0 c0
0000060: c0 00 00 00 ff 00 00 ff 00 00 00 ff ff 00 ff 00
0000070: 00 00 ff 00 ff 00 ff ff 00 00 ff ff ff 00 00 00
0000080: 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00
0000090: 00 00 aa a3 a0 00 00 00 00 00 00 00 00 00 00 00
00000a0: 00 03 33 aa aa a0 0a aa aa 00 00 00 00 00 00 00
00000b0: 00 aa aa a3 33 33 a3 33 33 33 00 00 00 00 00 00
00000c0: 00 aa aa 33 33 33 33 33 33 33 30 0a a0 00 00 00
00000d0: 00 33 3a 33 33 33 33 33 33 33 33 33 33 00 00 00
00000e0: 00 aa aa 33 33 30 33 33 33 03 33 33 33 30 00 00
00000f0: 00 0a aa 33 33 33 03 33 30 00 33 30 03 30 00 00
0000100: 00 03 33 a3 33 33 30 00 00 00 00 00 00 30 00 90
0000110: 00 00 0a aa 33 33 33 00 00 00 00 00 00 00 90 90
0000120: 00 00 00 33 aa 33 33 30 00 00 00 00 00 00 09 90
0000130: 00 00 00 00 aa a3 33 33 00 00 00 00 00 00 00 99
0000140: aa aa 00 00 03 3a 33 33 30 00 00 00 00 00 00 09
0000150: 9a 3a aa 00 00 0a a3 33 33 00 00 00 00 00 00 00
0000160: 99 00 3a aa 00 00 3a 33 33 00 00 00 00 00 00 00
0000170: 09 90 00 3a a0 00 aa a3 33 30 00 00 00 00 00 a3
0000180: a3 a3 00 0a 3a 00 33 a3 33 30 00 00 00 00 0a aa
0000190: aa aa a0 00 3a a0 aa a3 33 30 00 00 00 00 0a a3
00001a0: a3 a3 aa a0 0a 3a 0a 33 33 30 00 00 00 00 03 33
00001b0: 33 33 a3 aa 00 aa a0 33 33 30 00 00 00 00 03 03
00001c0: 30 33 33 a3 aa aa a0 33 33 00 00 00 00 00 03 33
00001d0: 33 33 33 33 a3 aa a0 33 33 00 00 00 00 00 00 33
00001e0: 33 33 33 33 33 3a 03 33 30 00 00 00 00 00 00 00
00001f0: 33 33 33 33 33 30 33 30 00 00 00 00 00 00 00 00
0000200: 00 00 30 00 33 30 00 00 00 00 00 00 00 00 00 00
0000210: 00 bb 0b bb 03 00 00 00 00 00 00 00 00 00 00 00
0000220: 00 bc 0b cc 03 00 00 00 00 00 00 00 00 00 00 00
0000230: 00 bc 0b cc 03 00 00 00 00 00 00 00 00 00 00 00
0000240: 00 bb 0b bb 03 00 00 00 00 00 00 00 00 00 00 00
0000250: 00 00 00 00 33 00 00 00 00 00 00 00 00 00 00 00
0000260: 00 03 30 33 30 00 00 00 00 00 00 00 00 00 00 00
0000270: 00 00 00 00 00 00 00 00 00 00 00 00 00 00 ff 07
0000280: ff ff fe 01 83 ff fc 00 00 ff f8 00 00 67 f8 00
0000290: 00 03 f8 00 00 01 f8 00 00 00 fc 00 02 00 fc 00
00002a0: 07 18 de 00 1f fc 5f 80 0f fe 80 e0 07 ff c0 30
00002b0: 03 ff c0 0c 01 ff c0 06 01 ff c0 02 00 ff 80 00
00002c0: 00 ff 00 00 00 ff 00 00 00 ff 00 00 00 ff 00 00
00002d0: 01 ff 00 00 01 ff 80 00 03 ff c0 00 07 ff f0 00
00002e0: 1f ff f8 00 ff ff f8 01 ff ff f8 01 ff ff f8 01
00002f0: ff ff f8 01 ff ff fc 03 ff ff fe 47 ff ff 

Pokusme se tento soubor analyzovat:

Informační hlavička

Hlavička ikony

Hlavička obrázku

Po těchto údajích následuje 64 bytů barvové palety (16 barev po čtyřech bytech), XOR-bitmapa (512 bytů, 32×32 pixelů, každý je reprezentován čtyřmi bity) a AND-bitmapa (128 bytů, 32×32 pixelů, každý je reprezentován jedním bitem).

4. Ukázka souboru ICO obsahujícího sadu ikon

V dokumentaci WinAPI se píše, že by aplikace měla obsahovat minimálně tři ikony: 16×16 pixelů, šestnáct barev, 32×32 pixelů, šestnáct barev a 48×48 pixelů, 256 barev. To pomáhá operačnímu systému se zobrazením ikon v různých oknech a dialozích. Na desktopu jsou většinou zobrazeny ikony o velikosti 32×32 pixelů, ale po volbě „Zobrazovat velké ikony“ se použijí ikony 48×48 pixelů. Ve startovacím menu a Exploreru se naopak používají ikony velikosti 16×16 pixelů a při zvětšení 32×32 pixelů. Přepočet rozlišení obrázku je samozřejmě ztrátový a celkově nepěkný, z toho důvodu je vhodné výše uvedené doporučení dodržovat. Ukázkový soubor se sadou ikon pochází z instalace Javy 1.4.2. Jedná se o soubor s názvem JavaCup.ico, který obsahuje celkem devět ikon (nových log Javy), jejichž rozměry a počet barev jsou vypsány v následující tabulce:

Tento ukázkový soubor si můžete stáhnout zde. Detailní rozbor jeho struktury si již ukazovat nebudeme, pouze se podíváme, zda informační hlavička opravdu obsahuje položky o všech devíti uložených ikonách:

Následují hlavičky jednotlivých ikon, na dalším výpisu jsou seřazeny po šestnácti bytech (což je přesně délka jedné hlavičky):

30 30 10 00 01 00 04 00 68 06 00 00 96 00 00 00
20 20 10 00 01 00 04 00 e8 02 00 00 fe 06 00 00
10 10 10 00 01 00 04 00 28 01 00 00 e6 09 00 00
30 30 00 00 01 00 08 00 a8 0e 00 00 0e 0b 00 00
20 20 00 00 01 00 08 00 a8 08 00 00 b6 19 00 00
10 10 00 00 01 00 08 00 68 05 00 00 5e 22 00 00
30 30 00 00 01 00 20 00 a8 25 00 00 c6 27 00 00
20 20 00 00 01 00 20 00 a8 10 00 00 6e 4d 00 00
10 10 00 00 01 00 20 00 68 04 00 00 16 5e 00 00 

Jako příklad si ukážeme hlavičku první ikony:

5. Odkazy na další informační zdroje

1. Wikipedia: ICO (icon image file format)
   http://en.wiki­pedia.org/wiki/I­CO_%28icon_ima­ge_file_format%29
2. Wikipedia: Favicon
   http://en.wiki­pedia.org/wiki/Fa­vicon
3. Mysteries Of The Favicon.ico – How To Create A Favicon In Photoshop
   http://www.pho­toshopsupport­.com/tutorial­s/jennifer/fa­vicon.html
4. Alfons Hoogervorst: Complete Icon Format Explanation (ukázky v Pascalu)
   http://www.bsdg­.org/SWAG/WIN-OS2/0058.PAS.htm
5. Hynek Sládeček: 1000 File Formats (Freeware encyklopedie souborových formátů):
   http://www.kro­vina.cz/studna/ 1997, 1998 (bývalá adresa)
6. Wikipedia: Icons
   http://en.wiki­pedia.org/wiki/Wi­kipedia:Icons

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

V následujícím pokračování tohoto seriálu konečně uzavřeme rozsáhlou kapitolu rastrových grafických formátů. Popíšeme si formát WBMP určený pro mobilní aplikace a dále formát IMG firmy Alias Research.