Formáty obrázkov

Určite ste sa spýtali, prečo potom nie je všetká grafika vo vektorovom formáte a bol by pokoj, mohli by sme meniť všetky obrázky ako sa nám zachce a na kvalite by sme nestrácali. Kiežby to tak bolo, život by bol jednoduchší, ale ako ja rád často odpovedám na otázky tohto typu, nie je to fyzikálne možné:-D Obrázok vo vektorovom formáte je v podstate možné vytvoriť len v špeciálnom programe na to určenom. Vektorový obrázok môže byť vytvorený v programe určenom na vektorové kreslenie (Corel Draw, Adobe Illustrator...) alebo v ňom bude nejakým spôsobom vygenerovaný. Druhým spôsobom myslíme zvektorizovanie obrázka, čo je proces, kedy sa z rastrového obrázka pokúsime vytvoriť vektorový. To vás ale nemusí teraz zaujímať, lebo to nie je ľahké a nie je to možné pri všetkých obrázkoch a za ďalšie, aj keď sa to podarí spraviť, výsledok nie je ani náhodou žiadúci.

 

Vy sa väčšinou stretávate len s rastrovými obrázkami. Také fotky sú typickým príkladom rastra, pretože snímač fotoaparátu funguje celkom rovnako ako princíp rastra, snímač si zapamätá o každom bode (pixely) isté údaje, ktoré vo výsledku vyústia do farby. A kedy sa teda používa vektorová grafika? Všade tam, kde je dobré mať grafiku pripravenú na to, že ju budeme používať vo viacerých veľkostiach, čiže kde ju bude nutné zväčšovať a zmenšovať podľa potreby a vykonávať s ňou zložitejšie grafické operácie. Typickým príkladom sú logá (webstránok, firiem...), časopisy, knihy, brožúrky, billboardy, bannery a podobne. Ďalším príkladom vektorovej grafiky, s ktorým sa stretávate neustále a ani ste o tom nevideli, je text. Všimli ste si, že keď tvoríte textový dokument v hocijakom editore, tak môžete zväčšovať/zmenšovať písmo ako len chcete a stále je ostré? To isté na webstránke alebo v PDF formáte? Je to preto, pretože text je v podstate vektor a aj text vo formáte PDF je vektor. Preto keď si zväčšujete/zmenšujete PDFko, tak text je stále čitateľný a aj niektorá grafika v ňom, pretože PDF podporuje vektorovú grafiku.

 

Medzi najznámejšie prípony vektorových súborov patrí eps, cdr (Corel Draw), ai (Adobe Illustrator), pdf a svg. Rastrové súbory, inak zvané aj bitmapy (bitmap – mapa bitov, mapou sa myslí mriežka – riadky a stĺpce bitov – pixelov), majú najčastejšie príponu bmp, tiff, jpg, gif a png. Podľa prípony súboru približne vieme, čo je to za súbor a aké vlastnosti má obrázok. V grafických programoch určených na rastrovú grafiku je možné obrázkom meniť tento formát. Vieme bez problémov obrázok JPG prekonvertovať na obrázok vo formáte PNG a podobne. Vo vektorových programoch vieme zase meniť prípony vektorových obrázkov, ale takisto vieme vektorový obrázok vyexportovať ako rastrový. Programy pre vektory sme už spomenuli, programy pre prácu s rastrovými obrázkami patrí napríklad Adobe Photoshop alebo Gimp (zadarmo).

 

Zo spomenutých formátov asi najviac poznáte jpg, čo je najčastejšie používaný formát pre fotografie, ale pozastavil by som sa ešte nad dvomi inými formátmi a to je gif a png. Určite poznáte vo väčšine malé grafické animácie ako smajlíky alebo nejaké iné akokeby krátke úseky videí. Tieto súbory nesú príponu GIF (Graphics Interchange Format – Formát meniacej sa grafiky) a je to v podstate súbor malých obrázkov, ktoré môžu mať maximálne 256 farieb, ktoré idú v rýchlom slede za sebou (čo je základný princíp animácie alebo videa). To je dôvod, prečo takéto krátke a malé (rozmerovo) animácie sú väčšinou zlej kvality, obraz je kockatý alebo zrnitý. Tento typ formátu sa používa ako už bolo spomenuté najčastejšie na rôzne malé animácie, na aktívne ikony (hýbajúce sa ikonky), ale najmä na reklamné bannery, kde napríklad preblikávajú nápisy a obrázky a podobne.

 

