Obrázky

Najväčšie percento obsahu webstránok, systémov a aplikácií je tvorené textami a grafikou. Text sám o sebe je len obsahom nejakého textového súboru, nie je to samostatný súbor a sám o sebe je to jednoduchý typ dát, s ktorým nie je veľmi čo robiť. Je možné ho formátovať v daných textových súboroch (v editoroch), toto formátovanie sa však neprejavuje pri kopírovaní do kódu webstránky. Pri vkladaní textu do webstránok je v kóde len text, jeho grafický vzhľad je možné meniť len pomocou CSS. Takmer úplne opačne to je v prípade grafiky.

Medzi grafiku patria všetky obrázky, fotky, ikony, logá, pozadia...jednoducho všetko, čo sa považuje sa grafický súbor. To je hlavný rozdiel oproti textu, grafický objekt je samostatný súbor, ktorého typ je vo väčšine definovaný svojou príponou ako napríklad jpg, bmp, png, svg a podobne. To znamená, že súbor ako taký nie je vo väčšine možné meniť (zmenšovať, zväčšovať, meniť farby a pod.) počas programovania. Grafické objekty je dobré mať predom pripravené v takej podobe, v akej sa majú objaviť vo výslednom produkte. Keďže je táto téma dosť dôležitá a špecifická, preberieme si nejaké základné informácie o grafike.

Sú dva typy obrázkov a to rastrové a vektorové. Rastrové obrázky sa vyznačujú tým, že obsahujú v sebe (v súbore rastrového obrázka) dáta o každom pixely, v podstate farbu každého jedného pixelu. Viete, že obrazovka (monitor, displej...) má nejaké rozlíšenie, ktoré sa údava v pixeloch. Pixel je najmenšia zobrazovacia časť, môžete si to predstaviť ako jednu malú bodku (v podstate štvorček). Obrázok s rozlíšením 200x100 pixelov je v podstate 100 riadkov (výška) a 200 stĺpcov pixelov (šírka)., čiže dokopy to je 20 000 pixelov. V súbore rastrového obrázka je teda uložená info o každom z týchto pixelov, ktoré dokopy tvoria jeden celok – výsledný obrázok.

Vektorový obrázok je niečo úplne iné. Matematické definície popisujúce vektor si nejdeme vysvetľovať. Pre nás je dôležité to, že takýto súbor v sebe neobsahuje informácie o každom jednotlivom pixely, ale obsahuje akokeby matematický popis obrázka. To znamená, že obsahuje info o krivkách, o čiarach, o ich smere, uhloch, veľkosti, farbe atď. Pri rastrovom obrázku bol obrázok jednoducho zložený z istého počtu pixelov, ktorý nesie svoju farbu, tu sú to matematické objekty, ktoré spolu tvoria výsledný obrázok. Na čo je to ale dobré? Ak by som vám vedľa seba dal dva tie isté obrázky rovnakej veľkosti a jeden by bol rastrový a druhý vektorový, nevideli by ste žiadny rozdiel. Ich rozdiel sa prejavuje najmä pri ich editácii.

Predtým ale musíme pochopiť ešte jednu dôležitú vec. Obrázok má svoje rozlíšenie, my sme si povedali že bude mať rozmer 200x100 pixelov. To, že šírka má 200 jednotiek a výška 100 hovorí o tom, že tento obrázok má veľkosti strán v pomere 2:1. To znamená, že má 2 krát viacej jednotiek jeho šírka ako výška. Tento istý pomer spĺňajú rozmery 2x1, 20x10, 40x20, 800x400 atď. Ak má obrázok rozlíšenie napr. 640x480, jeho pomer zistíme vykrátením čísel (ako sme sa to učili v matematike) až do základného tvaru. To znamená, že tieto čísla delíme spoločným deliteľom, kým sa dá. V tomto prípade sú obe čísla deliteľné napríklad číslom 10, tak ich najprv predelíme týmto číslom. Dostaneme 64x48. Oba sú deliteľné dvojkou, lebo končia párnym číslom, takže delíme kým sa dá postupne na 32x24, 16x12, 8x6, 4x3. Čísla 4 a 3 nemajú spoločného deliteľa, takže sme zistili, že rozmer 640 na 480 je v pomere štyri ku trom. Nebojte sa, nie je nutné, aby ste vedeli zisťovať pomer, ide o to, len aby ste vedeli, čo to asi je...

Spomenuli sme si to preto, pretože najčastejšia operácia s obrázkom pre dosiahnutie finálnej podoby potrebnej pre web je menenie rozmerov. Zmena rozmerov obrázka sa dá vykonať tromi operáciami a to orezaním, zmenšením a zväčšením. Orezanie sa dá predstaviť ako keby ste mali fotku vytlačenú na papieri a chcete z nej orezať/odstrihnúť nejakú časť. Napríklad nejakú časť zo spodu, z boku, z obidvoch strán alebo orezať ju okolo (zo všetkých strán). Toto isté sa deje pri orezávaní aj v počítači. Pri rastrovom obrázku sa daná časť (pixely) oreže – vymaže zo súboru a stratíme info o daných pixeloch. V prípade vektorového obrázka je orezanie to isté, namiesto info o pixeloch sa stratia matematické údaje o danej časti. Pri orezávaní musíte myslieť na to, že môžete zmeniť pomer strán. Na čo je to potrebné? Ak viete, že na stránke budete potrebovať pozadie, ktoré musí presne vypĺňať div o veľkosti 200x100 pixelov, pri orezávaní musíto dodržať tento pomer, aby vám to sedelo. Ak má váš originálny obrázok ten istý pomer a vy napríklad orežete z jednej bočnej strany, musíte následne orezať príslušnú čiastku k tomu aj zhora alebo zdola, aby vám sedel pomer. Čiže ak máte obrázok 400x200 a orežete 100 zhora a zdola (dostanete 200x200), musíte orezať aj dokopy 100 pixelov z oboch strán, inak ste zmenili pomer (aby ste dostali 200x100). V opačnom prípade, že nemáte správny pomer/rozmer, aký potrebujete, orezaním ho práve viete rýchlo dosiahnuť. Povedzme, že náš pôvodný obrázok má 300x100 pixelov. Aby nám sedel do divu s rozmermi 200x100, musíme zhora a zdola dokopy orezať 100 pixelov, aby sme dostali žiadaný pomer.

