Web Page Design for Designers

 


 

 

robot icon Web oldalak olvasásakor a legzavaróbb tényező a grafika letöltésére és megjelenítésére való várakozás. Azonnal érthetővé válik a helyzet, ha meggondoljuk, hogy egy képernyő puszta szöveggel való megtöltése mindössze 1000 byte (1K) adatot igényel, az itt látható kis méretű ikonhoz szükséges majdnem 9K-val szemben.

A grafika mértéktelen használata, bármilyen jól is nézzen ki, olyan mértékben zavarhatja az olvasót, hogy kikapcsolja a böngésző "képek automatikus letöltése" opcióját és a tervező minden igyekezete kárba vész.

Mivel magyarázható, hogy néhány kép aránylag rövid idő alatt letölthető, míg más grafikák megjelenítése sokkal több időt vesz igénybe? Ebben a kép kiterjedése nem sok szerepet játszik, pusztán a byte-ok mennyiségén múlik, amit telefonvonalon a szerverről a kliens számítógépére kell továbbítani - vagyis a file mérete!

Ahhoz, hogy megértsük, miért lehet egy nagy képet gyorsabban letölteni és megjeleníteni, mint egy kisebbet, némi fogalommal kell rendelkeznünk a használatos tömörítési technikákról. A weben használt két fő grafikus file formátum, a GIF (Graphic Image File Format), illetve a JPEG (Joint Photographic Experts Group) két különböző képtömörítési eljárást használ.

A GIF file formátum

 

 

 

 

sales chart 8-bit

Ez a 8-bites GIF file hatékonyan
tömöríthető - 9K
a homogén területek miatt

 

sales chart 4-bit

 

De ez a GIF csak 6K, mert
a szokásos 8 helyett
4 bitesként lett elmentve -
ennyi is elegendő az összes színhez

 

sales chart

Ez a kép viszont a színátmenetek miatt
rosszabbul tömöríthető -
18K

 

sales chart - jpeg

Jóllehet ez a hatékonyan tömörített
JPEG file csak 17K,
elég rosszul mutat
a veszteséges tömörítés miatt

A GIF file formátum 8 bites (256 színű), vagy annál kisebb felbontású képekhez alkalmas. Ezzel szemben minden egyes képernyőpont színének leírásához általában 24 bit információ szükséges. 8 bit egyenként a vörös, zöld és kék színösszetevő számára (RGB). Így mindegyik fényességi szintje 0-tól 255-ig állítható, ami összességében 16,777,216 különböző színt tesz lehetővé. Jóllehet minden színes monitor képes ennyi szín megjelenítésére, a számítógépek egy része gazdasági megfontolásokból nem támogatja ezt a lehetőséget.

Ha csak szöveget és számokat kell megjeleníteni, színek használata szükségtelen. Minden megcímezhető képpontnak rendelkeznie kell egy hozzátartozó bittel a memóriában, 0 vagy 1 értékkel, jelezve, hogy az illető pixel be van-e kapcsolva.

Ha egyszerű táblázatról vagy diagramról van szó, 16 szín elegendő lehet, ami a számítógép videómemóriájából pixelenként mindössze 4 bitet igényel. Manapság azonban egyre gyakoribbak a 8 bites rendszerek, ahol minden egyes önálló képpont 0-tól 255-ig terjedő értéket vehet fel. Ha ezeket letérképezzük egy 24 bites RGB értékeket tartalmazó táblázatra, létrehozhatunk egy olyan palettát, ami 256 színt foglal magába a lehetséges 16,777,216-ból.

Egy 8 bites kép többnyire egy hosszú, 0 és 255 közötti számokat tartalmazó sorozatból áll. A file-ban való tároláshoz tudnunk kell, hány pixel szélességű és magasságú a kép, így bármikor előhívhatóvá válik. Egy 128 x 96 pixel méretű kép 128 x 96 = 12,288 byte-ot foglal el a számítógépnek abban a videómemóriájában. ami elegendő lenne 12 teljes képernyőnyi szöveg tárolására is! Ennek a képnek a tárolása ugyanennyi helyet vesz igénybe a merevlemezen, nem számítva az egyéb információk (mint például szélesség, magasság, név, file formátum, stb.) tárolásához szükséges byte-okat.

