Mi a WeBP?

Gyors weboldalt szeretnél(hogyan gyorsítsd WordPress weboldalad) vagy simán csak egy zökkenőmentesen betöltődő webhelyet? Ha a válaszod igen, akkor nem hagyhatod figyelmen kívül a WeBP-t. Ez ugyanis a webhelyeket nemcsak egyszerűbbé, de gyorsabbá is teszi. A WeBP egyesíti a PNG és a JPG szolgáltatásait. Röviden összefoglalva: nem más mint a képformátumok új királya.

Nézzük meg azért közelebbről. A WEBP egy olyan képformátum mint a PNG, JPG vagy a GIF, azonban több olyan érdekes tulajdonsággal rendelkezik, amelyeknek sokoldalúságát köszönheti. Fontos azt is megjegyezni, egy Google kifejlesztett és kiadott képformátumról beszélünk.

Néhány fő sajátossága:

  1. Támogatja a Lossy és Lossless Compress funkciókat.
  2. A WeBP veszteségmentes képek mérete 26%-kal kisebb, mint a PNG, valamint 25-35%-kal kisebb, mint a JPEG.
  3. Kis méretének köszönhetően hiába tartalmaz a webhely nagy mennyiségben képeket, a WeBP-nek betudhatóan a webhely könnyebb, gyorsabb és sokkal SEO-barátabb lesz.

Vessünk egy pillantást az alábbi képre.

    A bal oldalon a kép JPG verzióját láthatjuk, amelynek mérete 1,3 Mb. A jobb oldalon a WeBP verzió látható, amelynek mérete 430 kb.  El tudod ezt hinni? Egészen addig, amíg nem nagyítunk rá, semmi észrevehető különbség nincs a két kép között.

    Ilyen értelemben egyértelmű tehát, hogy a WeBP segítségével úgy tudjuk csökkenteni a kép méretét, hogy ne veszítsünk a minőségből.

    Viszont tartsunk észben, hogy a WeBP nem helyettesíti a JPEG és a PNG képeket. Továbbra is fennáll az a probléma, hogy nem minden böngésző támogatja a WeBP formátumot. Éppen ezért adjuk meg a kép JPEG vagy PNG változatát is arra az esetre, ha a felhasználó böngészője nem támogatja a WeBP-t.

    Hogyan konvertáljuk WeBP-re képeket?

    Ennek különböző módjai léteznek. Nézzünk meg néhányat:

    Online képátalakító: Használhatunk olyan weboldalt, ahova fel tudjuk tölteni az átalakítandó képet, majd a konvertálás után le tudjuk tölteni az átalakított fájlt. Ilyen például a https://squoosh.app/ weboldal. Fontos azonban, hogy a fájl feltöltése után szükség lehet némi testreszabásra, valamint ne felejtsük kiválasztani a WeBP-t kimeneti formátumként.

    Szoftver: Bizonyos szoftverek lehetővé teszik PNG és JPEG fájlok WeBP formátumban való exportálását. Ha ilyennel próbálkozunk, jó választás lehet olyan szoftver mint például az Adobe Photoshop, a Sketch, stb.

    Node JS: A nodeJs parancsfájl segítségével bármilyen képet WeBP-be tudunk konvertálni. Használhatjuk például az imagemin-webp bővítményt a képek WeBP-vé alakításához.

    Gulp: A Gulp az egyik legkönnyebben használható munkafuttató. Természetesen meg kell tanulnunk helyesen beállítani használat előtt. A WeBP képek átalakításához használhatjuk a gulp-webp bővítményt. 

    Grunt: A fent említetthez hasonlóan, a Grunt is egy konvertálásra alkalmas munka futtató.

    Webpack: Ezt történetesen nem használjuk, de attól függetlenül a lista részét képezi.

    Az előbbiekben felsorolt módszerek bármelyike alkalmas arra, hogy egyéb formátumú képeket WeBP-vé konvertáljunk.

    Van viszont egy probléma!!!

    Mint tudjuk, nem minden böngésző támogatja a WeBP formátumot, éppen ezért szükségünk megadnunk a tartalék képet a HTML-ben. Ennek az a lényege, hogy ha a felhasználó olyan böngészőből nyitja meg az oldalt, amely nem támogatja a WeBP formátumot, akkor más, JPG vagy PNG formátumban jelenjenek meg a képek.

    Általában így írunk:

    Viszont abban az esetben, ha a felhasználó által használt böngésző nem támogatja a WeBP formátumot, akkor a felhasználó nem fogja látni a képeket. Ezt tartalék képek használatával tudjuk megoldani:

    3 dolog történik:

    1. A WeBP formátumot támogató böngésző a WeBP-ben jeleníti meg a képet az első forrás címkéből.
    2. A WeBP formátumot nem támogató böngésző JPG formátumban jeleníti meg a képet a második forrás címkéből.
    3. Egyes böngészők egyáltalán nem támogatják a kép elemet. Ezek az img címke képet fogják mutatni.

    HTML-ben könnyen használhatunk tartalék képeket. CSS-ben ez viszont egy kissé bonyolultabb. Ennek megoldására használhatjuk például a Modernizr nevű javascript könyvtárat. Erre azonban véleményünk szerint nincs szükség, ugyanis nincs olyan funkció, amely minden böngészőt támogatna. 

    Hátrányok

    1. Szükséges két kép készletet kell használnunk. Az egyik WeBP formátumú, a másik PNG vagy JPG formátumú.

    Mind az előnyöket, mind a hátrányt beleszámolva, úgy gondoljuk, hogy a WeBP-nek sokkal több előnye van, mint hátránya, hiszen gyorsabbá teszi a weboldal betöltési idejét.

    Köszönjük, hogy elolvastad cikkünket. Kövess minket, hogy mindig időben értesülj a legújabb cikkekről!