Jak se počítač kouká na obrázek

Na JuniorInternetu 2001 bylo několik zajímavých přednášek. Jednu z nich měli i sourozenci Deutschovi, kteří jsou autoři stránky pro děti Mozaika.

     Už více než rok děláme stránku Mozaika, kde můžete najít spoustu zajímavých věcí, ale hlavně je zaměřena na obrázky, které malujeme v různých programech a začali jsme vystavovat i obrázky našich kamarádů, se kterými jsme se na Internetu seznámili. Pro ně jsme vytvořili “Virtuální galerii”, protože jsme se chtěli dozvědět, jak kreslí ostatní děti. Pokud byste chtěli do naši galerie přispět nějakým obrázkem, můžete je poslat na e-mail: mozaika.deu@seznam.cz . Na Virtuální galerii se můžete podívat na adrese: www.mozaika.hyperlink.cz.
      Letos jsme se zúčastnili 2. ročníku konference Junior Internet s přednáškou o webové grafice. Co jsme tam přednášeli, bychom vám chtěli přiblížit v tomto článku.

JAK SE POČÍTAČ KOUKÁ NA OBRÁZEK

     Počítač vnímá vše, co mu zadáte, třeba kliknutí na klávesnici, jako elektrický impuls, který prochází integrovanými obvody v mikroprocesorech rychlostí světla, tj. 300 000 km/s, a přitom zapíná nebo vypíná elektrické spínače např. na grafické kartě na základní desce.
     To”zapínání” a “vypínání” se dá vyjádřit dvěmi čísly “jedničkou” a “nulou”, kterým počítač rozumí a ví, jak má elektrické spínače nastavit. Říká se tomu binární soustava, tj. počítání pouze s dvěmi čísly – jedničkami a nulami. BIT je jednotkou informace, odpovídající pouze jedné ze dvou binárních číslic. Když spojíme 8 jedniček a nul vznikne 1byte(bajt), ve kterých jsou v počítači uchovávány všechny instrukce, čísla, písmena, znaky a barvy.

     Barvy.
     Všechny barvy na webové stránce jsou tvořeny kombinací červené, zelené a modré, v barevném formátu RGB, což je nejčastěji používaný formát na webu.
     Každý viditelný bod (pixel) barevné obrazovky se skládá ze tři vzájemně blízko ležících bodů – červeného, zeleného a modrého. Kombinací intenzity jasu těchto tří barev lze získat jakoukoliv barvu.
     Intenzita jasu jednotlivých barev se dá nastavit od 0-255. Například, když hodnota červené je 255 a zbylé dvě barvy mají nulovou hodnotu, bude výsledná barva (jak jinak..J ), než červená.Když všechny barvy dosáhnou své nejvyšší hodnoty je výsledná barva bílá, a naopak když nebudou mít žádnou hodnotu bude barva černá. Výsledná barva však hlavně záleží na tom, jak kvalitní máte monitor, scanner nebo tiskárnu.

     ROZDÍLY MEZI VEKTOROVOU A RASTROVOU GRAFIKOU

     Vektorové malování
     Vektorové obrázky jsou složeny z geometrických útvarů – objektů, které se skládají na sebe. Jsou to například elipsy, kruhy, čtverce, obdélníky, čáry a některé další. Vektorové objekty můžeme zvětšovat i zmenšovat, kopírovat, slučovat, bez ztráty kvality obrázku. S jednotlivými objekty můžeme libovolně manipulovat. Můžeme je např. přesouvat, měnit barvu, otáčet, deformovat apod.
     Pokud budete chtít dát obrázky na web, musíte je exportovat do rastrových formátů, o kterých se budeme ještě zmiňovat. Vektorové programy, ve kterých můžete namalovat pěkné obrázky jsou například: Corel Draw, Zoner Callisto, Adobe Illustrator.

     Rastrové malování
     Rastrové obrázky se uchovávaní jako bitové mapy, které jsou složeny z velkého množství jednotlivých obrazových bodů. Každý bod obsahuje informaci o své barvě a barevné hloubce, to znamená, kolik barev je v jednom bodu obsaženo. Záleží i na tom, kolik jich umí váš monitor zobrazit nebo na kolik barev ho máte nastavený. Počítač se na krásný obrázek dívá jako na kombinaci jedniček a nul, je pro něj důležité, že bity a bajty v bitové mapě určují, jakou barvu má mít každý z pixelů, který tvoří obrázek. Počítač pak převede barvy uložené v bitmapě do formátu, který mu nastavíte.
     Rastrové programy: Paint Shop Pro, Photo Paint, Adobe Photoshop, Paint Brush ad.

     GRAFICKÉ FORMÁTY JPG A GIF

     GIF
     GIF je populární formát pro bitmapové obrázky pro webové stránky. Umožňuje ukládat průhledné a animované obrázky, lze ho uložit i tak, aby se zobrazoval prokládaně, to znamená, že se obrázek zobrazuje postupně v hrubém náhledu, a pak se doplňují detaily. Tento formát se na Internetu velmi používá a je vhodný zejména pro ikony, schémata a podobné (málobarevné) obrázky. Obrázek může obsahovat 2 až 256 různých barev. Používaní tohoto formátu je ale omezeno licenční smlouvou. Každý výrobce grafického softwaru používající formát GIF musí získat od společnosti CompuServe licenční souhlas a platit za každou prodanou kopii programu. Formát používá bezztrátovou kompresní metodu. Je to komprese informace, při níž nedochází k žádným změnám v komprimovaných datech. Tato komprese je vhodná na jemnou přesnou grafiku – texty, tlačítka.

     PNG
     Formát PNG byl vytvořen jako náhrada za formát GIF, má mnoho vlastností tohoto formátu a ještě je možno nastavit barevnou hloubku jako u formátu JPG. Na webu je bohužel velmi málo rozšířen.

     JPG
     JPG byl vyvinut společnosti C-Cube Microsystem pro ukládání obrázků s velkou barevnou hloubkou. Tyto obrázky jsou typické četnými jemnými nebo náhlými barevnými přechody. JPG používá ztrátovou kompresní metodu. Je založena na nedokonalosti lidského oka, které je schopno tolerovat některé změny v obraze, za účelem vysoce účinné komprese. Výsledný obrázek nebude už nikdy stejný jako původní. Je dobré vědět, že JPG je vždy ztrátový a to, i když nastavíte kvalitu na hodnotu 100 (nedáte žádnou kompresi).Barevná hloubka je až 16,7 milionu odstínu barev. Formát je vhodný pro fotografie a jiné obrázky s barevnými přechody.

     PRAVIDLA A RADY PRO UKLÁDÁNÍ OBRÁZKU NA WEBU

     Hlavním pravidlem pro webové stránky je velikost stránky, optimální velikost jedné zobrazované stránky je 40 kB. Vyhněte se velkého množství obrázků na jedné stránce, a když musíte mít více obrázků, tak se snažte zmenšit velikost jednotlivých obrázků na maximum bez ztráty kvality a použitím správného formátu.
     Při vkládání uvádějte parametry <HEIGHT>, tj. výšku, a <WIDTH> šířku obrázku, značně tím urychlíte načítání stránky. Browser totiž ví hned od počátku kolik místa má pro obrázek vymezit a nemusí se ptát vzdáleného serveru, ze kterého stránku stahuje.
     Důležitý je i tag <ALT> neboli popisek k obrázku. Některý uživatel může totiž mít ve svém prohlížeči vypnuté “zobrazování obrázku”, a proto mu popisek usnadní orientaci na stránce s vypnutými obrázky, a pokud ho popisek naláká, může si zobrazování zase zapnout, aby se na obrázky podíval.
     Dalším pravidlem je uložení obrázku na stejném serveru jako celou stránku, nic tak nezdrží načítání obrázku, jako když se musí stahovat z jiného místa, než je vlastní stránka.
     Pokud potřebujete zobrazit moc veliký obrázek, který by zabíral zbytečně moc místa odjinud, dejte na něj odkaz a upozorněte na to uživatele. Ten se pak sám rozhodne, jestli se do stahování třeba několika megabajtového obrázku pustí nebo ne.
     Některé grafické vodorovné proužky můžete nahradit tagem <HR>, který přidáním dalším atributů (vlastností tagu), dokáže vykouzlit docela ucházející náhradu. Také použitím kaskádových stylů můžete vytvořit třeba efektní stínovaný text.