Vektoros vagy pixelgrafikus képek?

Írásainkat olyan, az informatika iránt érdeklődőknek szánjuk, akik egyelőre még szinte semmit vagy csak nagyon keveset tudnak az IT, weboldal készítés, internet, hálózatok, programozás, stb. világáról. Az általunk használt kifejezések és magyarázatok a nem szakmabelieknek szólnak. Cserébe közérthetően szeretnénk bemutatni az informatika különböző területeit és fogalmait.

***

Korábbi cikkünkben a weben használt képekről írtunk: pixelekről, fájlformátumokról, fájlméretekről volt szó.
A témát folytatva - szintén webes képkezeléshez kapcsolódóan - most arról lesz szó, hogy nem csak pixelgrafikus, hanem vektoros képet is lehet weboldalakon használni.

Mi a különbség a pixeles és vektoros képek között?

Pixelgrafikus képek

A legkönnyebb megérteni a pixelgrafikus képek lényegét, ha közelről megnézünk egy fotót:

Kijelenthetjük, hogy minden fotó, amely valóságot ábrázol (vagy valósághűnek tűnik) ún. pixelgrafikus kép. Kicsit pontosabban fogalmazva: a kép ún. képpontokból, vagyis pixelekből áll. Megfelelő távolságból nézve szemünk nem tudja megkülönböztetni egymástól a képpontokat, ezért látjuk megfelelő minőségűnek a képet. Ebből persze az is következik, hogy ha egy adott területre nem elegendő a képpontok mennyisége (lást a második képet), akkor a kép "pixeles" lesz - vagyis elkezdjük látni egyesével a képpontokat.

Vektoros képek

Ezzel szemben a vektoros képek nem képpontokban, hanem alakzatokban "gondolkodnak", s ezen alakzatokat a háttérben matematikai képletek írják le. Ez azt jelenti, hogy egy vektoros kép a háttérben valójában egy számok által leírt fájl.

Ennek köszönhetően az alábbi két előnye lehet egy vektoros fájl használatának:

• kisebb fájlméret
• korlátlan nagyíthatóság fájlméret növekedés nélkül

Természetesen tisztában kell lenni azzal, hogy csak bizonyos jellegű képek lehetnek vektorosak - pl. logók, illusztációk. Fotók és fotorealisztikus képek nem, mivel a valóságot csak képpontokra bontva lehet élethűen leképezni.

Minden vektoros alakzat (pl. logó) ábrázolható pixelgrafikus képként. Lehet, hogy a fájlméret nem lesz optimális vagy a kép nem lesz borotvaéles, de lehetséges.

Fordítva viszont nem megy: a pixelgrafikus képek (jellemzően fotók) nem alakíthatóak át ésszerűen vektoros képpé. Elméletben persze minden lehetséges, de ahhoz minden egyes képpont helyett egy vektoros "négyzetet" kellene a képre tennünk rendkívül kis méretben. Ez viszont annyira sok apró alakzat létrehozását igényelné, hogy a fájlméret sokkal nagyobb lenne, mint egy hagyományos (pixelgrafikus) fotó esetén.

Fájlméret optimalizálás

A vektoros képek fájlmérete általában kisebb, de mégis akadhat olyan helyzet, amikor ugyanaz a vektoros kép - ha bonyolult, összetett a látványa - pixelgrafikus képként mégis kisebb fájlméretű. Ha mindkét féle fájl használható elvileg egy adott helyzetben, akkor csak úgy lehet eldönteni, hogy melyik fájlformátum lesz az optimálisabb, ha kipróbáljuk mindkettőt.

Vektoros képek weboldalakon - SVG formátum

Most értünk el magyarázatunkban oda, hogy a weboldalakon használható vektoros képekről is szót ejtsünk.

Ha találomra megkérdeznénk az internetet használókat arról, hogy milyen képformátumokat ismernek, az alábbiakat említenék: JPG, PNG, GIF (vagy animált GIF).

Szinte biztos, hogy az SVG formátumot senki sem említené. Pedig immár egy fontos, elterjedt, és rendkívül sokrétűen felhasználható vektoros fájlformátumról van szó.

Az SVG fájlok nem csak használhatók weboldalakon, de a jó öreg Internet Explorer böngésző és korai Android operációs rendszerek kivételével már minden böngésző támogatja.

Külön érdekessége és pozitívuma, hogy még animációkat is képes megjeleníteni. A böngészők kb. 98%-a ezt a tulajdonságát is támogatja. 

---

Összegzés

Profi webfejlesztők és frontend fejlesztők mindig képesek a célnak és helyzetnek megfelelő fájlformátumot kiválasztani.

Ha érdekel a téma, akkor érdemes Frontend fejlesztő, Webfejlesztő vagy Webszerkesztés alapjai képzéseinkre beiratkozni!