Grafika v HTML

1. Grafika v HTML Ekonomická Univerzita Fakulta podnikového manažmentu Katedra informačného manažmentu

2. Obrázky v HTML • Jazyk HTML používa tri hlavné grafické formáty: • Formát GIF • Formát JPG, JPEG • Formát PNG

3. GIF • GIF = Graphics Interchange Format • Pochádza od firmy CompuServe z roku 1987. Vznikli dva základné varianty tohto formátu. • Základnou vlastnosťou je spôsob ukladania farieb. Neukladá priamo farbu jednotlivého bodu, ale používa nepriame vyjadrenie farby pomocou tvz. Palety farieb.

4. Paleta farieb je tabuľka, kde je ku každej farbe priradené číslo. • Zápis v súbore má tvar: „Tento bod je zafarbený farbou 3,ďalší farbou 5...“ • Samotná paleta je tiež obsiahnutá v súbore.

5. Používa komprimáciu pomocou algoritmu LZW firmy Unisys. Algoritmus nahradzuje opakujúce sa sekvencie bitov kratším kódom – čím častejšie je opakovanie danej postupnosti, tým kratší kód sa snaží zvoliť. • Z uvedeného vyplýva, že súvislé plochy farieb sú v GIF obrázku dobre komprimované a zväčšenie jednofarebnej plochy veľkosť výsledného súboru veľmi neovplyvní.

6. Dôležitou vlastnosťou formátu GIF je možnosť definovať priesvitnosť. Po zadefinovaní jednej z farieb na priesvitnú sa pri zobrazení vynechá. Podkladová plocha bude cez ňu presvitať.

7. Ďalšou významnou vlastnosťou GIF je možnosť animácií.

8. Výhody: • Vhodný na ostré prechody medzi farbami • Efektívna komprimácia, jednofarebné plochy zaberajú málo miesta • Vhodný pre malé obrázky • Umožňuje definovanie počtu farieb • Umožňuje priehľadnosť, prekladanie a animáciu Nevýhody: • Maximálny počet farieb je 256 • Slabý v plynulých prechodoch farieb

9. JPEG • V porovnaní s GIF má dve základné odlišnosti: • Počet farieb. JPEG umožňuje ukladať plnú grafickú informáciu na jeden bod. Preto je vhodnejší na ukladanie fotografií. • Stratovosť. Pre dosiahnutie lepšej kompresie je pôvodná grafická informácia pozmenená.

10. Dôležité: K strate grafickej informácie dochádza pri každom uložení obrázku. t.j. Formát nie je vhodný pre prácu. Výhodnejšie je uložiť si až finálnu verziu.

11. Výhody: • Vhodný pre ukladanie fotografií • Ukladá plnú farebnú informáciu • Nastaviteľná kvalita • Nevýhody: • Stratovosť/skreslenie • Nemožnosť nastavenia priehľadnosti a tvorby animácií • Neefektívny pre jednofarebné plochy a ostré prechody farieb

12. PNG • Formát PNG (PORTABLE NETWORK GRAHICS) vznikol v polovici roku 1997. Mal odstrániť nedostatky a problémy GIF (obmedzený počet farieb a patentovaný komprimačný algoritmus). Vznikol pod záštitou konzorcia WWW. • V použití farieb je veľmi univerzálny. Je možné použiť v ňom indexovanú farbu, alebo uložiť obrázok ako monochromatický alebo s plnou farebnou informáciou.

13. Používa kompresný mechanizmus delflate, ktorý je veľmi podobný algoritmu LZW použitému v GIF. V niektorých prípadoch môže byť efektívnejší. • Problém môže spôsobiť použitie formátu starším Browserom, ktoré ho dokážu zobraziť, ale nie pomocou štandartného tagu <img>. V takom prípade je lepšie použiť EMBED.

14. Výhody: • Nestratový formát • Plná farebná informácia - 24 bitov na jeden bod • Viac úrovní priehľadnosti a možnosť jej nastavenia pre každý bod • Nevýhody: • Menej známy formát, pomerne mladý • Nie je vhodný pre plnofarebné fotografie – výsledok býva veľký • Bez možnosti uloženia animácií

15. Obrázky v HTML • Jazyk HTML umožňuje vkladanie obrázkov do dokumentu pomocou príkazu <img> Základný syntax <img src=“cesta k súboru”>

16. Atribút “src” oznamuje prehliadaču, kde sa dokument nachádza. • Príkaz <img> chápe prehliadač ako akýkoľvek iný príkaz pre napísanie textu. To znamená, že obrázok nie je nijak osadený, ani umiestnený do iného odstavca.

17. Pokiaľ za sebou nasleduje viacero príkazov <img>, a medzi nimi nie je žiaden iný tag ako napr. <P> alebo <BR>, sú obrázky znázornené vo výslednom HTML dokumente vedľa seba, ak je na to dostatok miesta.