Optimalizácia grafiky na world wide webe

Seminárna práca z predmetu HTML/XML
Peter Weisenbacher, šk . r. 2001/02


Obsah

Úvod
1. Prečo optimalizovať
2. Kde použíť grafiku
3. Formáty
4. Veľkosť a rozmery
5. Cropping
6. Farebná hĺbka
7. Anti-aliasing
8. Animované GIF súbory
9. Pozadia
10. Softwareové nástroje
Záver
Odkazy


Úvod

Optimalizácia grafiky na world wide webe, jej dôvody a možnosti, konkrétne formáty, rozlíšenie, cropping, farebná hĺbka, anti-aliasing, animované gif súbory a pozadia sú témou tejto seminárnej práce.
 

1. Prečo optimalizovať

Väčšina používateľov internetu pristupuje pomocou grafického browsera, ktorý zobrazuje nielen text (HTML formát), ale aj grafiku (JPEG, GIF alebo aj iné formáty) pričom táto je čo do objemu prenášaných dát mnohonásobne väčšia. Takisto sa dá povedať, že väčšina používateľov je stále obmedzovaná pomalým modemom pripojeným k pomalej linke za ktorú treba navyše (vo väčšine prípadov) platiť a to aj za čas keď sa tzv. "nič nedeje" a len sa na niečo čaká. Na druhej strane však na čoraz viacerých webovských stránkach sa vyskytuje čoraz viac grafiky-grafických súborov. Za následok to má neúnosné spomalovanie internetovej premávky. Zmiernenie tejto situácie ku spokojnosti oboch strán (používateľov aj webdesignerov-webmastrov) prináša optimalizácia grafiky na world wide webe, ako sa hovorí "aj vlk sa nažerie aj koza ostane celá" i keď v tomto prípade to tak celkom neplatí, tomu sa však konkretnejšie budem venovať neskôr. Cieľom optimalizovaného webu je-ako hovorí A. J. Flavell z Glasgowskej univerzity-"... best use of whatever combination of resources each different reader has at their disposal. That is the big difference between the concept of the WWW and most of the earlier concepts for making information available on the `net."
Optimalizácia totiž nechce niekoho v niečom obmedzovať, ale pri veľmi nízkej miere určitých obetí, sprístupniť obsah čo najširšiemu počtu potencionálnych používateľov-čo je koniec koncov v záujme hádam každého webmastra i toho, čo nikdy nepracoval na starom počítači s pomalou linkou a neaktuálnym softwareom a preto nepozná dôvody vedúce k optimalizácií z prvej ruky.
 

2. Kde použiť grafiku

Optimalizácia sa samozrejme týka už jestvujúcej grafiky o ktorej bolo rozhodnuté ju umiesniť na nejakú webovskú stránku. Dovolil by som si však, ešte skôr ako prejdem k samotnému procesu a forme optimalizácie, krátko upozorniť na ďalšiu veľkú kapacitnú rezervu týkajúcu sa webovskej grafiky. Jedná sa o zbytočné, bezpredmetné alebo prehnané používanie grafických prvkov na stránkach. Len s podivom prijímam, že ešte stále jestvujú stránky-servery, ktoré sú tak preplnené veľkými grafickými súbormi, že doslova odstrašujú väčšinu používateľov pričom existuje nespočetné množstvo priamych i nepriamych dôkazov, že používatelia opustia stránku ak sa už niekoľko málo sekúnd po pripojení (presný počet sa samozrejme rôzni) neobjaví aspoň aký taký obsah. Takisto je známy medzi odborníkmi viacmenej akceptovaný názor, že žiaden jednotlivý grafický súbor vložený do webstránky by nemal presiahnuť veľkosť 12 Kb.

Bolo by určite zaujímavé sledovať, pre aké grafické súbory by sa ten či onen webmaster rozhodol, ak by povedzme čisto teoreticky vedel, že 50% používateľov odstrašilo pridlhé čakanie,  alebo keby -znova čisto teoreticky- umiestnenie každého jednotlivého súboru musel vysvetlovať nejakej imaginárnej komisii dohliadajúcej na optimálne využívanie webu. Zdá sa však, že v skutočnosti ide o princíp veľkej kopy, ktorá si-ako je tomu napríklad pri nelegálnych skádkach za mestom alebo v lese-nejakým spôsobom pýta viac a každý okoloidúci prihodí svoj diel.
 

