Barvy a barevné systémy Formáty obrázků pro WWW

Barvy a barevné systémy Formáty obrázků pro WWW

Ivo Peterka, FHS UK, 24.10.2011

Viditelné světlo. ●

●

●

Elektromagnetické záření o vlnové délce 390 – 760 nanometrů. Jsou-li v konkrétním světle zastoupeny složky všech vlnových délek, vnímáme toto světlo jako bílé. Je-li v konkrétním světle obsaženy pouze záření konkrétních délek, vnímáme toto světlo jako barevné.


Aditivní skládání barev ●

●

Výslednou barvu získáme pomocí přidávání barevných složek. Příklad: Máme baterku s červenou žárovkou a baterku se zelenou žárovkou. Posvítíme-li oběma baterkami na bílou zeď (ta odráží celé barevné spektrum), dostaneme žlutou barvu (za předpokladu stejné intenzity světla z obou baterek).


Subtraktivní skládání barev. ●

●

Výslednou barvu dostaneme odebíráním částí barevného spektra od bílé. Příklad: položíme-li na sebe žluté a modrozelené (cyan) průhledné sklo a posvítíme na něj bílým světlem, bude výsledná barva zelená.


Barevný systém RGB ●

Celé barevné spektrum se dá rozložit do tří složek – červené, zelené a modré. ●

●

●

Což ovšem neznamená, že mícháním těchto složek dostaneme všechny barvy barevného spektra.

Monitory počítačů mají červené, zelené a modré krystaly – výsledného barevného vjemu na obrazovce dosáhneme různou intenzitou osvětlení (vyzařování) konkrétních krystalů. Používá se tedy aditivní skládání barev. ●

Přidáním všech složek získáme bílou barvu.


Barevný systém RGB Každá barevná složka může mít intenzitu v rozsahu jednoho byte. 1byte = 8bit 1bit může nabývat hodnot 0 nebo 1. Kolik úrovní intenzit máme k dispozici?

●

● ● ●

–

Celkem máme k dispozici 28 = 256 úrovní intenzity


Barevný systém RGB Celkový počet barev v systému RGB je 3 256 =16777216

●

– ●

Této barevné hloubce se také říká TrueColor.

Na některých zařízeních se používá nižší barevné hloubky – HighColor –

5bitů pro červenou složku, 5 bitů pro zelenou složku a 6 bitů pro modrou – dohromady 65536 různých možností.


Šestnáctková soustava. ● ●

Používá se pro zápis barev nejen v HTML. Má na rozdíl od dekadické navíc číslice A, B, C, D, E, F –

každá pozice v čísle tak může nabývat šestnácti hodnot v rozsahu 0 .. F zapisují se ve tvaru 0xA3

– – 0xA3C=10×162 3×161 12×16 0 =10×2563×1612×0=2620 – 0xFF=15×161 15×16 0=15×1615×1=255 – 350 /16=21 zbytek 14  E ,21/16=1 zbytek 5,1/ 16=0 zbytek 1 – 350=0x15E


Hexadecimální zápis barvy. barvu je možno zapsat pomocí šestice hexadecimálních číslic: #FFFFFF pro bílou, #FFFF00 pro žlutou, #FF0000 pro červenou.

●

–

Jedná se o starší způsob, nově se v CSS zapisuje barva také například rgb(255,255,0) pro žlutou.


Barevná paleta. ●

●

Ve starších formátech obrázků se používá omezené množství barev – 256. Tyto jsou vybírány z celé barevné hloubky TrueColor. Adaptivní barevná paleta je vytvářena na základě původní barevnosti obrázku tak, aby byla zachována co nejbližší podobnost.


Barevný systém CMYK ● ●

●

●

●

Používá se na tiskárnách. Jedná se o systém se subtraktivním skládáním barev. Základní barvy jsou cyan (modrozelená), magenta (fialová) a yellow (žlutá). „K“ je pro černou (blacK). V CMYK existují barvy, které neexistují v RGB. V RGB existují barvy, které neexistují v CMYK. ●

Vytištěný obrázek se může barevně lišit od reprezentace na monitoru


Grafické formáty pro WWW ●

●

Pro vkládání obrázků do WWW stránek se používají pouze následující formáty –

Graphics Interchange Format (GIF)

–

Joint Photo Expert Group (JPEG)

–

Portable Network Graphics (PNG)

HTML 5 přináší vektorový formát SVG

Ivo Peterka, FHS UK 24.10.2011

Graphics Interchange Format ●

●

Vznikl v osmdesátých letech dvacátého století (firma Compuserve). Byl určen pro přenos obrázků po pomalých linkách –

Programy umí pouze jednu 256-ti barevnou paletu pro obrázek. ●

Lze zobrazit i více barev najednou, ale málokdo tuto vlastnost podporuje – např. Mozilla Firefox takový obrázek naanimuje – po ukončení animace se správně zobrazí.


Graphics Interchange Format. –

Prokládání obrázků (je rozpoznatelný i když dorazí pouze část, postupně se zostřuje.)

●

Umožňuje průhlednost a animace.

●

Bezeztrátová komprese –

Dostanete přesně ten obrázek, který ukládáte (omezený jen co se týče počtu barev).


Graphics Interchange Format. ●

Po delším používání se firma Unisys přihlásila k patentu na kompresní algoritmus použitý ve formátu (LZW). –

Bylo by potřeba platit licenci za každý SW pracující s GIF formátem (koncem devadesátých let se na internetu objevila akce „Burn all GIFs“).

–

V současné době již platnost licence vypršela.


Portable Network Graphics ●

Vznikl jako reakce na omezenou použitelnost GIF formátu díky patentu.

●

Neobsahuje žádné patentované technologie.

●

Je modernější.

●

Pracuje s TrueColor barevnou hloubkou.

●

Neumí animace.

●

Umí průhlednost.

●

Také používá bezeztrátovou kompresi. Ivo Peterka, FHS UK 24.10.2011

Joint Photo Expert Group ●

Používá ztrátovou kompresi –

Velmi účinná (několikanásobně vyšší komprese oproti PNG nebo GIF).

–

Ve výsledku žádný bod znovuotevřeného obrázku nemusí mít stejnou barvu jako originál.

–

Vhodný pro fotografie (i když ne pro vědecké).

–

Nevhodný tam, kde se vyskytují v obrázku ostré hrany, nebo při potřebě naprosté věrnosti obrázku.


Scalable Vector Graphics ●

●

Obrázek není popisován jako seznam barevných bodů, ale pomocí různých tvarů (čáry, kružnice, křivky) – dá se bez problémů zvětšovat a zmenšovat K jednotlivým částem SVG se dá v HTML přistupovat pomocí javascriptu


Více o formátech ●

http://www.root.cz/serialy/graficky-format-gif/

●

http://www.root.cz/clanky/jpeg-kral-rastrovych-grafickych-formatu/

●

http://www.libpng.org/pub/png/

●

http://www.w3.org/Graphics/SVG/

●

http://www.root.cz/clanky/vektorovy-graficky-format-svg/


Barvy a barevné systémy Formáty obrázků pro WWW

Recommend Documents