A képet leíró számok alaposabb vizsgálata után észrevehetjük ugyanazt a számot tartalmazó sorozatok többszöri előfordulását. Homogén területeket is magukba foglaló képek, például fekete vagy fehér hátterek, hosszú sorokban tartalmaznak 0-t vagy 255-öt. Nullák százainak tárolása helyett hatékonyabb ezt mondani: "A következő 288 pixel értéke 0" - mivel ez néhány byte segítségével leírható. Az eljárás neve "run length encoding". Ez képezi a GIF és más grafikus file formátumok alapját. A GIF egyéb technikákat is alkalmaz az eredményesebb tömörítés érdekében, de általános szabály, hogy nagy, homogén területekkel rendelkező képek hatékonyabban tömöríthetőek. Fordítva is igaz. Például egy apró kockás mintát ábrázoló kép, ahol az egymást követő pixelek értéke sűrűn változik, rosszul tömöríthető. Ebben az esetben még nőhet is a file mérete, ha a tömörítő algoritmus nem elég intelligens ahhoz, hogy ezt észlelje.

A JPEG file formátum

girl - gif girl - jpeg

A bal oldali GIF kép 24K,
a jobb oldali JPEG 16K.
8 bites monitoron ugyanolyanok,
de 16 vagy 24-biten
a JPEG jobban néz ki

 

flowers - high quality

flowers - low quality

Ennél a képnél nem sok különbség van
a Photoshop 'High' vagy 'Low'
JPEG tömörítése között.
A file-ok mérete 30 és 20K.

A JPEG file formátum 24 bites képekkel dolgozik, függetlenül attól, hogy azt a monitor képes-e hibátlanul megjeleníteni. Egy 24 bites képek kezelésére alkalmas videókártya (ill. beépített adapter) segítségével, a képek teljes tónus- és színgazdagságban élvezhetőek. Ha 8 bites üzemmódra van állítva, a kép színskálája úgy redukálódik, hogy a fennmaradó 256 színt felhasználva a lehető legjobban megközelítse az eredetit. Míg egy GIF kép ugyanúgy jelenik meg egy 8 és egy 24 bites monitoron, addig egy JPEG kép jól mutat a 24 bites képernyőn, de kevésbé jól a 8 bitesen, mert a színskálát redukáló eljárás sebességre, és nem minőségre van optimalizálva.

A JPEG bizonyos információk intelligens eltávolítása útján tömöríti a képet, a file méret csökkentése céljából. Ezt "veszteséges" eljárásnak nevezik, mivel információ vész el a kép egyszerűsítése érdekében. Minden egyes képet külön megvizsgálva meghatározhatjuk az eltávolítandó információ mennyiségét, kompromisszumot kötve a kép minősége és a file mérete között. Mindent egybevetve, a 10:1 arányú tömörítés következtében kis mértékben romlik a kép minősége, míg a 100:1 arányban tömörített kép elveszíti finom részleteinek nagy részét és színei kevesebb árnyalatban jelennek meg. A tömörítés következtében furcsa pontok és foltok ("artefact") jelennek meg, amik az eredeti képben nem voltak láthatóak.

Kisebb file-okat lehet létrehozni a JPEG-gel, mint a GIF-fel, ha el tudunk tekinteni a kép minőségének romlásától. Általánosan elfogadott szabály, hogy grafikákhoz (ikonok, logók, gombok) legjobb a GIF formátum, míg a fényképekhez a JPEG használatos. A JPEG tömörítés által létrehozott "artefact"-ok szembetűnőbb a grafikákon. 8 bites monitorokon a GIF jobban néz ki, mint a JPEG, de 16 és 24 biteseken rosszabbul mutat. Ne feledjük, hogy több ember használ 8 bites monitort, mint bármilyen más típust.