Druhý zaujímavý formát je PNG (Portable Network Graphic – prenosná sieťová grafika) a ako vyplýva z názvu, je to formát, ktorý bol vyvinutý najmä pre používanie na interente (vo webstránkach). Tento formát má dve výhody, pre ktoré je veľmi často používaný ako formát pre exportnutie nejakej vektorovej grafiky na rastrovú. Prvá dôležitejšia je, že tento formát používa bezstratovú kompresiu. Čo to znamená? Kompresia je všeobecne stláčanie/zmenšovanie/zmenšovanie objemu nejakého objektu. Tento proces sa používa aj pri práci s obrázkami, aby sa tak znížila ich veľkosť čo najviac. Ak tvoríte nejaký rastrový obrázok v nejakom programe, pri ukladaní/exportovaní grafiky máte na výber, aký druh, resp. akú silnú kompresiu chcete použiť. Čím väčšie kompresiu použijete, tým je obrázok menší, ale stráca aj na kvalite. Štandardné kompresie (pri JPG) nie je vidieť voľným okom, ale pri použití príliš veľkej kompresie alebo pri maximálnom zväčšení obrázka je to badateľné. Tento formát však používa takú kompresiu, kedy to nemá dopad na kvalitu.

 

Druhá výhoda, ktorú obľubujú najmä programátori, resp. grafici a webmastri, je to, že jeho pixely môžu byť transparentné (priehľadné/priesvitné). Čo to znamená? Každý obrázok je vo svojej podstate obdĺžnik, ktorý má dva rozmery (šírka a výška). Ak chceme mať obrázok napríklad v tvare kruhu, tak mimo tohto kruhu nechceme nič mať. Ak by sme to uložili ako JPG, okolo kruhu by sa vytvorila biela alebo šedá plocha, nie je možné v tomto formáte uložiť len daný kruh ako grafický prvok a okolo neho prázdno. Presne toto je ale možné pri tomto formáte, kedy daná grafika, resp. všetky pixely môžu, ale nemusia obsahovať nejakú farbu a teda nejakú grafiku (obrázok). Na webstránkach sa veľmi často používajú ikony, ktoré nie sú vždy obdĺžnikového tvaru a ich použitie je na rôznych druhov pozadia (rôzne farby). Preto je nutné, aby okolie grafiky, ktoré vypĺňa obdĺžnik, bolo transparentné.

 

Pre nás ako programátorov je teda dôležité vedieť tieto skutočnosti najmä pri umiestňovaní grafiky na web. Už vieme, že ak chce napríklad zákazník mať v pozadí obrázok veľký 1000x800 pixelov a poskytne nám obrázok 500x400 v rastrovom formáte, tak máme problém:-D Buď nám poskytne vektorový formát, väčší rozmer rastrového formátu alebo ho oboznámime so skutočnosťou, že tento obrázok bude zväčšený a bude teda rozmazaný. Takisto si vieme vypýtať od grafikov vektorové formáty tam, kde to budeme potrebovať, kde si ešte nie sme istý konečnou veľkosťou a podobne. A takisto aj obrázok s priehľadnosťou (PNG) na miesta, kde je to potrebné.

 

Okrem tohto je pre nás dôležitá aj veľkosť obrázkov. Samozrejme, čím väčší obrázok, tým väčšia veľkosť (pretože viac informácii o jednotlivých pixeloch). Vektorové obrázky sú vo väčšine väčšie ako rastrové a takisto je rozdiel vo veľkosti medzi obrázkami rovnakých rozmerov ale rôznych formátov ako JPG, GIF, PNG, SVG. A ešte aj ten istý formát a veľkosť môže mať rôzny veľkosť na základe kompresie. Veľkosť je pre nás dôležitá z dvoch dôvodov. Prvý je ten, že vo väčšine sú na webhostingoch obmedzené diskové priestory, takže ak naša stránka bude mať veľa galérií obrázkov/fotiek, ktoré budú nahodené v plnej veľkosti (napr. cez 3000 pixelov) a bude ich veľké množstvo, tento priestor sa nám zaplní a budeme si musieť zakúpiť viac priestoru, čo zvýši náklady na stránku. Druhý dôvod je, že čím väčšie obrázky sú umiestnené na stránke, tým sa dlhšie načítavajú pri loadovaní stránky a tým aj spomalujú načítanie webstránky. Preto pri práci s grafikou treba myslieť na tieto skutočnosti.

Máte nejakú otázku alebo Vám niečo nie je jasné? Napíšte nám na info@zacni-programovat.sk a poradíme!

Ťažko sa vám učí samému?

Máte problémy s niektorými časťami alebo sa neviete učiť sám? Využite našu možnosť individuálnej asistencie:

  • samostatný prístup
  • vysvetlenie nejasností prebraného učiva
  • úlohy a cvičenia navyše
  • všetko z pohodlia domova cez mail a skype

Pre viac info kliknite tu

Kľúčové slová prednášky

vektorovy obrazokrastrovy obrazokformaty obrazkovgraficke formatyjpgpngsvggifanimaciebannery

IT ftip

Jeden mladý muž hovoril: - Chcem byť veľkým spisovateľom. Pýtali sa ho: - A čo pre teba znamená veľký? Odpovedal: - To znamená, že chcem písať niečo, čo bude čítať celý svet, niečo, čo prinúti ľudí jednať emocionálne, niečo, čo ich prinúti jačať, kričať, šalieť a revať od zlosti, zúfalstva a bolesti! A teraz pracuje pre Microsoft a píše chybové hlášky.