3. Formáty

Priemerná webstránka má veľkosť približne 10 Kb, pričom vložené obrázky môžu mať (a obvykle aj mávajú) niekoľko stoviek Kb. Z tohto dôvodu je jasné, že čo i len niekoľko percentná úspora na veľkosti obrázku zaváži. Základným krokom je výber vhodného grafického formátu do ktorého grafiku (obrázok, fotku, ikonu) uložíme. Vo svete osobných počítačov poznáme nespočetné množstvo viac či menej rozšírených (až po úplne proprietárne formáty) formátov, ktoré su viac či menej vhodné na tú či onú aplikáciu. Faktom však je,  že z praktického hľadiska sa na použitie v prostredí internetu hodia len formáty JPEG a GIF nakoľko ostatné nie su tak silno podporované. Dokonca formát PNG (Portable Network Graphic) o ktorom sa svojho času hovorilo ako o jednoznačnom internetovom formáte je v súčasnosti-možno na škodu veci-na okraji záujmu. Nemôžeme samozrejme vedieť čo prinesie budúcnosť a preto je možné, že aj formáty JPEG a GIF skončia na prepadlisku dejín podobne ako voľakedy hádam najrozšírenejšie formáty PIC A PCX.
Nateraz sa však zdá najrozumnejšie venovať sa práve JPEG a GIF formátom.

Formát JPEG je schopný uložiť grafickú informáciu obsahujúcu až niekoľko miliónov farieb (podrobnejšie v časti Farebná hĺbka) a preto bol primárne určený na ukladanie fotografii (pôvodne najmä naskenovaných ako šetrnejší pandant formátu TIFF). V súčasnosti na internete prevažuje a používa sa aj na rôzne "jednoduchšie" grafické prvky ako sú ikony, farebné okraje, hlavičky, nadpisy etc. V mnohých prípadoch je to čisté mrhanie nakoľko grafiky obsahujúce nižší počet farieb nie je nutné ukladať v tomto formáte.
Ak sa rozhodneme tento formát použíť (napr. na nejakú fotografiu) nesmieme zabúdať,  že ide o formát stratový to znamená, že za cenu úspory miesta sa stráca časť grafickej informácie a tým sa znižuje aj vizuálna kvalita súboru. Samozrejme je nutné dodať, že pri rozumnom a skúsenom používaní takúto zmenu ľudské oko vôbec nepozná. Aby tomu tak skutočne bolo, je ale nutné previesť grafiku do tohto formátu len raz , nakoľko strata sa pri každom uložení opakuje a teda zväčšuje, ak teda editujeme nejakú fotografiu, ktorú chceme uložiť na web počas editovania je vhodné ju mať uloženú v nejakom inom vhodnom formáte (napr. PSD, CPT, BMP, PCD, TIFF) a až po ukončení prekonvertovať na JPEG.

Formát GIF (Compuserve GIF) je schopný uložiť 1 až 256 farieb teda malé množstvo farieb. Vačšina grafiky tvorenej pre web (nie fotografie alebo iné zložité grafiky) profesionálnymi webmastrami alebo webdesignermi je uložená práve v tomto formáte nakoľko vedia oceniť jeho kvality. GIF obsahuje index farieb v ňom použitých pričom tento index nemusí a ani neobsahuje farby, ktoré v ňom nie su zahrnuté,  čo v praxi znamená, že čím menej farieb grafika obsahuje,  tým menší a úspornejší súbor sa dá vytvoriť. V praxi sa to uplatňuje najmä vo vzťahu k veľkým jednofarebným plochám. Najvhodnejší je tento formát pre: ikony, obrázky nakreslené na počítači a perovky. Formát GIF umožňuje aj animáciu,  tomu sa však venujem v časti Animované GIF súbory.
 

4. Veľkosť a rozmery

