Digitális képek, képállományok

Digitális képek, képállományok

A multimédia fogalma

A multimédia egyidejuleg többféle kommunikációs közegen ("médián", újabban "médiumon") keresztül történő információátadást jelent. A multimédia alkalmazásoktól elvárjuk az interaktivitást, amely lehetővé teszi, hogy a felhasználó képes legyen az információ átadását vezérelni. (Ilyen értelemben pl. egy feliratos film nem tekinthető multimédia alkalmazásnak.)

A multimédia lehetséges előnyei között említhetjük az érdeklődés, figyelem felkeltését (és fenntartását), az intenzív információátadást; a lehetséges hátrányok között pedig például a gyorsabb kifáradást és (például "kéretlen" reklámok megjelenítése esetében) a figyelem elterelését, ill. megosztását.

A lehetséges közegek vagy médiák/médiumok:

• időfüggetlen médiák (pl. egydimenziós: szöveg; kétdimenziós: grafika, kép)
• időfüggő médiák (pl. 1+1 dimenziós: hang; 2+1 dimenziós: animáció, mozgókép; 3+1 dimenziós: virtuális valóság, pl. játékok; időfüggő médiák esetében alapkövetelmény az információ dekódolása és/vagy feldolgozása valós időben)

A multimédia alkalmazásokkal szemben támasztott alapvető követelmények között az egyik legfontosabb a szinkronizáció biztosítása a különbözo médiák között (pl. a hang vagy felirat nem "csúszhat el" a képhez képest). A rendszerint hatalmas mennyiségű digitális adat feldolgozása nagy mértékű adattömörítést kíván meg, a szinkronizáció pedig valós idejű dekódolást (pl. mozgóképek esetén az egyes képkockákat ugyanolyan gyorsan meg kell jeleníteni, mint ahogy eredetileg rögzítettük őket kamerával). Emiatt egy multimédiás alkalmazás technikai (hardver) igénye jóval nagyobb, mint pl. egy "hagyományos" irodai alkalmazás esetében. A gyors processzorok, az elegendően nagy fizikai memória és a nagy kapacitású háttértárak mellett érdemes megemlíteni a jó minőségű grafikus kártyát és monitort, a jó minőségű hangkártyát és hangszórókat, a digitális kamerát (és videodigitalizáló kártyát), továbbá a szélessávú internet kapcsolatot. A multimédiás alkalmazások készítéséhez és lejátszásához a hardver követelmények biztosítása mellett rendszerint szükség van megfelelő multimédiás segédprogramokra (ilyenek lehetnek pl. a kép- hang- és videoszerkesztők, konvertáló, animációkészítő, feliratozó, rajzoló, 3D képszerkesztő stb. programok) és kodekekre (beépülő kódoló-dekódoló segédprogramokra).

további információk:
Multimédia (2020-03-21)
Category:Free multimedia software (2020-03-21)

Digitális képállományok

Foglalkozzunk most a digitális képállományokkal. Érdemes kétfajta digitális képállományt megkülönbözetnünk.

A vektorgrafikus képállományok a képeket geometriai alakzatokból építik fel, és ezek jellemzőit tárolják. A vektorgrafikus állományok előnye a kis fájlméret és a tetszőleges mértékű (torzításmentes) nagyítás, ill. kicsinyítés. Rendszerint ilyen típusú állományokat használnak például a számítógépes tervezés (CAD, Computer-Aided Design) során vagy az ún. TrueType betűtípusok esetében. Az általános iskolai oktatásban korábban ilyen képeket tudtunk előállítani például az Imagine Logo segítségével (bár a rajz elmentése már bittérképes formában történik).

A bittérképes (vagy pontraszteres) képállományok egy képet különböző színű képpontokból építenek fel. Például egy digitális kamera vagy fényképezőgép így állítja elő a képet.

A továbbiakban a bittérképes képállományokkal foglalkozunk.

A bittérképes állományok egyik előnye az, hogy lényegében bármilyen képet megjeleníthetünk a segítségükkel; egyik hátrányuk pedig, hogy felnagyítva őket egy bizonyos méret mellett már meg tudjuk különböztetni az egyes képpontokat (ez az ún. "pixelizálódás" jelensége).

