Minden weboldal kicsit olyan, mint a Playboy magazin: bármilyen színvonalas szöveget is tartalmaznak a lapok, elsőre mindenki a képeket fogja nézegetni, és valójában azzal lehet eladni az egészet. Hacsak nem valami ultraminimalista vagy brutalista stílusú weboldalt tervezel, kell bele a grafika és a fotók, minél több és nagyobb, annál jobb (na jó, értelmes határokon belül). A web kezdeti, betárcsázós  időszakában a képek betöltési ideje idegtépően lassú tudott lenni, és a Netscape Navigator böngészőben sokáig a fő vezérlőgombok közé tartozott a képek kikapcsolása, ha az ember komolyan akart elkezdeni böngészni, vagy csak szeretett volna takarékoskodni az idejével vagy a telefonszámlával.

Ezek a sötét korok szerencsére már rég elmúltak, és a mai honlapokon nem ritka vendég az akár 4K felbontású kijelzőkön is megjelenő, faltól-falig tartó hero image vagy háttérkép és a sok képből álló carouselek. Ugyan a csodák korát éljük, de az internetkapcsolat, legyen az mobil wifi vagy akár kábeles csatlakozás, sajnos még ma sem tartozik a leggördülékenyebb dolgok közé. Az elméleti sávszélesség sem minden, az adatok göröngyös utat járnak be a felhasználó képernyőjéig, és rengeteg  szűk keresztmetszet foghatja meg a rohanásukat. A lassan betöltő internetoldal jól ismert jelenség és minden webdesigner, SEO szakember és fejlesztő mumusa.

A webdesign egyik legfontosabb alapvetése, hogy a képek túl nagyok – nem a pixelszámban, hanem a fájlméretben. Ráadásul mióta a böngészők képesek átméretezni a feltöltött képeket és a képek amúgy is reszponzívan jelennek meg a különböző kijelzőkön, nagyon sok fejlesztő és felhasználó kevés késztetést érez, hogy átméretezze feltöltés előtt a képeit. Az eredmény súlyos kilo-, adott esetben megabájtokban mérhető, amit pedig már minden töltési sebesség észrevesz. 

A helyzetünket nem egyszerűsíti meg Google bátyuskánk sem, aki az oldalunk besorolását a keresési találatokban a jól megírt és jól letapogatható tartalmon kívül még a felhasználóbarát szerkesztéshez is köti, ennek pedig az egyik alapeleme a gyorsaság. A dolgok jelenlegi állása szerint az oldaladnak 3 másodperc alatt kell betöltődnie ahhoz, hogy a keresőalgoritmus jónak tartsa (bár az ideális az 1-2 másodperces töltési idő), és ennek megfelelően 1-2 hellyel a konkurencia elé sorolja, amin egy vállalkozás forintban mérhető előnyhöz vagy hátrányhoz juthat. A Google gyakran hivatkozik statisztikákra, amelyek szerint ha egy oldal nem töltődik be 2 másodperc alatt, az emberek jelentős része egyszerűen bezárja az ablakot és másfele megy tovább. Hogy valójában a te személyes célközönséged mekkora része ennyire figyelemzavaros, azt a sejtéseden kívül csak a gyakorlat dönti el, de  ha az oldaladat átfuttatod a Lighthouse teszten, (Chrome-ben ott találod az F12-vel elindítható fejlesztői opciók között, más böngészőkből pedig a Page Speed Insights weboldalon keresztül teszteltetheted magad, vagy bármelyik tetszőleges weboldalt) jó eséllyel valami lesújtó eredményt fogsz kapni. A Google van olyan kedves, hogy rengeteg javaslattal is előáll, ami hozzásegíthet a töltési sebesség optimalizációjához, ezek között szerepel a képformátumok optimalizációja is.  A nagy Testvér javaslata a hagyományos képtípusok (jpeg, png) lecserélése a modern formátumok, pl. JPEG 2000 vagy WebP használata, ami szerintük jelentősen  lecsökkenti majd a képek méretét.

A képformátumokról

