Pixelek, kilobyte-ok, fájlformátumok… Képek a weben

Í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.

***

Teljesen érthető módon a weboldalakkal szemben ma már alapvető elvárás, hogy gyorsak legyenek, vagyis hamar betöltődjenek. A sebesség számos tényezőtől függ, úgy mint platform, szerver, internet hozzáférés sebessége, weboldal technikai jellemzői. És persze a weboldalon használt képek és fotók is sokat számítanak.

Mivel úgy látjuk, hogy képek terén szokott lenni némi kavarodás a fejekben, úgy gondoltuk, hasznos lehet tisztázni néhány alapfogalmat és működési elvet.

Alapvető elvek webes képhasználathoz

1. A képeket tekintve adott weboldal akkor lehet a leggyorsabb, ha a képek fájlmérete a lehető legkisebb, legoptimálisabb.
2. Mindamellett a másik fontos szempont, hogy a képek megfelelő méretűek legyenek fizikailag. Pl. nyitóoldalra hatásos, nagy kép kell.

Gyakori, hogy a megrendelők - amikor képeket keresgélnek a készülő weboldalukhoz - azt kérdezik a fejlesztőtől, hogy “Mekkora képet küldjek? Hány kilobyte-os legyen?”

A kérdés oka érthető és nyilvánvaló, azonban ebben az esetben nem értelmezhető. Tudjuk, hogy a kérdés abból fakad, hogy felhasználóként megszoktuk, hogy a Windows és Apple gépeken a fájlméret KB-okban, MB-okban azonnal és egyértelműen látszik.

Ezek a méretadatok azonban a kép minőségéről, felbontásáról nem adnak semmiféle információt. Könnyen előfordulhat, hogy egy kép annak ellenére, hogy KB-okban nézve nagy, minőségét tekintve webes felhasználásra nem alkalmas (legalábbis ott, ahova éppen szánják).

Webes környezetben számoljunk pixelben!

Minden technikai eszköznek, ami weboldal megjelenítésre alkalmas (asztali számítógép, laptop, telefon, tablet) a képernyője pixelekből, azaz képpontokból áll. Nekünk is így kell gondolkodnunk..

Ha egy laptop 1920 px széles és 16:9 képarányú (vagyis 16 egység széles és 9 egység magas), akkor ezen képernyő függőleges pixelszáma 1080.

Ha egy teljes képernyős fotót szeretnénk ezen a monitoron megjeleníteni, akkor 1920 pixelszélességű és 1080 pixelmagasságú képre van szükségünk.

Attól azonban, hogy a pixelszám adott, a fájlméret széles határok között tud mozogni.

Nézzünk egy példát!

Tegyük fel, hogy ezt a szép, epres képet a példaként említett laptop monitoron teljes képernyőt betöltően akarjuk használni. (Itt persze most nem ekkora méretben mutatjuk, mert ezen oldalon nem lenne optimális, de képzeljük el a teljes képernyőt betöltő felhasználást.)

Az 1920*1080 px kép eredeti fájlmérete jpg formátumban 1839 KB, vagyis több, mint 1,8 MB. Ez meglehetősen nagy méret, ezért a fent említett 1.) alapelvünknek nem igazán felel meg.

Mit tehetünk?

Png formátum?

Nézzük meg, mi történik, ha a képet png fájlformátumra konvertálnánk. Milyen eredményt kapunk? A png szintén webkompatibilis, azonban tömörítésmentes formátum. A kísérletünkben a png file 2800 KB lett, ami jóval nagyobb, mint az eredeti jpg, vagyis ez nem jó irány.

Jpg - "tömörítve"

Nézzük meg, mi történik, ha az eredeti jpg fájlformátumot megtartjuk és (megfelelő képszerkesztő szoftverrel) tömörítjük a képet. 50%-os tömörítést választva 191 KB méretű képet kapunk. Jelentős csökkenés, ugye? Mi is történik a tömörítés során? Leegyszerűsítve: a szoftver megvizsgálja, hogy mely pixelek hasonlóak egymáshoz és amiket hasonlónak ítél, azokat “összevonja”, így nem kell minden egyes pixelről külön információt tárolnia, ezáltal tud csökkenni a méret. Az 50%-os tömörítés nem “méretfelezést” jelent, inkább “tolerancia értékként” gondoljunk rá.