Például hasonlítsuk össze az eredetileg 100x100 méretű és az 500x500, ill. 1000x1000 méretűre nagyított alábbi képeket (különös tekintettel az emotikon fekete széleire):

Az IrfanView képnézegető (és képszerkesztő) program telepítés után egy kiegészítő (plugin) segítségével lehetővé teszi, hogy ezt a hatást közvetlenül is előállítsuk:

A bittérképes képállományok legfontosabb jellemzői:

(a) A sor- és oszlopfelbontás megadja a kép soraiban, ill. oszlopaiban levő képpontok számát (azaz a kép szélességét és magasságát képpontokban mérve). Például egy 1024x768 felbontású digitális kép képpontjai vagy pixelei egy olyan koordinátarendszerben adhatóak meg, amelynek a vízszintes (x) tengelyén 1024 pontot, függőleges (y) tengelyén pedig 768 pontot jelölünk ki (a koordinátarendszer origója rendszerint a kép bal felső sarkában van, az x tengely jobbra, az y tengely pedig lefelé mutat). A sor- és oszlopfelbontás szorzata a digitális kép képpontjainak vagy pixeleinek a számát adja meg (az előző példában ez 1024*768 = 786432 pixel).

(b) A színmélység megadja, hogy az egyes képpontokhoz tartozó színeket hány biten tároljuk. Ez meghatározza, hogy egy adott kép esetében maximálisan hány színt használhatunk. Például
– 8 bit esetén max. 2⁸ = 256 különböző színt használhatunk (mint pl. gif típusú képfájlok esetében, ahol egy ún. színpaletta tartalmazza a képben használt színeket);
– 24 bit esetén pedig max. 2²⁴ = 16777216, azaz több, mint 16.7 millió színt használhatunk a képben; ez az ún. true color színmélység (ez pl. jpg típusú képfájlok esetében fordul elő).

(c) Végül a színmodell megadja, hogy az egyes képpontok színét egy adott digitális képben hogyan kódoljuk. A kódolás során először meg kell határoznunk, hogy hány bitnyi információt használunk az egyes képpontok színének a megadására (pl. 8 bitet vagy 24 bitet), utána pedig meg kell adnunk, hogy az egyes bitekhez hogyan rendeljük hozzá a különböző színeket.

A digitális képek esetében a legismertebb színmodell az ún. standard RGB modell, amely három alapszín (vörös, zöld és kék) keverésével állítja elő a kép különböző színeit. Például, ha 24 biten adjuk meg a színkódokat, az RGB modellben a vörös és zöld alapszínek keverésével a sárga színt az "FFFF00" hexadecimális kóddal adhatjuk meg. Ezt a kódot kettes számrendszerben felírva látszik, hogy
– az "11111111" nyolc bites bitsorozatot rendeljük a vörös színhez (R),
– ugyancsak az "11111111" nyolc bites bitsorozatot rendeljük a zöld színhez (G), és végül
– a "00000000" nyolc bites bitsorozatot rendeljük a kék színhez (B).
(A különböző színmodellekről később lesz részletesen szó.^⇒)

A képfelbontás és a színmélység alapján kiszámíthatjuk, hogy egy tömörítetlen képfájlban mennyi információt tárolunk (technikailag ez a fájl méretét jelenti). Például egy 1024x768 felbontású és 24 bit színmélységű tömörítetlen digitális kép képpontjainak a színét 1024*768*24 bit = 18874368 bit ≅ 18 MBájt mennyiségű információval adhatjuk meg.

A fentebb megjelenített emotikon esetében a fenti információkat könnyen megkaphatjuk az IrfanView képnézegető program segítségével:

A Smiley.png kép felbontása ennek megfelelően 152x151 képpont, színmélysége 8 bit, azaz maximum 2⁸=256 színt tartalmazhat, de ebből a kép csak 128 színt használ. A harmadik képen a kép ún. színpalettáját láthatjuk, amely a képben használt 128 különböző színt jeleníti meg (a színpalettát szintén az IrfanView segítségével kaptuk). A színpaletta a színek kódolásának egy egyszerű, de hatékony formája: egy 8 bites színmélységű kép esetében minden, a képben használt színhez egy 0 és 255 közötti számot, ún. (szín)indexet rendelünk hozzá. A színpalettát például gif vagy png képekben használhatjuk, emellett más kódolási formák is használatosak.^⇒

