Fotó vagy grafika, pixel vagy vektor – digitális képekről alapfokon

Bármilyen technikával is készül egy alkotás, a számítógépre már csak digitalizált formában kerülhet. A monitorok ugyanis egymás mellé helyezett, apró, színes négyzetekkel jelenítik meg a szövegeket és a képeket. A sok közeli, apró „pontot” folytonos vonalként érzékeli a szemünk. Az ilyen pixelesen tárolt képeket nevezzük digitális képeknek. Ma már sok profi fényképezőgép is digitálisan rögzíti a képet, azaz nem kell az előhívással bíbelődni, de szkenneléssel és grafikai programok segítségével is előállíthatóak. Régen a keresztszemes hímzések ugyanezt a hatást használták ki. Minél kisebbek a „szemek” a kép egészéhez képest, annál aprólékosabb, életszerűbb volt a kialakult kép.

Az ősi mozaikok abban különböznek, hogy a kis kockák nem szabályos négyzetrácsban helyezkednek el, hanem követik az íves minták ívét. Ilyen értelemben nem is tekinthetőek a pixeles ábrázolás modelljének.

Egy weboldal esetén valahányszor megjelenik az oldal a böngészőben, minden egyes hozzá tartozó kép is letöltődik az oldallal együtt. Ezért nem mindegy, mekkora file-méretben kerülnek fel a webre a honlapot alkotó grafikai elemek és az illusztrációul szolgáló fotók. Minden egyes felhasználni kívánt képet a lehető legkisebb file-méretben kell előállítani. Első lépésként kisebb méretben is elmenthetjük az eredeti képet, hiszen egy 50 cm x 30 cm-s fotót úgy sem jeleníthetünk meg teljes élet-nagyságban a képernyőn. Második lépésként csökkenthetjük a kép felbontását, azaz bizonyos apró részletekről lemondunk kompromisszumos megoldásként. Harmadik lépésben pedig optimalizálhatjuk a képeket a webes használathoz valamilyen tömörítő algoritmus segítségével.

Képméret

A képméretet digitális képek esetén általában a függőlegesen és vízszintesen elhelyezkedő pixelek szorzatával adjuk meg. Például 1024 x 768 pixel. Ezen az ábrán egy nagy méretű képet először kisebb méretben hoztam létre és minden kép alá odaírtam a kialakult file méretet.

Felbontás

Az egységnyi területre eső pixelek száma a felbontás. Nem mindegy, hogy egy négyzetcentimétert 10 pixellel, 100-al, vagy 1000-el valósítunk meg. Általában a művészi hatások eléréséhez nagyon nagy felbontásokat használnak. Ez azt jelenti, hogy ugyanazt a képet nagyon sok, apró pixel segítségével írják le, és így rendkívül részletgazdag marad a felvétel. Azonban semmi nincs ingyen. Az éles, sok színárnyalatot használó, a fény- és a térbeli viszonyokat visszatükröző, élethű felvételekhez bizony óriási file méretek is tartozhatnak. Az alábbi ábrán jól látható, hogyan homályosodik az alakzat körvonala, ahogy egyre kevesebb négyzet áll rendelkezésre a rajzoláshoz, azaz ahogy csökken a felbontás.

Képtömörítés

Optimalizálhatjuk a kép file-méretét tömörítéssel is. Sok ingyenes képszerkesztő program is alkalmas arra, hogy egy fotót tömörítsen. Ez azt jelenti, hogy a felbontást nem rontjuk le, de a kép tárolásakor lefutnak bizonyos algoritmusok, amelyek csökkentik a végső file méretét. Néhány részlet kicsit homályosabb lesz, azaz elveszik az eredeti kép információ-tartalmából valami, de a kép még élvezhető marad. Most a felső képet Photoshop segítségével először 56%-os JPG tömörítéssel , majd 10%-os JPG tömörítéssel optimalizáltam. Az 1,3 M-s kép a 212 KB-os esetbe nem vesztett különösebben a minőségéből (valójában nyomtatásban már látszana a különbség), viszont az extrém tömörítés már ront a kép élvezeti értékén.