Na začiatok je nutné podotknúť, že veľkosť a rozmery grafiky na počítači nie je to isté. Každá grafika má totiž už danú implicitnú veľkosť, ktorá ale nie je udaná v dĺžkových jednotkách. Táto veľkosť sa nazýva rozmery. Môžeme si ju predstaviť ako mriežku s presne udaným počtom riadkov a stĺpcov, pričom ale výška riadku a šírka stĺpca nie je udaná. Je na každom počítači a monitore iná. Udáva sa veľkosťou pixelu (najmenšieho bodu, ktorý sa môže zobraziť). Schematicky povedané grafika, ktorá sa na zastaralom počítači ani len nezmestí na obrazovku na novom-výkonnom počítači zaberie len polovicu alebo tretinu obrazovky, ak teda máme obrázok X, ktorého rozmery sú Y na počítači A bude mať 10x15 cm ale na počítači B iba 2x3 cm. Rozmery Y sú zavislé na rozlíšení obrazovky, pri práci s počítačom sa dnes používajú najčastejšie rozlíšenia 640x480 (zastaralé), 800x600 ("výbehový model") a 1024x768 (nastupujúci štandard). Na stránku teda nemá význam umiestňovať grafiku väčšiu ako je šírka obrazovky nakoľko ju i tak nebude možné vidieť (ak sa nepoužije nejaký špeciálny nástroj). Optimalizovaná grafika by mala zodpovedať najčastejšiemu typu rozlíšenia v tom či onom čase na tej či onej stránke. V súčasnosti už nie je žiaden problém tento údaj zistiť a vyhodnotiť v rámci štatistiky návštevnosti stránok.
Rozmery zobrazenia grafického súboru sa v rámci HTML dokumentu dajú ľubovolne pozmeniť pomocou parametrov WIDTH (nnn) a HEIGTH (nnn) čo však neznamená, že sa zmení samotná grafika. Ak pozmeníme rozmery zobrazenia smerom nadol, grafika sa vizuálne zmenší,  ale jej veľkosť ostane rovnaká.  Preto by vzhľadom na optimalizáciu bolo výhodnejšie ju pozmeniť a tým ušetriť na veľkosti súboru. Ak rozmery pozmeníme smerom nahor grafika sa "natiahne" čo napr. pri fotografiách vyzerá neprirodzene až komicky no napr. pri geometrických vzoroch najmä ak neobsahujú oblé tvary je voľným okom nepozorovateľné pričom sa znova ušetrí na veľkosti súboru.
Je takisto možné parametre WIDTH a HEIGTH úplne vynechať a vtedy sa použije implicitné mapovanie, t.j. obrázok sa presne umiestni do pixelovej mriežky obrazovky. Tento postup je výhodný nakoľko je stopercentne využitý dátový obsah obrázku, zobrazenie je najkvalitnejšie a najrýchlejšie. Výhodou zadania veľkosti je zasa fakt, že prehliadač otvára stránku s kódom HTML, najprv prečíta vlastný kód, interpretuje ho a až potom načíta prvky uložené na stránke-ak je zadaná veľkosť obrázkov, prehliadač si na ne rezervuje miesto už pri prvom načítaní, čím sa dá vyhnúť nepríjemnému preblikávaniu a posúvaniu textu pri načítavaní stránky ako sme toho svedkami v súčasnosti na mnohých stránkach.

Veľkosť grafického súboru je zasa množstvo (objem) dát, ktoré zaberá v pamäti počítača, alebo aké je nutné preniesť cez sieť, aby sa mohla zobraziť na obrazovke používateľa. Grafický súbor typu JPEG, ktorý ma rozmery napr. 400x200 má veľkosť 15 Kb (je to samozrejme závislé od ďalších faktorov a nedá sa preto generalizovať, že každý takto rozmerný súbor bude mať takúto veľkosť).
Veľkosť súboru je z hľadiska optimalizácie kľúčová, ako som už spomínal v úvode, čím je súbor menší tým rýchlejšie sa načíta a zobrazí čo zasa ma priamy vplyv na zobrazenie stránky samotnej a na celkový čas nutný na prístup k nášmu webu. Veľkosť každého grafického súboru by mala byť pred umiestnením na web prekontrolovaná a v prípade, že niektorý súbor je neúmerne väčší ako ostatné, je nutné prehodnotiť jeho relevanciu (dôvod umiesnenia), formát, rozmery, farebnú hĺbku a aj obsah (vo vzťahu na Cropping, ktorému sa venujem v nasledujúcej časti). Ak by sme prijali názor odborníkov (ktorý môže byť v niektorých prípadoch alebo s určitých uhlov pohľadu právom spochybnený), že žiaden obrázok väčší ako 12 Kb nepatrí do webovskej stránky všetky zložitejsie grafiky alebo fotografie by mali byť umiestňované externe (mimo stránky) a na stránke by mal byť umiestený len odkaz (hyperlink: relatívny alebo absolútny) s upozornením o veľkosti (popr. o rozmeroch) pričom v praxi sa vo väčšine prípadov ujal spôsob poskytovania malých prehľadových obrázkov "thumbnails", ktoré su v niektorých prípadoch dokonca schopné nahradiť obrázok pôvodný.
 

