Digitális képek – minden, amit a pixelekről és a képfelbontásról tudni kell

Szöveges tananyag

A kép felbontása

A képek felbontása határozza meg, hogy mennyire részletgazdagok, mennyire képesek az árnyalatokat, a fényviszonyokat visszaadni, a képfelbontás tulajdonképpen a kép minőségével mutat szoros összefüggést. Úgy lehet a legkönnyebben elképzelni, hogy hány pixelt lehet egy 1cm X 1cm élhosszúságú négyzetbe berajzolni. Ha ezt a kis négyzetet egyetlen pixellel ábrázolnám, akkor ez a felbontás csak egy szín-négyzet ábrázolására volna alkalmas. 64 pixel esetén a görbe vonalak kicsit szögletesnek látszanának. A monitoron kis méretben ábrázolt fotó hiába nagy felbontású, az apró részletek el fognak tűnni, ezért össze kell hangolni a méretet és a felbontást, amivel tovább csökkenthető a file-méret.

Ezen az ábrán egy nagy felbontású képet először kisebb méretben és felbontásban hoztam létre. Annak ellenére, hogy a képernyőn szinte semmilyen különbség nem érezhető, hihetetlen mértékben lecsökkent file-méret (lásd a képek alatti értékeket).

1000px X 668px-es kép, 300 pixel/inch

A kép tömörítése

Optimalizálhatjuk a digitális képeket tömörítéssel is. Ez azt jelenti, hogy a felbontást nem rontjuk le, és a kép mérete is változatlan marad, de a háttérben lefut néhány bonyolult algoritmus, amely intelligens módon próbál meg pixeleket spórolni, hogy a képet tároló file mérete csökkenjen. Az algoritmus állapítja meg, hogy melyik képterületeken lehet büntetlenül rontani a képminőségen. 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ét képet Photoshop segítségével még 30%-os JPG tömörítéssel optimalizáltam. Az 1,3 M-s képből 28 KB-os lett, és 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). Sok ingyenes képszerkesztő program is alkalmas arra, hogy egy fotót tömörítsen, de vannak olyan ingyenesen elérhető, online eszközök is, amelyekkel könnyen és gyorsan elvégezhető a tömörítés, optimalizálható a kép a webre. A Hogyan optimalizáld a képeket a webre – 11 ingyenes képtömörítő eszköz című blogbejegyzésben összehasonlítást is kaphatsz róluk.

1000px X 668px-es kép, 96 pixel/inch

A képek színmélysége és a file méret

Nem csak az számít, hogy hány pixellel írjuk le a képet, hanem az is, hogy hányféle színnel színezzük ki a pixeleket. Egy fekete fehér kép kevesebb információt tartalmaz, mint egy színes. Ez azt jelenti, hogy ha egy képet megpróbálunk kevesebb színnel ábrázolni, akkor csökkentjük a file méretét is. Hivatalosan a színmélység egy bitekben megadott szám, és azt jelenti, hogy hány színt jelenítünk meg a képen. A 8 bites színmélység 256 színnek felel meg. Ezzel nem lehet élethű fotókat visszaadni, mert egy fényképen az árnyékok miatt ennél jóval több árnyalat található. A 16 bites színmélységet „high colornak” nevezzük, a megjeleníthető színek száma 65536. A mai mobiltelefonok kijelzője erre már képes. A 24 bites színmélységet „true color”-nak nevezzük, a megjeleníthető színek száma itt több, mint 16,7 millió. Ez a digitális fényképezőgépek és a monitorok esetében a leginkább alkalmazott színmélység.

Az alábbi képeket PNG formátumban mentettem el. Ilyenkor a Photoshop lehetőséget ad arra, hogy kiválasszam, hány színt használjon az optimalizált mentéshez.

100px x 668px-es kép 2 színt használva

A digitális képek mérete az Adobe megközelítésében