Képfájlok esetén a kép maximális méretét a képpontok száma és a színmélység szorzata adja. Azonban ez sok esetben nagyon nagy fájlt eredményez; ezért a képfájlokat a legtöbb esetben valamilyen módon tömörítjük. Például
– bmp típusú képek esetén (elvileg) lehetséges az ún. futamhossz-kódolás;
– gif típusú képfájlok esetében az ún. LZW algoritmust használjuk a képfájl veszteségmentes tömörítésére;
– jpg formátumú képek esetén egyidejűleg több (veszteséges és veszteségmentes) tömörítési eljárás is előfordul, ilyenek pl. a diszkrét koszinusz transzformáció (DCT) vagy a Huffman-kódolás.

A képfájlok tömörítésének lényege egyrészt a felesleges ismétlődések (redundanciák) kiszűrése; másrészt azoknak az információknak az elhagyása, amelyek nem eredményeznek érzékelhető változást a képek minőségében.

további információk:
BMP (2018-02-23)
Graphics Interchange Format (GIF) (2018-02-23)
PNG (2018-02-23)
JPEG (2018-02-23)

Színmodellek

Korábban már említettük,^⇒ hogy a színmodell megadja, hogy egy digitális kép esetében az egyes képpontok színét hogyan kódoljuk. Három alapvető színmodell az RGB, a HSL és a CMYK modell.

Az RGB színmodell esetén minden színt a vörös, zöld és kék alapszínek különböző mértékű, ún. additív keverésével állítunk elő. Az R,G és B alapszínek relatív intenzitását egy [0,255] intervallumba eső egész számmal adjuk meg. Például a számítógépes monitorok rendszerint ezt a módszert használják a színek előállítására.

Próbáljuk ki, hogy például R=165, G=42 és B=42 esetén milyen színt kapunk.

A HSL vagy HSB színmodell esetében egy színt a színárnyalat vagy színezet (color Hue), a (szín)telítettség, tisztaság vagy élénkség (Saturation, colorfulness, chroma, color purity) és a fényerő vagy világosság (Luminance, Brightness, lightness) segítségével adunk meg. A H, S és L értékek a [0,1] intervallumba eső valós számok.

Próbáljuk ki, hogy például H=0.5, S=1 és L=0.5 esetén milyen színt kapunk. (Jegyezzük meg, hogy a maximális intenzitású alapszínekhez – a másik két alapszín zérus intenzitása mellett – L=0.5 luminancia vagy világosságérték tartozik.)

A HSL modell például a Munsell-féle színrendszer alapján a következő ábrával szemléltethető (az ábrán a "Hue" a színárnyalatnak, a "Chroma" a telítettségnek vagy tisztaságnak, a "Value" a fényerőnek felel meg; jegyezzük meg, hogy a Munsell-féle színrendszer nem ekvivalens a HSL modellel, mert az egyes színárnyalatok elhelyezkedése a színkörben különböző):

A CMYK színmodell esetében egy színt a cián (Cyan; türkiz vagy zöldeskék), magenta (Magenta; intenzív bíborvörös), sárga (Yellow) és fekete (blacK; más források szerint a 'K' a Key rövidítése) színrétegek egymásra helyezésével állítunk elő, ahol a C, M, Y és K értékek a [0,1] intervallumba eső valós számok. Az alapszínek ún. szubtraktív keverésének lényege az, hogy egy adott színű réteg kiszűri a vele ellentétes színeket (gondoljunk pl. egy olyan szemüvegre, amely sárga lencséket tartalmaz). Például a színes nyomtatás ezen az elven történik.

Próbáljuk ki, hogy például C=0, M=0, Y=1 és K=0 esetén milyen színt kapunk.

Kontraszt