5. Cropping

Zo všetkých foriem optimalizácie uvádzaných v tejto práci jedine cropping sa vzťahuje priamo na obsah webovskej grafiky a teda vyžaduje väčšie množstvo "myšlienkovej aktivity" ako je v dnešnej dobe založenej na princípe "Next, Next, OK" bežné, je preto viac než vhodné k tejto metóde prejsť až po skutočne zrelom uvážení v optimálnom prípade doprevádzanom poradou s nejakým kolegom alebo podobne.
Cropping (po anglicky obrezávať) je vlastne orezanie alebo vyrezanie určitej časti z pôvodnej grafiky do jej optimalizovanej podoby. Takúto funkciu obsahuje väčšina používaných bitmapových editorov ako pre PC tak i pre Macintosh. Ako príklad sa dá použiť napr. fotografia tváre človeka na jeho osobnej stránke na ktorej nemusí nutne byť celá postava popr. aj pozadie vo forme bielo-bielej steny a na takúto (plnú) fotografiu môže odkazovať. Cropping mimo zásadnej úspory miesta obvykle aj objasní používateľovi čo je na obrázku podstatné, čo sa ním sleduje ak napr. uvidí na osobnej stránke tú bielo-bielu stenu možno bude mať pociť, že máte dobre vymaľované ale asi pozabudne na fakt, že ste neuveriteľne sympatický.
V praxi sa cropping používa najpočetnejšie v prípade tvorby prehľadových obrázkov-thumbnails na propagačných stránkach (napr. elektroniky, áut etc.) a vyberá sa nejaký zaujimavý alebo signifikantný detail.
 

6. Farebná hĺbka

Údaj o farebnej hĺbke vyjadruje počet farieb, ktoré je v tom či onom grafickom súbore možné uložiť, pričom ale nie vždy sa tam  vyskytujú, v súbore s hĺbkou True Color (24 bit) schopnom uložiť až vyše 16 miliónov farieb môže byť uložená aj čiernobiela šachovnica. Takáto grafika však nie je optimalizovaná-čiernobiela teda dvojfarebná šachovnica teda grafika s veľkými jednofarebnými plochami by mala byť optimálne uložená vo formáte GIF. Najrozšírenejšie farebné hĺbky v súčasnosti sú:

-256 farieb (tzv. VGA)
-65 535 farieb High Color 16 bit
-16 777 215 True Color 24 bit (tzv. videokvalita)
-4 294 967 295 farieb True Color 32 bit

Pre porovnanie, ak máme obrázok s 256 farbami, potom jeho verzia High Color bude dvakrát väčšia a True Color dokonca trikrát väčšia,  pričom nie vždy znamená viac farieb vyššiu kvalitu. Ak nejaký grafický súbor,  napr. farebný okraj stránky,  je povedzme sivomodrý,  bude celkom istotne vyzerať rovnako vo verzi 16, 24 a 32 bitovej, v niektorých pripadoch dokonca postačí aj jednoduchá VGA verzia s 256 farbami. Je teda nutné na tento fakt dbať pri ukladaní obrázkov, v praxi sa pri publikovaní na webe osvedčil postup uložiť ten istý grafický súbor vo viacerých farebných hĺbkach a potom metodóu "pozriem a uvidím" určiť, ktorá je najoptimálnejšia. Vo všeobecnosti sa dá hádam povedať len to, že hĺbky 24 a 32 bitov by mali ostať rezervované pre fotografie vysokej kvality a rozmerov (rozlíšenia) nakoľko len tu je možné oceniť kvalitatívny nárast oproti 16 bitom.
Pri formáte GIF je takisto zbytočné ukladať trojfarebný obrázok (napr. ikonu) ako 256 farebný. V praxi sa osvedčil spôsob optimalizovanie pomocou Web colors (vo Photoshope je treba vybrať image mode, indexed a potom Web colors).
 

