Progessive JPEG

1.1.1.  Progessive JPEG

Je novým rozšírením normy JPEG. Rozšírenie spočíva v tom, že obrázok sa vykresľuje s postupne sa zlepšujúcim rozlíšením. Je to vhodné hlavne pre svet internetu, kde máme na obrazovke rýchle základný hrubý náhľad obrázku a po dlhšej dobe i skutočný obrázok v plnom rozlíšení. Súbory Progressive JPEG sú trochu väčšie ako bežné JPEG, pretože sú u nich uložené informácie o postupnej aproximácii.

Tento formát bol vytvorený v období pochýb o existencii formátu GIF, pretože na rozdiel na neho má deklarovanú voľnosť šírenia. PNG používa rovnako ako GIF nestratovú kompresiu a vie takisto obrázky s 256 farbami. Okrem toho je možné vo formáte PNG uložiť aj grafiku v pravých farbách /až 16,7 miliónov farieb/.

Zaujímavou vlastnosťou formátu PNG je to, že podobne ako GIF umožňuje postupnú aproximáciu zobrazenia. GIF poskytuje riadkovú aproximáciu, PNG opticky priateľnejšiu štvorcovú aproximáciu.

Použitie PNG však zatiaľ nie je veľmi rozšírené, lebo nie všetky prehliadače tento formát podporujú a všeobecne používané kombinácie formátov JPEG a GIF poskytuje dostatočné výsledky.

Scalable Vector Graphics je vektorový formát, ktorý využíva XML syntax. Obrázok sa skladá zo základných grafických elementov ako úsečka, kružnica, text, atď. Môže byť uložený v samostatnom súbore alebo priamo ako súčasť stránky v XHTML. Na vytváranie obrázkov vo formáte SVG je potrebné rozšíriť vektorový editor o modul s exportom do SVG. Formát nie je veľmi rozšírený, lebo zatiaľ nemá podporu prehliadačov, ale v budúcnosti sa predpokladá jeho časté využívanie, najmä vďaka tomu, že obrázky uložené v tomto formáte sú definované textom a preto sú podstatne menšie.

Ako som už spomenul v kapitole 1, grafika sa vytvára v grafických editoroch. Dnes  existuje množstvo programov a utilít na vytváranie a úpravu grafiky. Medzi najznámejšie a najrozšírenejšie patria:

• Adobe Photoshop – vytváranie a úprava grafiky, množstvo funkcií pre optimalizáciu pre web

• PaintShop Pro – vytváranie a úprava grafiky, podobne ako Photoshop

• GIMP – voľne šírený editor na vytváranie a úpravy grafiky

• JPEG ReSizer – vhodný pre hromadné zmeny veľkosti JPEG s možnosťou orezania a kompresie

• XP Web Buttons – tvorba tlačítok

• XARA WebStyle – vytváranie grafiky pre webové stránky, tlačítka

Pri navrhovaní internetových stránok a aplikácií musíme brať do úvahy dva rôzne fakty: na jednej strane je snaha o vytvorenie pestrej a efektnej internetovej stránky a na strane druhej je snaha o minimalizáciu času potrebného na načítanie týchto stránok, vzhľadom na technické možnosti. Aj napriek neustálemu zvyšovaniu sa rýchlosti liniek ich zahltenie neklesá a tak sa ako priemerná prijateľná veľkosť stránky uvádza 100kB. To znamená, že ak odpočítame v priemere 50-70kB zdrojového kódu stránky (závisí na množstve textu) ostáva nám na grafiku 40kB. Preto je potrebné stále hľadať vhodnú cestu medzi množstvom použitej grafiky a veľkosťou stránky. A právu tu sa dostáva k slovu proces optimalizácie grafiky.

Optimalizácia je proces, ktorý zahŕňa všetky úpravy obrázku, ktoré vedú k maximálnej úspore objemu dát pri minimalizácii zmien jeho obsahu, tzn. zachovaní dobrej kvality obrazu, vzhľadom na jeho význam v aplikácii. Inými slovami sa dá povedať, že je to akési hľadanie správnych nastavení kompresie tak, aby bola veľkosť súboru čo najmenšia pri prípustnej strate kvality obrázku. Optimalizácia zahŕňa niekoľko činností:

-          nastavenie rozlíšenia

-          správna veľkosť obrazu: orezanie /croping/

-          farebná paleta

-          rozrezanie obrazu

-          zvolenie formátu a parametrov pre optimalizáciu kompresiu

Rozlíšenie (Resolution), viď Obrázky 1 a 2 – bod 2,  sa udáva v dpi (dots per inch), čo vyjadruje počet obrazových bodov na dĺžku palca (2,54  cm). Keďže webové stránky sa zobrazujú na monitoroch, ktoré majú rozlíšenie 72 dpi, stačí nastaviť rozlíšenie obrázku maximálne na túto hodnotu. V Adobe Photoshop sa podobne ako v PaintShop Pro, rozlíšenie nastavuje na úvodnej obrazovke pri vytváraní nového obrázku:

Pri nastavení veľkosti obrazu ide o nastavenie výšky a šírky, tj. vlastností „height“ a „width“ – viď Obrázky 1 a 2 – bod 1. Veľkosť obrazu závisí od úlohy, ktorú obrázok na stránke plní: tlačítko, fotografia, reklamný banner, logo, vzorka pozadia, atď. So zväčšovaním výšky a šírky rastie aj veľkosť obrázku - súboru - v MB, a preto sa budeme pochopiteľne snažiť o čo najmenší obrázok.

Ďalšou činnosťou pri optimalizácii grafiky pre web je orezanie obrázku – croping. Týmto nástrojom môžeme vystrihnúť určitú časť obrázku, na ktorú chceme upriamiť pozornosť návštevníka stránky. Často sa využíva pri spracovávaní fotografií, kde orezaním získame iba dôležitú časť a týmto zmenšením veľkosti obrázku môžeme dosiahnuť aj niekoľkonásobné zníženie veľkosti súboru.

Príklad: Pôvodný obrázok mal veľkosť 114 kB. V Adobe Photoshope som použil nástroj na orezanie a vybral som iba časť obrázku, ktorá ma zaujíma a okolie som odstránil. Získaný obrázok má 43 kB, teda takmer 3x menej ako pôvodný.