.gif, .jpg, .tif, .pcx, .heic, rengeteg ilyen szép kis betűszó van a képek fájlnevei végén, de mi a különbség közöttük? A technikai részletekbe most nem fogok belemenni, de a dolog lényege, hogy egy digitális raszterkép, ha egyszerűen eltárolnánk minden egyes képkocka színét, sorban, egymás mellett, iszonytató sok helyet foglalna, úgyhogy rettentően rafinált elmék újabb és újabb cseles matematikai trükkökkel állnak elő, amivel minél kevesebb kóddal képesek elmagyarázni a gépünknek, hogyan kell kinéznie a kirajzolandó képnek. Ezt a kódot persze a megjelenítő programnak meg is kell érteni, és tudnia kell dekódolni. Minél trükkösebb a kód, annál nagyobb izomerő kell a gyors dekódolásához is. A tömörítés persze nem varázspálca, sok esetben, különösen, ha túl mohónak bizonyultunk, a kép láthatóan sérül, mindenféle furcsa foltok jelennek meg rajta, vagy elhomályosulnak a korábban szép, éles körvonalak. Vegyük sorra a legfontosabbakat  a veteránoktól a legújabb versenyzőkig!

GIF

Persze léteznek sokkal régebbi képformátumok is, de most inkább ne menjünk bele az iff tga, tiff és más egzotikus régiségek elemzésébe, koncentráljunk a jelenre. A Gif maga is egy őskövület, hiszen annak ellenére, hogy már az internet gyermeke, már 1987 óta velünk van. Ennek megfelelően szűkek is a képességei: a 90-es évek elején a maximum 256 színű paletta még úgy tűnt, mindenre elképzelhető igényre elég lesz, ami egy interneten megjelenő képpel szemben támasztható. A gif formátum töretlen népszerűségét természetesen csakis az animációs képességeinek köszönheti, hiszen se nem szép, se  nem kicsi, de legalább vicces, és mindenre van valami válasza. (Tudtad, hogy az internet egyik legrégebbi állóháborúja a “gif” helyes angol kiejtése körül zajlik?)

JPEG

Ahogy az angol mondja, ez a vajaskenyér, azaz a legelterjedtebb, legmindennaposabb képformátum. A Jpeg (vagy a régi DOS-os idők 3 írásjegyre korlátozott kiterjesztés-formátuma szerint Jpg) már egy fiatalabb versenyző, 1992-ben született, és elsősorban fotók megjelenítését szolgálja, ahol finom színátmeneteket, apró részleteket kell megjeleníteni. A Jpeg tömörítése egy veszteséges módszert használ, de ha nem követelünk tőle túl sokat, alig szúr szemet az információvesztés – ha túltoljuk a biciklit, persze megjelennek az ismerős kockák és foltok a képen. 

PNG

A másik alapeszköz, ami elsősorban azért közismert, mert átlátszó pixeleket is képes kezelni, így a többi klasszikus képtípussal szemben egészen másfajta kompozíciókban is elhelyezhető. A png 1996 óta boldogítja a számítógépes grafikával foglalkozókat. Egyfelől a gif fejlesztéseként alkották meg, de kifejezett célja a fotókra optimalizált jpeggel szemben inkább a grafikák megjelenítése. A Png által használt tömörítési eljárás veszteségmentes kompressziót tesz lehetővé, így élesebbek maradnak az ábrák körvonalai. 

Kevésbé ismert dolog, hogy a Png-nek létezik egy animált változata is, Apng néven, ami mostanra lényegében minden böngészőben működne, átlátszóságot és 24 bites színmélységet tartalmaz, de hiába, a rettenetes minőségű animált Gifek bűvereje megtörhetetlen, velünk maradnak az idők végezetéig.

WebP

Elértünk az újabb harcosokhoz, a WebP a Google trónkövetelője a web meghódítására. A formátumot a Google 2010-ben mutatta be, ám akkor valójában csak a Chrome volt hajlandó megjeleníteni. A Mountain View-i cég afféle mindenes csodafegyvernek szánta a formátumot, ami egyszerre az összes formátumot is kiváltaná, beleértve az animált Gifeket is. 

A Google állítása szerint a modern tömörítési eljárás (ami lehet veszteség nélküli vagy veszteséges is) átlagosan 30%-kal kisebb képméreteket eredményez,mint a Jpg.

Az elmúlt pár évben a WebP támogatása szinte minden böngészőben megjelent, így elvileg a legtöbb akadály elhárult a széles körű használata elől (a kompatibilitás és használat kérdéséről a cikk későbbi részében bővebben is írok). További szimpatikus húzás, hogy a WebP a Google-re jellemző módon teljesen nyílt forráskódú képformátum. 

HEIF/HEIC