7. Anti-aliasing

Anti-charta, Antibes, antika, Antily (ani malé ani veľké) nemajú s anti-aliasingom nič, ale vôbec nič spoločné. Anti-aliasing totiž je softwareový technologický postup umožňujúci vyhladenie ostrých hrán v grafike čo má význam najmä pri jej publikovaní na webe. Pod grafikou sa tu myslí aj text uložený v rámci nejakého grafického formátu. PC Webopaedia definuje anti-aliasing ako: "In computer graphics, antialiasing is a software technique for diminishing jaggies
- stairstep-like lines that should be smooth. Jaggies occur because the output device, the monitor or printer, doesn't have a high enough resolution to represent a smooth line. Antialiasing reduces the prominence of jaggies by surrounding the stairsteps with intermediate shades of gray (for gray-scaling devices) or color (for color devices). Although this reduces the jagged appearance of the lines, it also makes them fuzzier. Antialiasing is sometimes called oversampling."
Grafika optimalizovaná anti-aliasingom vyzerá (podľa názoru mnohých odborníkov) na webe lepšie, je vhodnejšia pre ľudské oko a podobne, netreba však zabúdať, že anti-aliasing nefunguje pri 256 farbách ale až pri 16 bit High Color čo zvyšuje veľkosť súboru. Objavuje sa mnoho názorov pre a proti, na tomto mieste poskytujem ich stručné zhrnutie.

Pre:
-písma (fonty) vyzerajú uhladene
-zaguľatené rohy vyzerajú zaguľatene
-vyzerá to lepšie (niektorý by nesúhlasili)
-písmo je ľahšie čitateľné, pretože vyzerá ako vytlačený text

Proti:
-písmo malej veľkosti je príliš rozmazané
-ostré hrany sa môžu rozmazať a stať sa nepresnými
-takýto text nie je možné tlačiť lebo je potom príliš rozmazaný
-súbory majú väčšiu veľkosť

Prakticky sa anti-aliasing používa na internete hlavne na vyhladenie písma použitého v nadpisoch, logách, banneroch a podobne. Neodporúča sa ho používať pre písmo menšie ako 10 bodov a pre dlhšie texty (napr. naskenované časti novín alebo kníh), kde je predpoklad, že používateľ ich bude vytláčať.
 

8. Animované GIF súbory

Pohyb alebo nejaké blikanie na stránke sa v určitej-dnes už historickej-vývojovej etape internetu stalo veľmi populárnym, vo svojej dobe to bolo pochopiteľné,  nakoľko to predznamenávalo príchod dynamických stránok teda prechod od prezentácie statických textov k niečomu kvalitatívne novému. V súčastnosti to však nemá zásadnejšie opodstatnenie a na profesionálnych stránkach (hádam s výnimkou bannerov, kde sa už ale začína používať Flash) animované GIF súbory nenájdeme. Je preto zvláštne,  ak na amatérskych stránkach nachádzame mnoho i niekoľko stokilobytových funkčne nepotrebných animovaných GIFov. Problém animovaných GIF súborov spočíva v opakovanom ukladaní celého obsahu animačného okienka a tým pádom niekoľkonásobnom opakovaní grafickej informácie a neúmernom náraste veľkosti súboru.
Animovaný GIF je príklad presného opaku toho o čo sa snaží optimalizácia grafiky na webe. Stránka s optimalizovanou grafikou by nemala-pokiaľ to samozrejme funkčnosť nevyžaduje-obsahovať animované GIF súbory a radšej použiť iných techník a technológií na vytvorenie dynamickej stránky. Takýchto techník už v súčasnosti jestvuje viac než dosť.
 

9. Pozadia

