Webes rasztergrafikus állományok

Írta: | 2010. május 05. | kategóriák: Design, Photoshop, Web

Három fő rasztergrafikus file-formátum terjedt el az interneten. Ezek a JPEG (JPG), a GIF és a PNG. A vektorgrafikus állományokat még kevés böngésző támogatja alapból, természetesen az Internet Explorer eddigi legújabb tagja, az IE 8, sem. Mit is jelent a rasztergrafikus képformátum? Azt jelenti, hogy a képek egy milliméterespapírhoz hasonlóan, ezernyi kis pontot tartalmaznak. Minden pont egy képpont, pixel, és egy színkódot tartalmaz. Miért nem elég egy egységes képformátum? Egyszerű a válasz: a képeket különféle célokra használjuk és ezért más-más, veszteséges és veszteség mentes, módszerek vannak a képen látható informáciú sürítéséhez. Így például egy fotót JPEG formátumban érdemes menteni az optimális állományméret és képminőség arányának megtartása érdekében. Egy diagrammot GIF-ként érdemes megosztani a világhálón, mivel a kevés szín lehetővé teszi, hogy többszörösen kissebre tömörítsük a képen látható információt.

A JPEG

A JPEG formátumot a Joint Photographic Experts Group hozta létre. Talán ez a legelterjedtebb képformátum. Fő előnye a kis file-méret melletti gazdag képinformáció megörzése. Ehhez kapcsolódik a gyengesége is: veszteséges tömörítést használ. A veszteséges tömörítés azt jelenti, hogy a tömörített képinformációból nem lehet visszanyerni az eredeti képet. A JPEG, sokszor csak JPG kiterjesztéssel, több, mint 16 millió színt képes megkülönböztetni. Ez azt jelenti, hogy minden kis négyzet a milliméteres papíron 24 bitten tárolja a színkódot. Léteznek úgynevezett progresszív JPEG-ek is. Ezek előnye, hogy fázisonként töltődik be az információ és egy rossz minőségű elönézetkép ismételt feljavításával éri el a végleges, jó minőségű eredményt a megjelenítés. Nagyon jól jöhet lassú internetkapcsolat vagy nagy méretű állományok megosztásakor. Nincs előny hátrány nélkül, a file-méret nagyobb lesz, de ezt kárpótolja a gyors előnézet kép.

A GIF

A CompuServe Information Service által népszerűvé tett képformátum optimális kissebb komplex vagy bármilyen méretű, kevés színt tartalmazó grafikák mentéséhez. A formátúm nagy előnye a veszteségmentes jó arányú tömörítés (LZW) és a kis állomány-méret. Az érem másik oldala, hogy bár képes a 16 millió színeket kezelni, de csupán 256 egyedi szín minden képen. Ez azért van, mert minden pixel 8 bitten tárol információt a színről. Valójában nem a színt magát tárolja ezen a bájton, hanem egy indexet a 256 elemet tartalmazó színvektorra. Ebben a vektorban vannak a színek tárolva. A 256 a maximum színszám, de ezt jobban is korlátozhatjuk, példáúl 32 vagy 64 színre, így egy sokkal kissebb fájl-méretet érünk el. Ebből a korlátozásból kifolyólag nem ajánlott sok színt tartalmazó, lágy színátmenetekben gazdag, stb. képet ebben a formátumban menteni. Viszont ha csak egy színátmenetet akarunk elmenteni, például a menünk hátterének, akkor ajánlott ezt GIF-ben menteni (mivel nem torzít, mint a JPEG) és amikor a böngésző egymás mellé sokszorosítja, jól (veszteségmentesen) fog kinézni! A progresszív JPEG-hez hasonlóan, a GIF is lehetőséget ad a fokozatos kirajzolódásra. Ezt angolul interlacing-nek, interlaced GIF-nek hívják. Egységes magyar fordítás nincs, a következő megnevezések az elterjedtek: egybefűzött, interlace-elt, váltósoros, váltott soros, váltottsoros.

A GIF óriási előnye az, hogy áttetsző részeket is meghatározhatunk. Igaz, a GIF esetében csak egy egyszerű, bináris, áttetszőség van, de ez is nagyon jól jön és sokáig nem is volt mást (most van az alfa kanálisos PNG, 24 bittes, de a régebbi böngészők nem támogatják, csak JavaScript hozzájárulásával). Arra nagyon kell ügyelni, hogy az áttetszőség abból áll a GIF esetében, hogy az adott képpont vagy tartalmaz képinformációt, színt, vagy sem. Tehát nem lehet színétmeneteket áttetszőség átmenettel kombinálni és hasonlók. Az eredmény: ahol áttetsző a kép, ott éles törésvonal alakulhat ki a háttértartalommal (amin a GIF található).

A PNG

A PNG-nek két változata is van. A nyolc bittes, a GIF-hez hasonló karakterisztikákkal rendelkezően, és a 24 bittes. A PNG azért volt kidolgozva, mert a GIF tömörítőalgoritmusa, az LZW, egy fizetős algoritmus (volt) egyszerűen szólva. A nyolc bittes PNG a más, szintén veszteségmentes, tömörítése más algoritmust használ. A 24 bittes változat viszont más. A nagytestvér veszteségmentesen képes tárolni bármiféle képet, akár fotót is! Igaz, ez nagy file-méretben nyilvánul meg. A másik óriási előny, ahogy azt már említettem, hogy külön kanálist kapott az áttetszőség mértéke is. Tehát 256 szintű áttetszőség létezik, így a képünk lehet kevéssbé vagy jobban áttetsző, így akár árnyékokat is készíthetünk egy szín- és áttetszőség átmenetet kombinálva (például szürkéből fehérbe való színátmenet, ahol a szürke egyáltalán nem áttetsző és a fehér teljesen áttetsző).