WebP fájlformátum

Ha aztán a tömörített 191 KB jpg-t konvertáljuk webp formátumra, akkor további méretcsökkenés érhető el: 134 KB fájlméretet kapunk. Összehasonlítva a kiindulási fájlunk 1839 KB-os méretével, így jókora fájlméretcsökkentést értünk el, szemmel érzékelhető minőségromlás nélkül. Ha ezt használjuk a weboldalunk nyitóoldalán, akkor adott internetsebesség mellett kb. 10-szer olyan gyorsan fog ez a kép betöltődni, mint az eredeti jpg.

Mi az a WebP?

Ahogy a neve is sugallja, kifejezetten internetre szánt formátumról van szó, amelyet a Google fejlesztett ki, és 2010 februárjában publikált. Noha ennek már több mint 12 éve, még mindig nem közismert a létezése. Klasszikus fotómanipulációs eszközökkel nem is lehet előállítani, de mivel már szinte mindegyik böngésző támogatja, ezért egyre inkább terjedőben van.

Minden képre igazak a fenti számok?

Vajon minden jpg kép - függetlenül attól, hogy eper, elefánt, hógolyó vagy egy osztálynyi gyerek van rajta - 1920*1080 pixelben 1839 KB méretű és tömörítés után webp-re konvertálva 134 KB-ra csökken?

A válasz: Nem! Ahány kép, bizony annyiféle mérettel fogunk találkozni.

A fájlméret tehát függ attól is, hogy mi van a képen?

A válasz: Igen! Persze nem azért, mert a számítógép "érti", hogy ténylegesen mi van a képen, hanem azért, mert a fájlméret függ a kép bonyolultságától, a látvány “változatosságától”.

Azonos technikai paraméterekkel (kiterjesztés, tömörítés, pixelszám) rendelkező két kép (például az eredeti epres fotónk, illetve egy téli, havas tájkép) óriási különbségeket fog mutatni fájlméret szempontból:

Látható, hogy a számok jelentősen eltérnek, noha a képek pixelmérete azonos! Abban azonban nincs különbség, hogy a legkisebb fájlméretet mindkét esetben a webp formátum adja.

---

Megjegyzés

Fájlméret-növekedést okoz az is, ha az ún. “metaadatok” is megtalálhatók a fájlban. Ezen adatok pl.: rekesz, zársebesség, ISO-szám, fókusz, DPI, stb.

Noha fontos adatok fotós szempontból, frontend fejlesztési szempontból feleslegesek. Számtalan online oldal és ingyenes képszerkesztő szoftver is létezik ezen adatok eltávolítására.

Összegzés

Elmondható, hogy webes felhasználáshoz a webp fájlformátum a legoptimálisabb. Mielőtt azonban mindenki lelkesen webp-t kezdene használni, fontos néhány dolgot tudni.

Nem mindegyik böngésző jeleníti meg a webp formátumot. Szerencsére a legtöbb böngésző támogatja (támogatottsága jelenleg 90-95%-os), de például a napokban kivezetett Internet Explorer nem jeleníti meg, csakúgy mint az Edge, Firefox, Chrome, Opera és Safari régi verziója / verziói, illetve néhány mobilos Apple és Android sem tudja a webp-t értelmezni.

Webfejlesztőként, frontend fejlesztőként különösen fontos, hogy egy weboldalt úgy kell technikailag létrehozni, hogy az képes legyen érzékelni azt, hogy adott böngésző, amivel a felhasználó a weboldalt nézi, képes-e a webp formátum megjelenítésére, mert ha nem, akkor ilyen esetben alternatívaként jpg képet kell a felhasználó számára mutatni.

Az, hogy ezt technikailag hogyan lehet megtenni, nem fér jelen cikkünk keretei közé, de ha érdekel a téma, akkor érdemes Frontend fejlesztő, Webfejlesztő vagy Webszerkesztés alapjai képzéseinkre beiratkozni!