_{WebP képet a WordPress honlapra is}

A WebP képformátum a Google fejlesztése. Jobb minden ezt megelőző képnél. Nézzük csak mitől ilyen szuper ez a WebP a honlapon, melyek a jellemzői, hogyan jutunk WebP képekhez, hogyan lesz a képünkből, fotónkból WebP. 

A WebP egy modern képformátum, amelyet a Google fejlesztett ki. Hatékonyabb képtömörítést és jobb minőséget biztosít a meglévő formátumoknál. Nem elhagyhatóak a régi jpg, png, gif formátumok alkalmazása sem, de ahol adottak a feltételek, ott inkább a WebP-t használjuk. Jelen írás bevezető képe is webp formátumú.

6 WebP jellemző, szerintem a legfontosabbak

Számos jellemzővel rendelkezik a WebP, amelyekkel több területen jobban használható, de legfőbb felhasználási helye a web, a honlapok: 

1. Vektoros és bitmap képek támogatása: A WebP mind vektoros, mind bitmap kép lehet, lehetővé téve a különböző típusú grafikai tartalmak hatékony tárolását.
   — a honlapon a vektoros kép adhat gyorsabb betöltődést;
2. Képtömörítési algoritmusok: A WebP mindkét tömörítési algoritmussal rendelkezik. Hogy melyiket használjuk a weboldalon? Választhatnánk a jpg és a png kép közül is, de ezzel lemondanál a minőség beállításáról:
   • Veszteséges: A veszteséges tömörítés mindig kis fájlméreteket eredményez. A weboldalnak gyorsabb betöltődést tesz lehetővé a kisebb méretű fájl, ám egy ponton túl a kép minőségének rovására megy.
     – veszteséges tömörítésű fájlformátum a jpg kép.
   • Veszteségmentes: A veszteségesmentes tömörítés eredménye egy nagyobb méretű képfájl, amely a weboldal lassabb betöltését vonja maga után. A kép minősége kiváló.
     Azok számára, akik a minőség megőrzésére összpontosítanak, veszteségmentes tömörítést kínál
     – a png képformátum veszteségmentesen tömörített. 
3. Jó kompressziós hatékonyság: A WebP-t tervezés során arra optimalizálták, hogy jó minőségű képeket biztosítson alacsonyabb fájlméretben, összehasonlítva más népszerű formátumokkal.
4. Átlátszóság: A WebP képes eltárolni az átlátszóságot, ahogy azt megszoktuk eddig a png képeknél. A honlapok logót, ikonokat, rajzokat használnak png formátumban, átlátszó háttérrel. 
5. Animáció: A WebP lehetővé teszi az animált képek létrehozását is, ami egyes esetekben lehet alternatívája a GIF formátumnak.
6. Széles körű támogatás: Bár a WebP formátumot a Google fejlesztette ki, azóta széles körű támogatást kapott a böngészők és más alkalmazások részéről is. A honlapos alkalmazásához kell a tárhely-, kiszolgáló támogatása is.

A WebP tehát egy sokoldalú képformátum, amely a képtömörítés terén különböző előnyöket kínál. 

Hogyan juthatunk WebP formátumú képfájlokhoz?

Említettem már, hogy egyre nő a támogatottsága, böngészők, CMS-k, tárhelyek, … A kép megosztó oldalakról még ugyan nem lehet letölteni ebben a formátumban képeket – még nem találkoztam vele -, de könnyedén tudunk WebP képeket ’előállítani’:

1. Bármely képfájlból készíthetünk WebP képet, ha a weboldalra történő feltöltés előtt egy erre alkalmas programmal vagy alkalmazással átkonvertáljuk. Egy ilyen – saját gépen telepítendő képszerkesztő program a Gimp, használatát a Gimp Suliban megtanulhatod ☺.
   1. az előnye: magad állítod be a kép tömörítésének mértékét, a kívánt minőséget, miközben a minőségét Te magad kontrollálhatod.
2. A honlapra feltöltött képeket is átalakíthatunk WebP formátumra. Ehhez két feltételnek is teljesülnie kell:
   1. A honlap CMS – mint a WordPress vagy Drupal rendelkezik webp formátumra történő átalakítás képességével. (a Drupal 10-s weboldalon pl képstílusok készítésével, majd alkalmazásával tehetjük meg ezt az átalakítást, a WordPress képeinek optimalizálásáról többet is olvashatsz). 
   2. A honlap képességének kiaknázásához a tárhelynek rendelkeznie kell a webp grafikai bővítménnyel és engedélyezve is van a használata.

Fontos figyelembe venni, hogy a böngészők adta támogatottsága mellett, az alkalmazásoknak és weboldalaknak továbbra sem szabad elvetni a régebbi és elterjedt formátumokat.

Döntő érv a WebP mellett, példa

Elkészítettem ezen írás bevezetőképét 4 különböző formátumban. A képen fentről-lefelé:

• JPG formátumban. Mint tudjuk, ez egy veszteséges, tömörített fájlformátum,
  a kép mérete 149KB.
• PNG formátumban. A png veszteségmentes formátum, nem tömörített,
  a kép mérete 957KB.
• WebP formátum, veszteséges,
  a kép mérete 101KB.
• WebP formátum, veszteségmentes,
  a kép mérete 540KB.

A képek ugyanakkora felbontással készültek, e mellett lássuk meg:

• A legkisebb méretű a WebP veszteséges képe. Ezzel a formátummal töltődne be a leggyorsabban az oldal (ha teljesülnek az egyéb feltételek a webp-hez).
  Úgy lett kisebb a jpg képnél, hogy mindkettőnél 80%-s kép minőséget lett beállítva, ahogy a fentebbi képen mutatom. A printscreen-n a veszteségmentes webp képet mutatom, szintén 80%-ra állítottam be a minőségét.
• A két veszteséges tömörítéssel készült képek közül a WebP a kisebb, kb 2/3-a a szintén veszteséges tömörítésű jpg képnél.
• A png kép a legnagyobb méretű, vele töltődne be a leglassabban a weboldal, ám a minősége kifogástalan.

Összegzésként el kell mondjam, hogy a legkisebb méretet adó, veszteséges tömörítésű, 80%-s minőségre beállított WebP kép minősége, ránézésre és arra alkalmas weboldalra feltöltve is, megfelelő a neten ☺

Így összegzésként, meg kell mondjam, nem fog mellé, aki használja a webhelyén WebP formátumban a képeket, ahol csak lehet.

(a kisebb jpg és a kisebb webp kép egymás mellett)

Ha tetszett a cikk, kérlek oszd meg másokkal is!