Ezt a remek formátumot 2015 óta érhetjük el, veszteséges tömörítési megoldással dolgozik. Elsősorban a Jpg kihívójának szánták – bár a WebP-hez hasonló módon képes alfa csatorna és animáció megjelenítésére is, –  és érdekes módon az Apple állt mögé, bár kicsit sajátos módon, ugyanis az iOS 11 és a macOS High Sierra változata óta mindkét operációs rendszer natív módon támogatja a Heic formátumú képeket, viszont a Safari böngésző máig nem.  

AVIF

A legfiatalabb, nagy reményekkel induló versenyzőt 2019-ben véglegesítették. Az egyik legmodernebb videóformátum, az AV1 tömörítését használja (az AV1 használatában a Netflix is jeleskedik), és úgy tűnik, hogy nagyon jó tömörítési eredmények mellett rettentően sokoldalú formátum. További jó hír, hogy szintén ingyenesen, megkötések nélkül használható formátumról van szó, ugyanis a kodekek nyílt forráskódúak, az AV1-es tömörítés pedig jogdíjmentesen használható. Az avif ugyan nagyon új, de a szakma általános vélekedése szerint ez a jövő nyertese, a kompatibilitáson pedig rohamosan dolgoznak a különböző fejlesztői csapatok. A különböző képformátumok és az avif összehasonlításáról egy nagyon látványos oldalt készített egy Jake Archibald nevű fejlesztő, érdemes végigpörgetni.

Kompatibilitás

Persze ez mind nagyon szuper, természetesen minél jobban összenyomható egy kép, annál jobban szeretjük, ide velük, használjuk! 

Ahhoz, hogy egy képformátumot használni tudjunk a designunkban, a legelső kérdés az, hogy a böngésző, amit használunk egyáltalán képes-e megjeleníteni. Sajnos a helyzet nem kifejezetten rózsás, ahogy a Can I Use adataiból is látható, gyakorlatilag csak a WebP esetében beszélhetünk általános támogatottságról (bár itt is csak a felhasználók 91-94%-ára terjed ki a lefedettség), a Heif/Heic formátumot gyakorlatilag máig egyetlen böngésző sem támogatja, az Avif pedig ugyan felfutóban van, de 64%-os elérhetőséggel még messze van attól, hogy bátran megkockáztathassuk.

A böngésző kompatibilitásán túl a következő kérdés, hogy vajon a weboldal motorja maga hajlandó-e kezelni ezeket a formátumokat? Sajnos ez sem annyira egyértelmű, a WordPress például máig nem kezeli natív módon még a WebP formátumot sem. 

Hogyan használhatod őket?

Az általános jótanács a dolgok jelenlegi állása mellett is az, hogy csak úgy simán ne használj modern képformátumokat – hiába egyszerűbb a képeket simán WebP vagy Avif formátumban feltölteni az oldaladra, még mindig valós esély, hogy belefutsz egy-egy felhasználóba, aki nem támogatott böngészőt használ, és akkor ugrottak a képeid – meg az egész design. A javasolt megoldások sajnos ennél jóval körülményesebbek, és olyan scriptek futtatását tanácsolják, amik úgy konvertálják át a feltöltött képeket, hogy biztonsági tartaléknak meghagyják az eredeti jpg vagy png formátumot is, hogy gond esetén azt szolgálhassák fel a látogatónak. Erre több tutorialt is találhatsz, mélységében foglalkozik a témával pl. a CSS Tricks és a Digital Ocean blog is.  

A WordPress esetében további nehézséget jelent, hogy a WP motorja egész egyszerűen feltölteni sem engedi a szokásostól eltérő képformátumokat. Ezt a htaccessben egy rövid kód használatával át lehet állítani, de ez persze még nem oldja meg minden problémádat – az Internet Folks blog cikke alaposan körüljárja ezt a problémát is. A megoldáshoz, mint mindig, most is pluginok használatát javasolhatjuk, a WordPress már csak ilyen műfaj. A legtöbben általában a ShortPixel pluginjét javasolják. Ez egy nagyobb léptékű méretoptimalizációs szolgáltatás, ami a képek kicsinyítését többek között webp vagy avif formátumok használatával oldja meg. A ShortPixel alapvetően fizetős, de létezik egy, havi 100 kép optimalizálását lehetővé tevő ingyenes sávja is. Akadnak még egyszerűbb megoldások is, mint például a WebP Express, ami különösebb bonyolítások nélkül, céltudatosan webp formátumra konvertálja a képeinket és így szolgálja fel őket az arra méltó böngészőknek, meghagyva az eredeti képeket is a többieknek.