A weben tehát fontos a képet megjelenítő file mérete. Ezt a legkönnyebben úgy tudod megnézni Windows alatt, hogy a file-névre ráállsz a Windows intézőben és a jobb egérgombra feltűnő menüből a tulajdonságok menüpontot választod. Ekkor egy kis ablakban megjelennek a file tulajdonságai, többek között a formátuma és a mérete is. Általában az első „Általános” fülön nem látod a kép felbontását, ehhez a „Részletek” fülre kell kattintanod. Ha csak simán megállsz az egérrel egy kép file fölött, akkor is megjelenik egy pici ablak a file méretével és a pixelben megadott szélességgel és hosszúsággal.

Akinek még nincs Adobe licensze, az itt talál 11 ingyenes online képtömörítő eszközt, amivel csökkentheti a képeket tároló file-ok méretét. Az eredeti kép feltöltésekor az eszköz elkészít egy javasolt optimalizált megoldást, de ha a kis képre kattintasz, megjelennek a fentihez hasonló beállítási lehetőségek. A Photoshophoz hasonlóan láthatod a beállított százalék hatását a képeken.

Képformátumok

A digitális képeket file-okként mentjük el. Attól függően, hogy a képalkotó információkat milyen szabályszerűségek szerint kódolják, különböző file-formátumokról, illetve különböző képformátumokról beszélhetünk. Amikor egy képet valamilyen képkezelő alkalmazás vagy program segítségével megnyitunk, tulajdonképpen ezt a kódot fejti vissza a program a szemünk számára feldolgozható képpé. A legismertebb képformátumok jellemzőit az alábbiakban foglaltam össze. Ezek a JPG a GIF és a PNG.

JPG

Az, hogy egy kép jpg tulajdonképpen azt jelenti, hogy a JPEG tömörítő eljárással lett eltárolva, és ezt a file végén a .jpg kiterjesztés is jelzi. Egy JPG formátumú képet akárhányszor újra lehet grafikai programok segítségével tömöríteni, csak egyre kisebb file-méretű képeket kapunk végeredményként.

Veszteségesen tömörített képformátum. Grafikai programok segítségével lehet más formátumokból jpg file-t készíteni, illetve egy nagyobb jpg file egyre kisebb méretűvé tömöríthető a segítségükkel. Más és más tömörítés mellett marad élvezhető egy kép, ha tájképről van szó, ha egy arcról, vagy egy épületről. a használt színek mennyisége és a részletgazdagság is számít. A grafikai szoftverek lehetőséget adnak rá, hogy a %-ban megadott tömörítés mellett megnézd, milyen marad a képminőség. Így tudod minden egyes képnél helyesen felparaméterezni a tömörített mentést.

Az alábbi képernyőképen megfigyelheted, hogyan romlik a kép minősége az egyre erősebb tömörítéseknél, és közben hogyan csökken a file-méret. A kis ablakok segítenek eldönteni, hogy abban a minőségben még élvezhető-e a kép. A jobb oldalon a Quality mutatja %-ban a képminőséget. Minél kisebb ez a szám, annál nagyobb a veszteség, és annál rosszabb minőségű a kép. 100-asra állítva veszteség nélkül lehet elmenteni a képet. A menüben a File->Export->Save for web útvonalon tudod elérni a Photoshop jpg mentését

Digitális képfeldolgozás, képszerkesztő programok

A pixelekben való tárolás nagyon jó informatikai szempontból, de az ember nem igazán tud mit kezdeni eg ilyen adathalmazzal. A képek feldolgozására, a fotók retusálására, átalakítására olyan eszközöket kellett fejleszteni, ami az emberek számára is kezelhetővé teszi a pixeles képeket. A képszerkesztő programok képesek több képelem egymástól független kezelésére. Egy virágos mezőn a tulipánok és a margaréták külön rétegeken kaphatnak helyet. A képet alkotó alkatrészek elmozdíthatóak, átméretezhetőek, tükrözhetőek, vagy állítható például az átlátszóságuk.

Nagyon gyakori igény a honlapok és a marketing anyagok esetében, hogy szövegek, feliratok kerüljenek képekre. A montázsok, fotókönyvek, hangulattáblák mind azon alapulnak, hogy több fotót rendezünk valamilyen szempont szerint egymás mellé, amelyeket esetleg feliratokkal, címkékkel és kisebb grafikus díszítő elemekkel látunk el.