Hypertext Markup Language (HTML) podporuje vkladanie pozadí pomocou tagu BACKROUND od svojej verzie 3.0. Tento tag sa vkladá hneď za ukončenie hlavičky a najčastejšie sa používajú formáty JPEG a GIF. Načítavanie pozadia síce priamo nespomaľuje zobrazenie stránky, tá sa zobrazí aj bez pozadia, no spomaľuje prevádzku siete ako takej a preto by bolo vhodné aj tieto grafické prvky optimalizovať.
Pozadie HTML súboru môže byť jednofarebné alebo grafické. V prvom prípade nie je potrebné použiť externý grafický súbor ako to umožňuje tag BACKROUND, ale stačí zvolenú farbu zadať do BODY ako BGCOLOR. V druhom prípade je nutné disponovať grafickým súborom vo vhodnom formáte a na tento odkazovať. Takéto pozadie by malo fungovať podobne ako tapeta na stene teda viacnásobne sa opakovať na šírku alebo výšku stránky resp. okna. Súbor s takýmito rozmermi má obvykle aj rozumnú veľkosť, horšie je to so súbormi zaberajúci celú obrazovku (spravidla fotografiami) takéto sú príliž veľké a preto sa pomaly načítavajú, neefektívne využívajú kapacitu siete a navyše väčšina používateľov ich aj tak nikdy neuvidí lebo so stránky odídu skôr ako sa načítajú. Osobne som sa stretol aj so súbormi s rozmermi 1000x1500 a o veľkosti niekoľkých MB čo je z hľadiska optimalizácie absolútne neprípustné.
V praxi sa osvedčili veľkosti rádovo 200x200, ktoré pri vhodnom použití formátu JPEG nepresiahnu 15 Kb.
 

10. Softwareové nástroje

Všetky techniky a postupy popisované v tejto práci je možné uskutočniť aj pre laického používateľa, neprofesionálneho webmastera/webdesignera nakoľko existujú užívateľsky prispôsobivé nástroje s prepracovaným GUI. Najčastejšie sa využívajú aplikácie Photoshop od formy Adobe, od verzie 4.0 disponujúci všetkými potrebnými nástrojmi a funkciami potrebnými na optimalizáciu grafiku pre publikovanie na webe, Photo-Paint od firmy Corel (vhodné od verzie 7.0), ktoré však majú aj sharewareového pandanta PaintShop Pro a takisto v poslednej dobe čoraz viac populárnejšieho freewareového súpera nazvaného Gimp, ktorý funguje ako na platforme Windows, tak aj Linux.
Na internete je takisto možné (vo väčšine prípadov bezplatne) nájsť a stiahnuť množstvo "malých" programov poskytujúcich všetky podobné funkcie. Nevýhodou je fakt, že obvykle každý z nich poskytuje len jednu alebo len menší počet podobných funkcií a je nutné mať väčší počet takýchto aplikácií.
Určité možnosti manipulácie s grafikou vzhľadom k optimalizácií poskytujú aj samotné browsery. Netscape už od verzie 4.0 obsahuje vlastný WYSIWYG HTML editor nazvaný Composer umožňujúci m.i. pohodlné umiestňovanie grafických prvkov, zmenu ich rozmerov pre zobrazenie, definovanie pozadí (aj farebnosti) a podobne pričom od verzie 6.0 tento nástroj prekonal kvalitatívne zmeny. Alternatívny,  no čoraz viac populárnejší browser Opera, obsahuje zasa nástroj nazvaný "zoom", ktorý umožňuje jednotlivé stránky včítane grafiky zmenšovať alebo zväčšovať čo je mimoriadne praktické m.i. pre posúdenie vyváženosti a funkčnosti stránky pri jej tvorbe.
Takýto výpočet softwareových nástrojov a ich funkcií by mohol pokračovať pravdepodobne až donekonečna, to však nie je cieľom tejto práce.
 

Záver

Optimalizácia grafiky na world wide webe sa javí byť viac než praktickou, dokonca viac než potrebnou pretože s rastúcim počtom stránok sa zo siete stáva nepriepustná džungla nápadne pripomínajúca skládku odpadu. Vo svojej práci som sa snažil stručne objasniť najpraktickejšie a najefektívnejšie formy optimalizácie, ktoré je možné použiť na zlepšenie-aspoň čiastočné-tohto stavu.
 

Peter Weisenbacher, december 2001


Odkazy:

Graphics for the web tools http://html.about.com/cs/graphics/index.htm
PC Webopaedia http://webopedia.internet.com



[Top] [Obsah]