Optimalizácia
grafiky na world wide webe
Seminárna práca z predmetu HTML/XML
Ú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.
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 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.
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.
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.
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.
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.
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ť).
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.
Ú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)
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.
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
Pre:
Proti:
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ť.
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.
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ť.
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.
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
Graphics for the web tools http://html.about.com/cs/graphics/index.htm
|