Egy másik nagy terület a fotózás során keletkező hibák kijavítása. A klasszikus retusáláson túl ma már egy-egy zavaró alak a háttérben, egy felesleges tárgy az asztalon gond nélkül eltüntethető a képről. Az igazán profi fotósok a fénykép szín- és fényviszonyait is korrigálni tudják, amivel erős hangulatokat, plusz érzelmeket tudnak a fotókba vinni.

Az egyik leggyakoribb igény, ami előbb-utóbb felmerül, ha egy honlap képanyagával dolgozik az ember, valamelyik képelem kivágása a képből. Ez nem is olyan magától értetődő feladat, és sokféle technika létezik a megvalósítására a kép tulajdonságaitól, a kivágandó résztől függően. Nézd meg, milyen ingyenes képszerkesztő programok léteznek, és itt találsz információkat a legnépszerűbb fizetős képszerkesztő programról, az Adobe Photoshop-ról.

Fotó vagy grafika?

Sokan azt gondolják, hogy a fotónak kinéző képek pixelesek a grafikának kinéző illusztrációk pedig vektorosak. De ez nem feltétlenül van így. Egyrészt a profi vektorgrafika egy bizonyos szinten akár egy fotóval is összetéveszthető. Másrészt egy rajzolt illusztráció készülhet hagyományos eszközökkel is, a beszkennelés után ugyanúgy használható a weboldalon, mint egy megszokott jgp kép. Az, hogy fotónak vagy grafikának néz ki egy digitális kép nem mond semmit a keletkezéséről, vagy a használt eszközökről. Az igazi kérdés mindig az, milyen forrás-file áll a rendelkezésedre, van-e valamilyen képszerkesztő programmal megalkotott forrás a jpg file mögött.

Könnyen szerkeszthető digitális képek – vektorgrafika

Képzeld el azt a helyzetet, hogy egy digitális képen található alakzatot át kellene színezned. Ha a digitális képeknek csak az előző fejezetben említett pixeles (más néven bittérképes) megjelenési módja lenne, akkor ez egy rendkívül fáradtságos, unalmas mechanikus munka lenne. Figyeljétek meg például a KWT logó egy részletén, hogy a körvonalak milyen bonyolult módon alakulnak ki. Nem egyetlen színárnyalatból állnak a körvonalakat alkotó pixelek. Átszínezésnél ezeket a tört színeket is ki kellene kísérletezni. Gyakorlatilag olyan mechanikus munka lenne a webgrafikusé, mint a szőnyegszövő kisiparosoké.

A képek elemekre, objektumokra bonthatóak

Valójában az agyunk nem pixelekben fogja fel az elénk táruló világot. Sokkal inkább tárgyakat, objektumokat érzékelünk. Külön neuronok lesznek aktívak, ha egyenes vonalakat látunk. Felismerjük a különböző együtt mozgó alakzatokat. A tárgyak alakját egyszerűbb síkidomokból állítjuk össze, a köröket, háromszögeket, négyszögeket bonyolultabb mintázatokban is el tudjuk különíteni. Különösen érzékeny az agyunk és a szemünk a kontrasztokra, mert a valódi világban a különböző dolgoknak általában a képe is markánsan különbözik. Kivételek persze vannak, gondoljatok csak a kaméleonra.

A vektorgrafika tulajdonképpen egy olyan képek szerkesztésére alkalmas file formátum, amely a képen található alakzatokat nem pixelesen tárolja, hanem más matematikai módszerek segítségével. Ez azt jelenti, hogy az ily módon „kódolt” információkat csak speciális programok tudják olvasni és megjeleníteni. Illusztrációként megpróbáltam leírni, hogyan képzeljétek el a kétféle tárolási módot.

