Amit a WebP-ről tudni érdemes + WebP és a WordPress

Q: Mi a WebP előnye?

A WeP képfájlok használatával gyorsabb lehet honlapunk. A .webp kiterjesztésű képfájlok jelentősen kissebb méretűek (nem a felbontás csökken, hanem a méret!) miközben a képek minősége emberi szemmértékkel alig vagy nem látható módon csökken. Így akár egy JPG-hez képest általában 25-34%-os (egyes esetekben akár 60%-os!), PNG-hez mérten ~25%-os méretcsökkenés is elérhető.

Mi az a WebP és miért jó? #Fogalomtár

Mi az a WebP és miért jó? #Fogalomtár https://rotisoft.hu/wp-content/uploads/2020/08/rotisoft-fogalomtar-webp-kep-formatum-900x379.jpg 900 379 Rottenbacher Tamás Rottenbacher Tamás https://rotisoft.hu/wp-content/cache/swift-performance/rotisoft.hu/garvatar-cache/aaa922d46be26841cb1b8626713f785a 2021.04.19. 2021.12.08.

A WebP lehet a barátunk vagy az ellenségünk. Érdemes tisztában lenni, hogy mi is, ki és miért hozta létre, hogy kicsit jobban tisztában legyünk a lehetőségeivel és korlátaival is. A WebP egy remek kezdeményezés és elég hatékony törekvés, hogy a weboldalakon lévő képek minél kevesebb helyet foglaljanak, minél jobban legyenek optimalizálva. De hogyan?

Mi az a WebP?

A WebP nem más mint egy fájlkiterjesztés (és kép kódolás), képfájl formátum. Olyasmi mint a JPG. A többi képformátumhoz képest jobb tömörítésű, kifejezetten a honlapok képei elemeinek igényeihez tervezett képformátum.

Webp Logo

Mi a története röviden?

A Google fejlesztette ki 2010-ben és adta ki ezt a képfájlformátumot. A lényege, hogy veszteséges és veszteségmentes technikákat vegyesen alkalmazva jelentősen tudja csökkenteni a képek méretét, miközben az emberi szem számára nincs érzékelhető / látható változás, minőségromlás.

Mi az előnye?

A .webp kiterjesztésű képfájlok jelentősen kisebb méretűek (nem a felbontás csökken, hanem a méret!) miközben a képek minősége emberi szemmértékkel alig vagy nem látható módon csökken. Így akár egy JPG-hez képest általában 25-34%-os (egyes esetekben akár 60%-os!), PNG-hez mérten ~25%-os méretcsökkenés is elérhető. A .webp kiterjesztésű fájlok használatával gyorsabb lehet honlapunk.

Néhány minta mások tesztjeiből:

Webp Vs Jpg

Webp Comparison

Mi a hátránya?

A Google WebP szabványait nem minden böngésző fogadja el, főleg a Mac-es régebbi verziók. Ilyen például az Apple általi Safari. Az iOS 14-en (vagy újabban) futó 14-es (vagy újabb) Safari már támogatja, a korábbiak viszont nem tudják megjeleníteni. Azonban van megoldás, hogy böngésző típusától függő képformátumot töltsön be honlapunk. Az éppen aktuális kompatibilitási lista itt érhető el.

Frissítés: 2021 végén a Safari 14.0 továbbra sem rendelkezik natív webp támogatással.

A .webp kompatibilitása, 2020 Decemberében, a népszerűbb böngészőket figyelembe véve.

Használjam vagy ne?

Mindenképpen nézzük meg, pl. Google Analytics-ben, hogy a látogatók hány %-a használ nem webp kompatibilis böngészőt. Ha ez pár % alatt van és nem nagyon éles versenyben van honlapunk, használjuk bátran.

A Google PageSpeed Insight ajánlása pont a .webp-re gondol.

Hogyan tudom a képeket WebP-re konvertálni?

Ezt megtehetjük egyesével is feltöltés előtt, ha nincs jelentős mennyiségű kép, amit rendszeresen optimalizálni kellene. Másik esetben, WordPress honlap esetén azonban van lehetőségünk bővítmény alkalmazásával automatizálni és egy gombnyomásra a meglévő képeinket .webp formátumba konvertálni.

Ilyen bővítmények például a

ShortPixel,
Imagify,
Optimole,
WebP Express,
Swift Perfomance.

Ezek el is intézik, hogy a régebbi, nem kompatibilis böngészők számára a régi formátummal töltsön be, ezzel újabb gondot levéve a hátunkról.

Amennyiben mi magunk szeretnék, saját kézzel, egyesével optimalizálni képeinket (mivel lehet csak képről van szó), azt többféle ingyenes online eszközzel megtehetjük. Például a Convertio.co, iloveimg.com, cloudconvert.com, hogy csak néhányat említsek. Minden esetre legyen WordPress biztonsági mentés tartalékba, amiben a képek is szerepelnek optimalizálás előtti állapotban.

Összegzés

A webp lassan révbe ér. Egy elég modern, jó képformátumot kaptunk a Google-től, ami kifejezetten webes célokhoz van. Könnyen lehet automatizáltan optimalizálni képeinket, így igazából minimális energia vagy anyagi befektetéssel jelentősen csökkenthetünk weboldalunk teljes méretét, mely így érezhetően gyorsabbá válhat.