Ahogy minden más a webes területen, a képek formátuma illetve tárolása is folyamatosan fejlődik. Szakemberek a retinakijelzőre való optimalizálást emlegetik és előszeretettel ajánlják a
következő generációs képformátumokat. Ugyanerre figyelmeztetnek a különböző elemzőprogramok, Google PageSpeed eredményeknél is gyakran találkozhatunk hasonlóval. Ebben a cikkünkben összefoglaljuk a trendeket, illetve megoldást is kínálunk ezekre.
Mik a következő generációs képformátumok
A 90-es évek elején alakították ki a sokáig népszerű JPG formátumot, ami veszteséggel tömöríti a kép tartalmát. Sajnos szemmel látható, jellegzetes torzulásokat, hamis kontúrokat, elmosódott vonalakat, szellemképeket eredményezett ez a formátum mindig is a tömörítés mértékétől függően. Vizuálisan és a Google szempontjából is elfogadhatóak a mai napig a 92% feletti minőségi értékkel mentett JPG formátumú képek. Alternatívája a PNG lett, ami ugyan nem jár adatveszteséggel, de mégis viszonylag rövid fájlméretet eredményezett.
2010-re megértek a reformra ezek a korábbi fájlformátumok. A JPG továbbfejlesztése a JPEG2000 lett, ami azonban kevéssé terjedt el annak ellenére, hogy jobb tömörítést lehet vele elérni és egyéb kedvező tulajdonságai is vannak. Jelenleg szinte kizárólag az Apple termékei támogatják ezt a normát. Sokkal inkább figyelemre méltó a
WebP formátum, amit a Google fejlesztett ki és a legtöbb platform valamint böngésző jelenleg is támogat, az Apple újabb termékeinél az év végétől, a Safari 14-es verziójától elfogadott lesz.
WebP-ről dióhéjban
A WebP egy olyan képformátum, ami képes veszteséges és veszteségmentes tömörítést is alkalmazni. A Google alapvetően azért fejlesztette ki, hogy csökkentse a web hálózati forgalmának kétharmadát adó képfájlok átlagos méretét, ezzel is gyorsítva a weboldalak betöltődését. A Google tesztjei szerint, amit a weben található egymillió véletlenszerűen kiválasztott képfájl (többnyire JPG és PNG) tömörítésével végeztek, átlagosan 39%-kal lehetett csökkenteni a fájlok méretét, szemmel látható minőségvesztés nélkül.
A WebP tömörítés prediktív kódolást használ egy kép tömörítésére, ugyanezt a módszert használja a VP8 video codec a videók kulcskereteinek tömörítéséhez. A lényege az, hogy egy blokkon belül nem tárol minden pixelhez minden információt, hanem a szomszédos pixelek alapján előrejelzi az azokhoz mért eltérést.
Miért nem használja mindenki?
A fentiek persze teljesen jól hangzanak, egyértelmű, hogy érdemes átállni új generációs képformátumokra. Azonban egyik formátumnak sem teljes körű a támogatása. Ahogy fent is írtuk, a Safari böngésző jelenleg az új formátumok közül még csak a JPEG2000-et támogatja, amit a Chrome, Edge, Explorer, Firefox és társai alapból nem. A WebP már támogatottabb, de régebbi Apple eszközökön (ahol az új Safari nem lesz elérhető) illetve Explorerben már nem működik.
Ezzel kellően sok borsot törnek a webmesterek orra alá, mivel nem lehet általánosan egy bizonyos képformátumot tárolni és küldeni minden kliens felé. Emiatt nem terjedt el általánosan egyik szabvány sem, napjainkban is még elég kevés weboldalon, webáruházban használják őket.
WebP kategória- és termékfotók az Unas rendszerben
Haladva a korral kifejlesztettünk egy intelligens algoritmust, ami a böngészőt felismerve olyan képformátumot küld a látogató felé ami nála támogatott. Alapesetben a webáruház üzemeltető feltölthet JPG, GIF, PNG formátumú termék és kategória képeket,
VIP csomag estén pedig WebP formátumot is elfogad a rendszer. Képenként természetesen elegendő egy formátumban feltölteni. Az algoritmus ezeket szükség szerint konvertálja és közülük a Google által is a leginkább támogatott formátumot, a WebP-t fogja a látogatónak megjeleníteni. Ha nem támogatja a böngészője a WebP-t, akkor a JPG lesz a befutó. Ha a termék és kategória fotói JPG-ben állnak rendelkezésre vagy azokat korábban JPG-ben töltötte fel,
VIP csomag esetén akkor sincs teendője, mivel az algoritmus a háttérben elvégzi a konvertálást.
Módosítható elemek WebP-ben
Hasonlóan a termékfotókhoz,
VIP csomag előfizetésével a sablonok módosítható elemei esetén is működik a fenti algoritmus. Függetlenül attól, hogy az üzemeltető milyen formátumban töltötte fel a módosítható elemek képi tartalmát (pl. logó vagy startoldali nagy banner), ha a látogató böngészője támogatja a WebP-t, azt fog kapni. Nagyobb méretű slideshow-nál még fontosabb ez, hiszen a PageSpeed-nél jelentős lassulást okoz a nagyobb adatmennyiség.
Itt érdemes megemlíteni azt is, hogy a módosítható elemeink, a slideshow-k fel vannak készítve arra, hogy kisebb méretű kijelzőkön más kép kerüljön az elembe. Ez azért is lényeges, mivel állított kijelzőn, mobilon más mutat jól, mint például fekvő asztali kijelzőn.
Optimalizáljon retina kijelzőre
A retina kijelző az Apple szóhasználatából ered, de manapság minden nagy felbontású kijelzőt így emlegetnek. A retina kijelzők képpontsűrűsége olyan nagy, hogy az emberi szem nem képes különálló képpontokat érzékelni normál nézőtávolságból. Tipikusan a mobiltelefonok ilyenek, ahol maroknyi területen több millió pixel helyezkedik el a képernyőn.
Érdemes figyelni arra, hogy kellő méretű termékfotót töltsön fel.
VIP csomag előfizetése mellett a rendszer érzékeli a látogató kijelzőjének felbontását és ennek megfelelően dupla felbontású képet jelenít meg neki. A modernebb design sablonok esetén a módosítható elemeknél pedig már
PREMIUM csomagtól elérhető a retina felbontású képek feltöltésének lehetősége. Ezáltal elérhető, hogy mobilokon, nagyobb felbontású kijelzők esetén is tűéles képet lásson a látogató a webáruházban.