Ebből talán megsejthető, hogy különösen nagy méretű képek esetén, mondjuk egy óriás plakát tervezésekor, a pixelesen tárolt kép jóval nagyobb tárhelyet fog felemészteni. Egy több méteres kört pixelenként eltárolni biztosan sokkal több helyet igényel, mint egy két centiset. A vektorgrafikánál azonban nem ez a helyzet. Pontosan ugyanakkora egy két méteres kör forrás file-ja, mint a két centisé. Ugyanakkor, ha sok dolog történik a képen, sok az alakzat, és nem túl nagy méretű a kép, akkor a pixeles tárolás akár kisebb file-méretet is eredményezhet.

Ha egy vektorgrafikán kapod meg a kör átszínezésének feladatát, kb. 60 másodperc alatt végzel. Megkeresed a kör objektumát, és a kört alakító paramétereknél a körvonal színét kiválasztod a Color Picker panelen. Minden másról a program gondoskodik. Ha vastagabb körvonalat szeretnél, természetesen nem fogod a pixeleket kattintgatni az eredeti körvonal mentén, hanem megkeresed hol kell beállítani az alakzat körvonalának vastagságát. Ahhoz, hogy bonyolult illusztrációkat is lehessen készíteni, ezek a grafikai programok meglehetősen bonyolultak lettek. Minden egyes elem külön mozgatható, színezhető, felület rendelhető hozzá, mintázatot, árnyékot vagy éppen körvonalat kaphat. Egy átlagos Adobe Illustrator munkán akár több ezer beállítási lehetőség van. Az ehhez tartozó kezelő felület egy űrhajóéval vetekszik. Nem véletlen, hogy a webgrafikus rendkívül jól fizetett és keresett szakma. Egyáltalán nem könnyű profi szinten elsajátítani egy vektorgrafikai program használatát. És még ha a kisujjadban is vannak a technológiai alapok, nem biztos, hogy mindez művészi érzékkel párosul…

Ha egy vektoros forrás file-ból kis méretű jpg képet mentünk, és az így keletkezett képet kinagyítjuk, akkor a kép minősége romlani fog. Ellenben, ha az eredeti vektoros képet mentjük el kétszeres méretben, tökéletes marad a minőség.

Az első képen 473 px szélességben mentettem el az oroszlánt jpg-ben az Illustrator Save as funkciója segítségével veszteségmentesen, azaz 100%-os tömörítést beállítva, majd Photoshopban kétszeresére nagyítottam.

A második esetben Illustrator-ban mentettem eleve 946 pixel szélesre a jpg képet és 60%-os tömörítést alkalmaztam, hogy ne maradjon túl nagy a file-méret. Tehát a második esetben még rontottam a minőségen. Figyeljétek meg, hogy az utólag nagyított verzió mennyivel rosszabb minőségű lett (azaz az első eset a rosszabb, a második a vektorgrafika előnyeit illusztrálja). A képekre kattintva azok nagyíthatóvá válnak, hogy megfigyelhesd az apró részleteket. 

Tehát nemcsak amiatt ideális eszköz a logó tervezéshez, mert az elemek tetszőlegesen, kis idő- és energia befektetéssel módosíthatóak, hanem a végeredmény bármilyen méretben és formában jó minőségben áll a rendelkezésre. Töltőtoll vagy óriás plakát, a vektorgrafikaként tárolt logónak édes mindegy. Ha pedig kijönnek a hiper-szuper mega felbontású monitorok, és tízszeres felbontásra van szükség, akkor az is megoldható egyetlen plusz mentéssel.

Vektoros képformátumok

Az Adobe Illustrator legismertebb file-formátuma az .AI kiterjesztésű. Kevesen tudják, hogy ötféle módon is elmenthető egy grafika úgy, hogy minden Illustrator-nak szükséges adat megmarad: AI, PDF, EPS, FXG és SVG. Minden részletes információt megtudhatsz az Adobe hivatalos file-formátumairól a kézikönyvből.

Mikor melyik típusú képre és eszközre van szükséged?

Most már talán kellőképpen összezavarodtál, mégis, mikor, milyen formátumra, kép típusra és grafikai programra lesz szükséged? Összefoglaltam, melyik munkához, melyik eszközt szokták alkalmazni, de természetesen nagyok az egyéni eltérések. Többek között nagyon sok ingyenes képszerkesztő program is létezik, amelyek megpróbálják megközelíteni a „nagyok” funkcionalitását.