A leggyakrabban egy honlap fotó anyagának manipulálására az Adobe Photoshop programját használjuk, ami nem véletlenül vált iparági standarddá. Vizsgáljuk most meg, hogy amikor Photoshopban átméretezünk egy képet, mi is történik. Az Image menüpont alatt az Image Size almenüpontot választva a következő ablak nyílik meg a programban. Minden egyes megadható mérethez kiválaszthatod azt a mértékegységet, amiben gondolkodni tudsz.

Én most pixelben adtam meg a kép méretét, és pixel/cm-ben a Photoshop-ban Resolution-nek, azaz felbontásnak nevezett értéket. Ebben a példában először egy 10px X 10px-es négyzet alakú kis képet hoztam létre, ahol 2 px/cm-es felbontást állítottam be. Azaz egy cm-en mind a vízszintesen is és függőlegesen is két pixel fér el. Egy 1cm x 1cm-s négyzet 4 pixelből áll eszerint. A teljes négyzet hossza 5 cm.

Tegyük fel, hogy növeljük a felbontást 4 px/cm-re. Azaz éppen a kétszeresére. Ha azt akarjuk, hogy a kép mérete ne változzon, a pixelek számát is éppen kétszeresére kell növelni. 4 pixel/cm felbontás mellett 20 pixeles hossz fog megfelelni az 5 cm-s négyzetnek.

Ha növelem a felbontást és a pixelek számát hagynám változatlanul, akkor cm-ben lenne kisebb a képméret. A kétszeres felbontás ekkor felére csökkentené a szélességet és a vastagságot is. Ekkor a pixel nagyság 1/4 cm lenne, hiszen egy centiméteren belül 4 pixelünk van.

Figyeljétek meg az alábbi ábrán, hogy a Nyomtatás ablakon egy A/4-es papír kb. 20 cm-es oldalhosszúságához képest, negyed akkora a négyzetünk. Valóban megfelel az 5 cm-nek, amit a 2. esetben beállítottunk. Azonban van a képernyő közepén egy pici kék négyzet is. Pedig azt állítottam be Photoshopban a View menüpontban, hogy 100%-os legyen a nagyítás, azaz ne legyen nagyítás, és az eredeti méretben mutassa a képet. Mégis egy fél centis légy piszkot láthattok a képernyőn. Ennek az a magyarázata, hogy az eredeti méreten a Photoshop a pixelben mért hosszt érti. Viszont a monitornak meg van a saját felbontása, és az határozza meg, hogy a képernyőn mekkora is lesz a kis négyzetünk.

Ez a szuper felbontás és képméret kalkulátor segíthet, ha még nem világos a dolog. Kiválaszthatod, hogy például egy A/4-es nagyságú képhez adott felbontás mellett hány pixeles képmérettel kell számolnod és ez mekkora file-méretet fog jelenteni.

A monitor felbontása és egy kis matematika

Ha eddig tudtátok követni, akkor az itt az ideje, hogy még bonyolítsuk egy kicsit a helyzetet. A grafikai programokkal tetszőleges felbontású képeket tervezhetünk. Azonban a különböző megjelenítő eszközöknek, azaz a monitoroknak is meg vannak a maguk fizikai korlátai. A monitor felbontásán ugyanis éppen azt értjük, hogy hány pixelt tud megjeleníteni egy inchen belül. Ez átváltható pixel/cm-be is.

Az én monitorom legnagyobb felbontása jelenleg 1280 px X 1024 px. A konkrét fizikai mérete pedig 37 cm X 29,6 cm. Mi következik ebből? Hogy egy centiméterre vízszintesen és függőlegesen is kb. 35 pixel jut. Egy négyzetcentiméteren 1225 pixelem van. Ha csökkentem a felbontást és beállítom a lehető legkisebbre 800 X 600 -ra, akkor egy négyzetcentiméterre ugyanezzel a számítással kb. 440 px fog jutni. A monitor meg tudná jeleníteni az 1225 kis pontocskát is, de most csak 440-ra adtam utasítást a felbontás átállításával. Nyilván nem fog fehér négyzeteket beállítani, hanem inkább az egymás melletti pixelek egy részét ugyanarra a színre fogja színezni. Azaz a pixel-méretet fogja megnövelni.

