Príprava obrázkov

Dátový formát - Grafický program - Dátový objem - JPG - GIF - Prekladanie - Ďalšie formáty - Priehľadné obrázky - Animované gify - Odobratie obrazovky

Názor kocúra Ajčiho

Dátový formát

Obrázok je súbor. Na internete sa bežne používajú dva grafické formáty - *. jpg a *. gif. Stručne povedané jpg je lepšie na fotografie, gif na všetko ostatné.

Ako urobiť obrázok (pre začiatočníkov)

Ako sa napríklad dá získať obrázkový súbor:

Stiahnuť z webu pomocou príkazu uložiť obrázok ako (save image as) a uložiť na disk.
Nájsť niekde na disku alebo použiť zbierky obrázkov, ktoré sa dodávajú s niektorými programami.
Nakresliť si obrázok myšou v grafickom programe a uložiť to ako gif alebo jpg.
Vytiahnuť z digitálneho foťáku (potom je väčšinou potreba v gr. Programe zmenšiť).
Naskenovať a uložiť, aj v grafickom programe.
Sňať obrazovku z nejakého programu a upraviť v grafickom programe.

Inými slovami, možností je viac, ale cieľom musí byť súbor vo formáte. Gif alebo. Jpg Ten sa potom vloží do stránky .

Grafický program

Existujú ich stovky.

Ja používam program Paint Shop 8. Pre súčasné potreby webovej grafiky je takmer dokonalý, je trochu ťažšie, ale mne vyhovuje.
Adobe Photoshop sa dá tiež použiť, ale je drahšie, ide o profesionálny nástroj. Je zameraný na všeobecnú bitmapovú grafiku a nástroje pre web má skoro len ako doplnok. Príde mi ťažký na ovládanie, ale asi je to vec zvyku.
Microsoft PaintBrush (windowsovské Maľovanie) od verzie 2000 vie tiež ukladať do jpg a gif, ale pretože neumožňuje nastavovať kvalitu a má veľa obmedzení, pracuje sa s ním len v núdzi.
Ľudia si strašne chváli program Macromedia Fireworks , ja ho nepoznám.
Všetky vyššie spomenuté programy nie sú zadarmo. Asi najlepší bezplatný grafický editor je PhotoFiltre , dokonca má slovenčinu a slovenský návod na zložitejšie veci .
Na Linuxe kraľuje v grafických programoch Gimp (ktorý je zadarmo aj pre Windows ), jeho ovládanie však nie každému vyhovuje (trebárs ja si na neho nemôžem zvyknúť).
Ďalej existuje veľa polo-editorov, ktoré vedia napríklad len orezávať a optimalizovať, napr Ulead Transformer.
Prehliadače obrázkov umožňujú obrázky tiež zmenšovať, prefarbovať a orezávať (nie dokresľovať). Ja mám rád IrfanView (zdarma), to isté vie Picasa (zadarmo) a ACDSee.

Hlavným kritériom použiteľnosti editora je, či vie ukladať do jpg a gif. Takže treba program Maľovanie vo Windows 98 je na nič, ale novšie verzie Maľovanie už to vedia.

Dátový objem

Hlavné prikázanie webového grafika znie: obrázky sa nesmú dlho sťahovať, musia byť čo najmenšie. Preto sú gif aj jpg formáty kompresný.

forma	optimum	znesiteľné maximum
tlačidlo	2 kB	5 kB
pozadie stránky	2 kB	10 kB
reklamné baner	8 kB	25 kB
fotografie	20 kB	90 kb
zmenšenina fotky	5 kB	10 kB
ilustračný obrázok	10 kB	40 kB
obrázkový nadpis	3 kB	8 kB
diagram, komix		100 kB

Dávať na web obrázok väčší ako takých 100 kB je vcelku nezmysel, pretože sa na jednej obrazovke rovnako nemôže patrične zobraziť. Od roku 1999, keď som písal tento text, sa dátovo akceptovateľné limity trochu posunuli nahor, ale aj tak platí, že čím dátovo menší, tým lepšie (aktualizácia 2006).