Egy képpont színe egyaránt megadható az RGB és/vagy a HSL színmodellben, azonban a teljes képnek (vagy a kép egy meghatározott tartományának) további jellemzői is vannak. Ezek közül az egyik legfontosabb a kép egyes részei közötti kontraszt, amely lehetővé teszi a képen ábrázolt objektumok megkülönböztetését, ill. felismerését (a gyengén látók számára például a vizuális kijelzőkön megjelenített betűk színe és háttere közötti kontraszt erőssége rendkívül fontos). A kontrasztot a képpontok színének és/vagy a fényerejének a különbsége határozza meg.

A kép két adott részlete esetében a kontraszt általános jellemzésére szolgálhat a képrészletekre számított maximális és minimális fényerő (luminancia) különbségének és a képrészletek környezetében számított átlagos fényerőnek a hányadosa. Ha például egy monokromatikus kép esetében két, azonos méretű és egyenként azonos (L₁ és L₂) fényerejű képrészlet alkotja a képet, a közöttük fennálló kontraszt

ahol az adott képrészletekre L_max a fényerő legnagyobb, L_min pedig a legkisebb értéke (0≤L≤1). (Más képletek is használatosak, pl. az ún. Michelson-féle képletben a tört nevezőjében a fényerő legnagyobb és legkisebb értékének összege szerepel, a 0.5-ös szorzó nélkül.)

Például, ha a képrészletek azonos méretűek, fekete (L=0) és fehér (L=1) képrészletek esetében a láthatóság 2, fekete (L=0) és sárga (L=0.5) képrészletek esetében a láthatóság szintén 2 (tiszta spektrumszínek esetén a luminancia 0.5). (Megjegyzés: mivel az emberi szem érzékenysége különböző színekre más és más, színes megjelenítés esetén a sárga-fekete kombinációt tekintik optimálisnak.) Fehér (L=1) és sárga (L=0.5) képrészletek esetében a láthatóság 0.67, azonos fényerejű képrészletekre (például sárga háttér és kék előtér esetén) pedig a láthatóság 0.

Különböző méretű képrészletek, például adott színű háttérre írt, azonos színű és kis méretű alakzatok (pl. betűk) esetében legyen az előtér/háttér méretarány 'r', ami a betűk viszonylag kis terjedelme miatt egy nagyon kicsi szám (0<r≪1). Mivel definíció szerint előtér≤háttér, 'r' maximális értéke 1. Vezessük be a láthatóságra a következő képletet:

A képletből következik, hogy a láthatóság nagyobb, ha sötét hátteret választunk (L_háttér=L_min, L_előtér=L_max). Jegyezzük meg, hogy ha r=1/2, akkor a fenti képlet megegyezik a korábban megismert képlettel. Fekete háttér esetén L_háttér=L_min=0 miatt a képlet láthatóság=1/r alakra egyszerűsödik, ami kis 'r' értékek esetén nagy láthatóságot eredményez. (Az r=0 értéknek nyilvánvalóan nincs értelme.)

Feladatok

(1) Indítsa el a Total Commander, az IrfanView és a VirtualDub programokat!

(2) Hozzon létre egy szocikkek nevű mappát, és ebben dolgozzon!

Az előadás anyagából válasszon ki 10 különböző fogalmat, és keressen ezekhez megfelelő Wikipédia szócikkeket. Minden fogalomhoz hozzon létre a szocikkek mappában egy új mappát és ebben hozzon létre egy új szöveges fájlt, amibe a megfelelő Wikipédia szócikk néhány lényeges mondatát bemásolja. Ezután hagyjon ki két üres sort, és írja le a megfelelő Wikipédia szócikket mint elektronikus dokumentumot. Végül mentse le a Wikipédia szócikk képernyőképét:
– ALT PrintScreen után a böngésző képernyőképét másolja be az IrfanView programba,
– állítson be 640 képpont szélességet (vagy 640 képpont magasságot, ha nagyobb képeket szeretne), és
– CTRL S után mentse el a képet gif formátumban a megfelelő mappába.
Tipp: mind a mappák neve, mind a bennük létrehozott szöveges fájlok és képállományok neve egyezzen meg a kiválasztott fogalom nevével (ékezet nélkül, szóköz helyett aláhúzás karaktert használva).

Ha elkészült, tömörítse össze a létrehozott mappákat nevezze át az így kapott zip fájlt a saját neve felhasználásával, és az állományt küldje el.