Pri zmenšovaní, podobne ako pri zväčšovaní, máme dve možnosti a to zmenšovať v zachovanom pomere alebo tento pomer porušíme. Majme obrázok 200x400 na ktorom je zobrazená tvár človeka. Výška 400 je príliš veľká, chceme tento obrázok zmenšiť. Ak zmenšíme len jeden rozmer, to znamená výšku napríklad na 300, čím dostaneme výsledný rozmer 200x300, náš obrázok už nebude mať pomer 1:2 ale 2:3. Tým sme ho akokeby navýšku stlačili, takže tvár na obrázku bude stlačená – nereálna. Toto nastave vždy, ak sa rozmery obrázkov neupravujú v pomere. Aby sme zmenili rozmer obrázka a zachovali pomer, musíme vždy o príslušnú časť zmeniť aj druhý rozmer. Grafické programy majú často túto možnosť zaškrtnutú (aktivovanú) a pri zmene jedného rozmeru automaticky zmenia aj druhú, aby sa zachoval pomer.

Poďme ale k samotnému zmenšovaniu. Čo sa deje pri rastrovom obrázku pri zmenšovaní? Ako sme si povedali, obrázok je zložený z pixelov – z malých štvorčekov, kde každý nesie nejakú farbu. Pri zmenšovaní sa v podstate zmenšuje počet týchto štvorčekov. Predstavte si časť obrázka 2x2 pixely (štyri štvorčeky vedľa seba v štvorci 2x2), kde každý z nich má nejakú farbu. Pri zmenšovaní obrázka sa z týchto štyroch štvorčekov stane napríklad jeden, ktorý bude niesť farbu, ktorý bude podobná každej z tých štyroch, niečo ako priemerná farba z pôvodných štyroch štvorčekov. Určite chápete, že ak budeme takto zmenšovať príliš, tak kvalita obrázka sa mení – v podstate zhoršuje, pretože sa strácajú detaily.

Takisto sa zhorčuje kvalita, keď sa snažíme tento obrázok zväčšiť. Pri zväčšovaní sa deje niečo opačné, čiže z jedného štvorčeka sa snažíme spraviť 4, ale každému musíme určiť nejako farbu. Programy opäť tú farbu rátajú automaticky na základe farieb susedných pixelov. Dostaneme takto dosť reálnu zväčšeninu, obrázok ale nie je ostrý a neobsahuje ostré detaily, pretože program nemá skade vedieť, kde má akú presne farbu použiť, aby to bolo ostré a podobne. Určite ste sa s týmto stretli, že ste niekde použili príliš malý obrázok, ale nejaká stránka sa ho snažila zobraziť zväčšený a výsledný obrázok bol neostrý, rozmazaný, kockatý a podobne. Stáva sa to napríklad pri nastavovaní profilových fotiek na rôznych portáloch. Toto je dôvod, prečo to tak je. Ak máme jednoducho fotku v istom rozmere, tak pri zmenšovaní je tá kvalita ešte ako tak dobrá a nie je to veľmi pri zmenšeninách vidno, ale pri zväčšovaní je to viditeľné až až. Samozrejme, ak zmenšujeme obrázok len o trocha, to znamená z 400x200 napríklad na 360x180, tak ten rozdiel v kvalite a ostrosti taký veľký nebude. Ak však zmenšíme niečo z 4000x200 na 40x20, bude to jedna machuľa. Štandardné zmenšovanie fotiek, napríklad z rozmeru z foťáka/mobilu na nejaký stredne veľký rozmer pre weby (640x480 a podobne) nespôsobí takú stratu kvality, aby to bolo nerozoznateľné. Avšak, je to viditeľné voľným okom. Pri zväčšovaní je to úplne zlé, preto by sa zväčšovanie ani nemalo používať, je to len horšie. V tomto prípade je lepšie okolo obrázka nechať prázdnu plochu alebo to niečím vyplniť, aby bol obrázok v pôvodnej kvalite.

A ako to je s vektorovými obrázkami? Tu je ich pravá výhoda, pretože ich kvalita sa pri zmenšovaní a zväčšovaní nemení, ostanú stále kvalitné/ostré. Ako je to možné? Ako sme si povedali, grafika vytvorená vektorovo je súbor matematických rovníc, ktoré popisujú krivky, farby, smery, uhly a všetko možné. Takže pri zväčšovaní alebo zmenšovaní sú tieto rovnice zachované, iba sa mení veľkosť popisovaných objektov, ktoré sú určené týmito rovnicami. Ak nerozumiete časti matematiky o geometrii, resp. o rovinných útvaroch, o rovniciach priamky a kriviek a podobne, tak tomu pravdepodobne ani nepochopíte, ako to funguje. Ale to vôbec nevadí, pretože to ani nemusíte chápať :-D Ide o to, aby ste vedeli, že vektorový obrázok je akokeby stále pekný, aj keď ho zmenšíme, aj keď ho zväčšíme o hocijako veľkú časť. Pri rastrových obrázkoch na to treba myslieť, že akonáhle meníme rozmer, kvalita sa stráca.