JPG

Formát JPG (tiež JPEG) je vhodný pre ukladanie fotografií a obrázkov s veľkou farebnou hĺbkou. Jpeg neumožňuje robiť priehľadné alebo animované obrázky. Ukladá sa do súborov s príponou. Jpg alebo jpeg.

JPG používa stratovú kompresiu, to znamená, že časť informácie vypúšťa. Robí to tak, aby to ľudské oko pokiaľ možno nepoznalo. Miera tejto kompresie sa dá nastaviť v grafickom programe. Ale pozor, po každom znovuotvorenie a uložení sa opäť uskutočňuje kompresia, takže sa tým obrázok stále znehodnocuje. Je preto dobré mať predlohu uloženú v niečom disku a po každej úprave importovať do jpg.

GIF

GIF používa kompresiu, ale nestratovú, takže sú tie súbory relatívne väčšie ako JPG, ale zato sú presné (zachovávajú farby a kontúry). Môže sa v ňom vyskytovať maximálne 256 farieb. Jedna z farieb sa môže označiť ako priehľadná (tú prehliadač potom nezobrazí), gify tiež podporujú animácie .

Farebná hĺbka GIFu

Na internete záleží na každom bitu, a preto čím sú obrázkové súbory menšie, tým lepšie. Je zbytočné kódovať v gifu 256 farieb, keď používa napríklad len dve alebo štyri. Ak sa v grafickom programe zníži farebná hĺbka (počet farieb), podstatne sa ušetrí veľkosť súboru (u čiernobieleho súboru až osemnásobne). Postup pri znižovaní počtu farieb sa opäť líši od programu k programu. V angličtine je to zvyčajne príkaz "decrease color depht" alebo "export - bitmap".

Prúžkovanie

Z dátového formátu GIFu vyplýva zaujímavá vlastnosť: ak riadok bodov obsahuje len jednu farbu, veľmi sa šetrí dátový objem. Jednoduchý gif obsahujúce najmä farebné prúžky (a málo prechodov) sa teda uloží veľmi úsporne.

Prekladanie (progresívne vykresľovanie)

Pri ukladaní súborov JPG aj GIF sa dá nastaviť, či sa majú vykresľovať prekladane. Konkrétny postup pri ukladaní obrázku závisí na použitom editore. V anglických editoroch sa to volá "interlaced" alebo "progresive encoding".

Normálne sa obrázky vykresľujú po riadkoch zhora, ale keď sa nastaví toto prekladanie, tak sa najprv vykreslí zahmlené, ale celé. Ako postupne dochádzajú ďalšie dáta, tak sa zobrazenie spresňuje. Je to pekné.

Ďalšie formáty

Existuje "nový" formát PNG (Portable Network Grafics, prípona súboru. Png), ktorý by mal mať výhody gifu aj JPEG. Ale príliš sa nepoužíva, snáď pretože gif je lepšie na drobnú grafiku a na fotky je zase lepší jpg. Dnes (doplnené 2004) možno png bez obáv používať.

Prehliadače od verzie 4 v sebe majú podporu aj iných formátov; napríklad IE podporuje minimálne bmp. Ale taký bmp súbor rozhodne neodporúčam do stránok zaraďovať, pretože je veľmi veľký a prehliadače okrem IE ho rovnako čítať nevedia.

Prevažná väčšina netradičných grafických formátov potrebuje k svojmu zobrazenie plug-in, čo je podporný program prehliadača. Ak chcete umiestniť na stránku niečo veľmi divokého, musíte si na webe nájsť príslušný plug-in a užívateľom dať možnosť si ju stiahnuť. Obrázok potom nezadávať ako <img>, ale ako <object> alebo <embed> s odkazom na umiestnenie plug-inu.

Priehľadné obrázky

V grafickom editore môžete urobiť gif, ktorý bude mať niektoré časti priehľadné. Výhody sú tieto:

pod obrázkom sa môže vykresľovať pozadie
ak zmeníte farbu pozadia stránky, nemusíte sa o obrázok starať
pri použití animácií, a rôznych obtekaniach pôsobia farebné okraje obrázku rušivo.

Transparentnosti sa v každom grafickom editore robí inak, idea je taká, že sa vyberie jedna farba a tá sa nastaví ako priehľadná. Ako na to:

Znížte farebnú hĺbku najviac na 256 farieb, radšej menej.
Všetky oblasti, ktoré majú byť priehľadné, vyplňte nejakú farbou (odporúčam niečo kontrastného, treba fialovú, rovnako potom zmizne).
Túto farbu potom nastavte ako priehľadnú. Väčšinou na to existuje príkaz, ktorý dovoľuje ťuknúť na tú farbu. Ak máte anglický grafický editor, hľadajte príkaz, v ktorom sa vyskytuje slovo "transparent" (angl. priehľadný). Dosť často sa to robí až pri ukladaní obrázka (prípadne nejakým príkazom "Uložiť pre web" alebo "optimalizovať" alebo tak). V každom programe to je iné.
Uložte ako gif.

Skutočným problémom priehľadných gifov sú rôzne prechody a okraje plôch, ktoré obsahujú veľa prechodových odtieňov. Na inej farbe pozadí potom budú po okrajoch bodkované. Takéto obrázky odporúčam radšej dávať do jpg a transparentnosti oželieť.

Iným problémom môže byť to, že je potrebné sprehľadniť viac než jednu farbu. To nejde. Je potrebné všetky takéto odtiene previesť na jeden a ten spriehľadniť.

Keď sa priehľadné obrázky tlačia, namiesto priehľadnej farby sa netlačí nič. Keby bol pod obrázkom iný objekt (napr. pozicovanie), nevytlačí sa.

Polopriehľadné PNG

Obrázok vo formáte png môže mať niektoré oblasti polopriehľadné. Polopriehľadnosťou sa nastavuje v grafickom programe a obvykle je to o niečo ťažšie ako priehľadná farba. Hľadajte nejaký príkaz, ktorý pracuje s alfa kanálom.

Polopriehľadné obrázky dnes (2008) ešte nie je dobré na webe normálne používať, pretože medzi ľuďmi je stále ešte dosť rozšírený prehliadač Internet Explorer 6, ktorý polopriehľadnosťou pochopiť nevie a obrázok vykresľuje nepriehľadný. Existuje síce filter , ktorý vynúti polopriehľadnosťou aj Internet Exploreru 6, ale tento filter nie je možné používať na pozadí, pričom obrázok na pozadí nejakého prvku je to najčastejšie potrebné použitie polopriehľadného png. Internet Explorer od verzie 7 polopriehľadný png vie, ostatné prehliadače taky.

Animované gify

Formát gif dovoľuje poskladať v sebe niekoľko obrázkov a zostaviť z nich animáciu. Musíte na to mať nejaký špeciálny program, väčšinou sa to volá "bla bla Animator". V normálnom editore si pripravíte grafické sekvencie, ktoré v animátore poskladáte, nastavíte časovanie a uložíte do gifu. Animované gify sa v stránkach používajú úplne rovnako ako normálna gify, čo je fantastická výhoda.

Nevýhodou animovaných gifov je značná rušivosť pre čitateľa (takže sa používa prakticky len v reklamách) a niekedy aj dosť veľký dátový objem.

Sňatí obrazovky

Keď chcem urobiť obrázok z toho, čo mám na obrazovke, použijem klávesu Print Screen (hore nad insert). V tej chvíli sa do schránky vloží obrázok aktuálnej obrazovky (bez ukazovateľa myši). Ten sa dá potom vložiť do nejakého grafického programu príkazom Vložiť (Ctrl + V) a upraviť.

Skratka Alt + Print Screen sníme len aktívne okno. To je často dosť pohodlné, pretože sa to potom nemusí orezávať.