Értékeld a bejegyzést!

Loading ... Loading ...

A bejegyzésre érkező kommenteket elérheted RSS 2.0 formájában vagy emailben is:

A bejegyzéshez tartozó trackback cím, illetve a permalink.

A megjegyzéseket kérlek, tedd fel érthető és illendő módon, ne fikázz le másokat, mert nem tudnak valamit, amit te már igen. A kommentár lehetőleg függjön a bejegyzéshez :)

kötelező
kötelező, titok marad
ha nincs, maradjon üres



Köszönjük az érdekes leírást, nagyon hasznos volt.

codee47 2010. május 8. - 11:11

Örülök, hogy hasznos 🙂 Már vártam a visszajelzést, de úgy látszik ez a téma keveseket érdekel!?

Avatar Tupacko
2010. május 8.
15:09

Valóban hasznos az írás, köszönjük, ami a legjobb benne hogy egyszerűen és érthetően van megfogalmazva.

én mintha már láttam volna olyan hogy PNG32, az miben más?

Meg PNG-ben lehet rétegeket és beállításokat is tárolni, ugye? Mint pl. az Adobe Fireworksnél

Go 2010. május 10. - 23:18

A 32 bittes PNGt feltehetoen arra irtak, hogy 24bit (8 bit/kanalis) a kepinformacio + 8 bit/alfa kanalis (attetszoseg).
A Fireworks PNGje plusz metainformacio altal tamogatja a retegeket, de maga a standard PNG nem. A FW PNG-je ugyan az vegulis, mint egy PSD, csak minden esetben van flattened valtozata, a kepnezokkel valo osszeferhetoseg miatt. A PSDnek is van, ha menteskor kivalasztod a megfelelo lehetoseget. Minden esetre, a FW PNGjet nem szabad hasznalni kesz kornyezetben, csak fejleszteskor, mert nem optimalizalt es rengeteg plusz informaciot tarol, amire a bongeszonek nincs szuksege, amikor megjelenit egy weboldalt.

Avatar Tupacko
2010. május 11.
07:14

Pont a napokban olvastam ezt a bejegyzést erre ma találtam egy másik blogon egy bizonyos PunyPNG programról szóló leírást amivel akár 40% ban is tudunk méretet csökkenteni a meglévő képünknek, különösebb minőségromlás nélkül.
Nos én ki is próbáltam és egy kis gifnél semmit se csinált aztán még 2db png vel próbáltam és 1 és 2 % méretcsőkenést tudott csak produkálni 🙂
Valószínűleg ez azért van mert én is már nagyjából tudom milyen képet mibe mentsek le mint ahogy a fenti leírás is elmondja, így elképzelhető én a legmegfelelőbb formátumba mentetem le. És ez a programocska a hozzá nem értöknek való.

Autóhifi 2010. június 3. - 18:04

Ja, lehet. Azert koszi, hogy belinkelted, hiszen biztosan segitsegere lesz valakinek 🙂

Avatar Tupacko
2010. június 3.
18:16

Ebből is látszik igen fontosak a képek mentésénél a megfelelő formátum kiválasztása, hogy ne kapjunk túl nagy vagy túl rossz minőségű képet. Pl egy kis avatar képet nem érdemes jpg ben menteni, inkább gif-ben szokás, vagy egy nagy felbontású tájképet gif-ben menteni. 🙂
Egyébként 100% -osan hasznos a leírás, mert ritkán lehet találkozni ilyesmivel. (Ezt az előbb elfelejtettem mondani)

Robi 2010. június 3. - 19:25

Koszonom. Hamarosan egy ujabb leiras is napvilagot lat majd!

Avatar Tupacko
2010. június 3.
20:01

VÉGRE … Itt az üzlet, amire régóta vársz:

Teljesen ingyenes, MINDENKIVEL keresel, aki utánad regisztrál, még akkor is, ha nem szponzorálsz embereket, nem kell semmit eladni vagy vásárolni. Garantált!

Minél gyorsabban regisztrálsz, annál nagyobb lehet a potenciális jövedelemed még akkor is, ha nem teszel mást, mint hogy ingyenesen regisztrálsz…

Hogyan működik? – Ez egyszerű!

Piackutató cég az USA-ból keres internet felhasználókat a világ minden tájáról, akik pénzt kapnak honlapok vizsgálatáért és ad egy rövid vélemény írásáért. Te is tudsz keresni akár 1000 USD / hó, heti 1-10 óramunkával.

Még akkor is, ha a munka, mint egy weboldal tesztelő nem érdekel, akkor is lehet keresni a kétféle passzív jövedelmet hónapról hónapra:
1. Saját csapatod tagjai után, akiket közvetve vagy közvetlenül szponzoráltál.
2. A csoport minden tagja után, akik már a Te regisztrációd után csatlakoztak!

Ezért cselekedj gyorsan, ez a legfontosabb, amíg ezeket a sorokat olvasod, az új tagok iratkoznak fel világszerte. Egyáltalán nem kell semmi elkötelezettséget vállalnod a regisztrációval, és soha nem adjuk ki adataidat másnak!

Apropó, nem is beszélve, hogy a részvétel minden esetben INGYENES!

http://www.websitetester.biz/index.php?lang=hu&ref=d36fdfed10c483ade19d41cdd57e4d06

web tester 2010. július 9. - 16:23

/IRóNIA ON Végre! Újabb spammer! /IRÓNIA OFF

Bence 2010. július 11. - 19:38

Nagyon kimerítő írás a grafikus állományokról, nem semmi.

Ételek 2010. július 16. - 14:04

Kéne már valami jó kis leírás ismét, legalább olyan jó mint ez.

Autóhifi 2010. július 19. - 16:40