Képszerkesztési feladat

(3) A korábban létrehozott szocikkek nevű mappában hozzon létre egy új, szinek nevű mappát, és ebben dolgozzon!

(4) A fontosabb színeket és színkódokat tartalmazó táblázat^⇒ kiegészítéséhez keressen négy új, árnyalatában jelentősen különböző, a táblázatban még nem szereplő színt az interneten, és adja meg a keresett színre vonatkozó alábbi jellemzőket:

• a szín magyar neve
• a szín angol neve (vagy ha más idegen nyelvet tanul, német stb. neve)
• a szín HTML kódja
• a szín CSS (RGB) kódja
• a szín CSS (HSL) kódja

Például a "Bordóvörös" nem szerepel a táblázatban, de létezik Wikipédia szócikke. A szín jellemzői:

• a szín magyar neve: bordóvörös, sötétvörös
• a szín angol neve: maroon
• a szín HTML kódja: #800000
• a szín CSS (RGB) kódja: rgb(128,0,0)
• a szín CSS (HSL) kódja: hsl(0,1,0.251) (tipp: írja be a HTML kódot a színkódokat tartalmazó táblázat alatti szövegdobozba!)

A Wikipédia szócikk leírása:

Bordóvörös – Wikipédia.
https://hu.wikipedia.org/wiki/Bord%C3%B3v%C3%B6r%C3%B6s (2020-04-01)

Hozzon létre egy szinek.txt nevű szöveges állományt, ebbe írja bele a fenti színjellemzőket, és mindegyik szín után adja meg a fenti módon (a weblap címe, pont és új sor, a weblap webcíme, és zárójelben a dátum) annak a weboldalnak a leírását, amelyen a színre vonatkozó információkat találta.

A felhasznált weboldalak képernyőképét is készítse el, és mentse le 800 képpont szélességű gif állományként. A képek neve egyezzen meg a megfelelő szín nevével. Például az alábbi Wikipédia képernyőképet elmenthetjük bordovoros.gif néven:

(5) Készítsen az IrfanView Kép menüjének Új (üres) kép készítése... menüpontja segítségével egy 800x600 méretű, tetszőleges, de színes hátterű üres képet (a példákban csak azért szerepel fehér háttérszín, hogy a képernyőképek jobban látszódjanak):

Írja fel a háttér színének beállításkor kapott RGB kódot (a képen bekarikázva)!

Mentse el a képet (CTRL S) jpg formátumban, alap.jpg néven. Az IrfanView Szerkesztés menüjének Speciális kijelölés-készítés... menüpontja (SHIFT C) segítségével adjon meg egy 200x100 méretű kijelölést:

Figyelem: a Speciális kijelölés-készítés ablakban első használatkor az ablak bal oldalán, a Szélesség/magasság oldalarány felirat alatt feltétlenül állítsa be a "Nincs" opciót, mert enélkül nem tudja a kijelölés szélességét és a magasságát együttesen beállítani!

Ha sikerült a beállítás, az IrfanView képernyőjének bal szélén egy 200x100 méretű téglalap jelenik meg. Ez egy olyan kijelölt területet jelent a képen, amelybe például szöveget tudunk írni és képet tudunk beilleszteni, a tartalmát ki tudjuk másolni vagy vágni stb. A téglalapba a jobb egérgombbal kattintsunk bele, és tartsuk lenyomva az egér jobb gombját. Ezután a kijelölést az egér elhúzásával mozgassuk a kép közepére.

Figyelem: ha véletlenül az egér bal gombjával kattintunk a kijelölt területre, azt az IrfanView nagyításnak tekinti, és a kijelölt területet jeleníti meg a teljes ablakban. Ilyenkor nyomjunk két ENTER-t (váltás teljes képernyős módba és vissza), és kezdjük újra a kijelölést.

Most kattintsunk az IrfanView Szerkesztés menüjének Szövegbeszúrás... menüpontjára (CTRL T).

A Szöveg beszúrása ablak "Szöveg:" szövegdobozába írjuk be a "Színek" szöveget. Ez fog majd megjelenni a 200x100-as kijelölésben, a kép felirataként. Állítsuk be az ablakban a következőket:

• a Betűtípus gombra kattintva állítsunk be ízlés szerint egy szép betűtípust, valamint félkövér 36-os betűstílust és betűméretet;
• a Szín gombra kattintva állítsuk be az általunk választott háttérszín ellentétes színét; ennek RGB kódja a háttérszín korábban felírt RGB kódjából úgy kapható, hogy egyenként minden kódot kivonunk 255-ből. Tehát ha például kék hátteret választottunk (R: 0, G: 0, B: 255), akkor a betűszín sárga lesz (R: 255, G: 255; B: 0);
• a "Szövegelrendezés:" szöveg után állítsuk be a középre zárt opciót;
• ízlés szerint kapcsoljuk be a "Körvonal" vagy az "Árnyék" opciókat.

Ezután a bal egérgombbal "megfogva" húzzuk jobbra a Szöveg beszúrása ablakot, hogy látszódjon a kijelölés. Kattintsunk az Előnézet gombra, és ha nem tetszik a kijelölésben megjelenő szöveg stílusa, tetszés szerint módosítsunk a beállításokon. Ha kész vagyunk, kattintsunk az OK gombra, és mentsük el a képet ugyanolyan néven (CTRL S), felülírva a korábbi képet.

(6) Most térjünk vissza a korábban elmentett képernyőképekhez. Nyissuk meg például a bordovoros.gif nevű képet, és kicsinyítsük le 250-es szélességre. Írjuk fel a kicsinyített kép méretét (esetünkben 250x145 pixel, ez az IrfanView ablakában az alsó, ún. státuszsor bal szélén látható). Mentsük el a lekicsinyített képet (ún. "bélyegképet", angolul thumbnail) úgy, hogy a kép nevéhez hozzátesszük a kis_ előtagot, tehát esetünkben kis_bordovoros.gif néven:

A lekicsinyített képet tartalmazó IrfanView ablakban másoljuk a képet vágólapra (CTRL C).

Ezután nyissuk meg az alap.jpg képet, és hozzunk létre egy kijelölést SHIFT C segítségével, amely a lekicsinyített kép (kis_bordovoros.gif) méretének megfelelő méretű, azaz esetünkben 250x145. Húzzuk a kijelölést jelző téglalapot a jobb egérgomb lenyomásával a kép megfelelő helyére (a kép közepén levő "Színek" felirattól "északnyugati" irányban úgy, hogy esztétikusan töltse ki a kép bal felső negyedét), majd másoljuk be a képet a vágólapról (CTRL V). Eredményül a következő képet kapjuk:

Ha elégedettek vagyunk az eredménnyel, mentsük el (CTRL S) a képet ugyanolyan néven, azaz ismét felülírva a korábbi alap.jpg nevű képet.

Ismételje meg a fenti eljárást a szinek mappában szereplő minden, korábban elmentett képernyőképre. A bélyegképeket egyenként másolja az alap.jpg kép megfelelő helyére (a szövegtől ÉK, DK és DNY irányban, esztétikusan elrendezve a bélyegképeket). Ha a kép kész, a "Színek" szöveget és a négy bemásolt bélyegképet tartalmazó alap.jpg képet nevezze át szinek.jpg néven:

Végül ellenőrizze a mappa tartalmát. Ha jól dolgozott, a következő állományok szerepelnek benne:

• szinek.txt
• négy képernyőkép (pl. bordovoros.gif, ...)
• a négy képernyőkép bélyegképe (pl. kis_bordovoros.gif, ...)
• szinek.jpg (amely a "Színek" szöveget és a köré bemásolt négy bélyegképet tartalmazza)

Gyakorlás, ismétlés

(7) Készítsen egy viragok, allatok és dragakovek nevű mappát a szinek mappához hasonlóan, és töltse fel a megfelelő fájlokkal. A mappákban levő szöveges állományok (a viragok.txt, allatok.txt és dragakovek.txt) most értelemszerűen csak a megfelelő weboldalak leírását tartalmazzák.

Tömörítse össze a négy mappa tartalmát egy zip állományba, nevezze át a tömörített fájlt a saját neve felhasználásával (pl. puk_kata.zip), és az így kapott állományt küldje el.