Most ugyanezt elmondom visszafelé is, hátha úgy jobban rögzül. Amikor az asztali számítógéped monitorán nagyobbra állítod a felbontást, az azt jelenti, hogy a monitor nagysága ugyan nem változik, de ugyanazon a területen több képpont fog megjelenni. Kisebb lesz egy képalkotó pont, így élesebbek lesznek a képek. Ugyanaz a kör, vagy betű nagyobb felbontás esetén kisebbnek fog látszani.

Most térjünk vissza egy gondolat erejéig a 20 pixeles kis kék négyzetünkre. A monitoromon 1280 X 1024-es felbontás mellett éppen 0,58 cm, azaz fél centinél egy kicsit nagyobb lesz. Éppen akkora, amekkorának a Photoshop kirajzolta 🙂

Képformátumok

A digitális képeket file-ként tárolja a számítógép. Ez azt jelenti, hogy valamilyen szabályszerűség alapján a képet alkotó információk beíródnak a file-ba. Sokféle szabvány és eljárás íródott erre, a legismertebb képformátumok a JPG, a PNG és a GIF. Amikor egy képet valamilyen program segítségével megnyitsz, 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 a Fotó vagy grafika, pixel vagy vektor – digitális képekről alapfokon című blogbejegyzésben találod.

Responsive, azaz eszközfüggetlen Webdesign és a képek

Amikor olyan weboldalakat tervezünk, amelyek bármilyen felbontású képernyőn jól olvashatóak, akkor responsivitásról beszélünk. Ez nem azt jelenti, hogy a weboldal lekicsinyítve megjelenik a mobilképernyőn… ez a témakör messze túlmutat azon a kérdéskörön, hogyan lesz egy kép responsive. Hiszen a teljes tervezést más alapokra kell helyezni, ha csak 10 cm x 8 cm áll a rendelkezésedre egy bemutatkozáshoz. A blokkokból építkező weboldalak éppen emiatt terjedtek annyira el. Hiszen a blokkok széles képernyő esetén egymás mellé, keskeny képernyő esetén pedig egymás alá is pakolhatóak. De érdekes az is, hogyan lehet responsive táblázatokat készíteni, vagy a webshop funkcionalitás hogyan valósítható meg „kicsiben”.

Ezekkel az eszközökkel a saját weboldaladat is tesztelheted, mennyire van felkészülve a rengeteg különböző típusú mobil kütyüre. Megnézheted, hogyan nézne ki Ipad-en, iPhone-on vagy más mobil eszközön. A képre kattintva érheted el a Responsinator online mobil alkalmasság ellenőrző eszközt.

A képek szempontjából az a fontos, hogy a weboldalon belül ne fix szélességűnek állítsd be őket, hanem a width=”100%” típusú szélesség megadásokat részesítsd előnyben. Ilyenkor ugyanis a képernyőn rendelkezésre álló teljes szélességben fognak megjelenni a képek. Ha ez egy mobil képernyő, akkor mobil-szélességben. Profiknak való lehetőség, hogy a mobil képernyőn az eredeti kép kisebbre optimalizált változata kerüljön letöltésre.

Adaptive képek

Olyan képkezelési technika, ahol a különböző felbontás tartományokhoz ugyanannak a képnek egyre kisebbre optimalizált változatait tölti le a böngésző. Ha az alábbi oldalt megnézed és állítod a böngésző ablakának szélességét, akkor láthatod, ahogy egyre kisebbek lesznek a képek. Ha jobb egér gombbal elmented őket, akkor egyre kisebb file-méretű képeket fogsz letölteni.