Paletták és különböző platformok

 

 

 

 

 

web palette 6x6x6

A Web paletta színei
minden platformon közösek,
ezért használatuk konzisztens és
megjósolható eredményt biztosít.
Mac .sit  PC .zip


 

 

 

%

0%

20%

40%

60%

80%

100%

Dec

0

51

102

153

204

255

Hex

0

33

66

99

CC

FF

Konverziós táblázat
a különböző színskála rendszerekben
egyformán 'előnyben részesített'
RGB értékekhez

 

 

 


A 8 bites színkezelés és a paletta-használat egyik legkevésbé nyilvánvaló aspektusa az, hogy MacOS és a Windows alapvetően különböző módon kezeli őket. A lényeg a palettákat illetően az, hogy a 256 szín mindegyike tetszőlegesen hozzárendelhető az RGB színtartomány lehetséges 16,777,216 értéke közül bármelyikhez. A gyakorlatban ez nem teljesen igaz. A Mac palettában két szín rögzített - a fekete és a fehér -, hogy a felhasználói felület részei, mint például a menü és a párbeszéd ablakok gombjai mindig olvashatóak legyenek, függetlenül attól, hogy milyen színséma lett rendelve az aktuális palettához. A Windows több színt alkalmaz a felhasználói felületén és mind a 16 VGA, valamint 4 SVGA színt is lefoglal.

Általános használatra mindkét platform rendelkezik egy jól felépített színskálájú rendszer-, vagy alapértelmezett palettával, de lehetőség van optimalizált "adaptív" palettát tartalmazó GIF file-ok használatára is. Például egy tengert ábrázoló kép esetében a paletta leginkább a kék szín árnyalatait tartalmazza, és folyamatos színátmenetű fényképre emlékeztet. Amikor ugyanez a kép 8 bites monitoron jelenik meg, az egész képernyő palettája átalakul - kivéve a foglalt színeket. Így a sárga háttér, aminek a színe a nem foglalt paletta-tartományban helyezkedett el, most sötétkékre változik. De még ennél is rosszabb, hogy a szomszédos kép, ami egy mezőt ábrázol piros és sárga virágokkal, szintén kékké alakul, mert a képernyő egyszerre csak egy optimalizált palettát használhat.

A böngészők úgy oldják meg ezt a problémát, hogy a saját palettájukhoz igazítják a GIF file-t, figyelmen kívül hagyva annak saját palettáját. Az eredményül kapott kép rosszabbul néz ki, mint az, ami eleve a böngésző rendszerpalettájából készült. Érdemes kipróbálni mindkét módszert, és kitapasztalni, melyik alkalmazható legjobban a kiválasztott képekhez.

Mivel a Windows több színt foglal le a palettáin, kevesebb átdefiniálható szín áll rendelkezésünkre, mint a MacIntosh-on.

A Windows ikonok és egyéb felületi elemei a foglalt színeket használják, így változatlanok maradnak a képernyő tartalmától függetlenül.

A két rendszer (közel) hasonló színekkel rendelkezik, amiket a Netscape és egyéb böngésző programok használnak. Ezek az RGB 0, 51, 102, 153, 204, 255 (0-tól 255-ig 20%-os lépésekben) értékeire épülnek, és ez skála "6x6x6 paletta" néven ismert. A mellékelt paletta 6 darab, 6 x 6 színből álló négyszöget tartalmaz a vörös, zöld, kék színek az előző listából vett értékeinek lehetséges kombinációiból. Ez 216 színt jelent, ami egy kép palettájául választva mindkét platformon hasonló megjelenést eredményez. Ezen tartományon kívül eső színek be lesznek helyettesítve.

Sokak kérésére, részletesebb információk a palettákról!

 

menunext