Tudástár

Informálódj, tanulj, fedezz fel...

Hirdetés

Ezt a hirdetést azért jelenítjük meg, hogy a Tudástár a jövőben is mindenki számára ingyenesen elérhető maradjon. A cikk olvasásához gördíts lejjebb. Hogyan segíthetek?

2020-10-15 | Huszár Róbert |
Tudástár - Szakértő

WebP képek használata weboldalakon

A WebP kiterjesztés az "elnehezedett" Internet új hőse. Ha JPEG-ről WebP-re váltasz, gyorsabbá teheted a weboldalad és csökkentheted az adatforgalmat, amiért a látogatóid is hálásan lesznek. A WebP alkalmazása új weboldalaknál szinte kötelező, de a már m




A WebP a Google által fejlesztett, tömörített képformátum.
A tesztek szerint átlagosan 39%-kal kisebbek a webp képek az azonos minőségű jpeg formátumúaknál, így alkalmazása több, mint javallott az újonnan készülő weboldalaknál az oldal sebességének növelése és az adatforgalmának csökkentése érdekében.


A következőképp használhatod:


  1. Töltsd le a meglévő képeid konvertálásához szükséges segédprogramot a következő weboldalról és telepítsd a számítógépedre:
    https://developers.google.com/speed/webp/
    A program Windowsra, Linuxra és Mac OS X-re egyaránt elérhető!

  2. Konvertáld a megadott képet a következő paranccsal:
    cwebp -q 72 kep1.jpg -o kep1.webp
    ( a -q jelöli a minőséget, az -o kapcsoló pedig a kimeneti fájl nevét)

  3. Szúrd be a webp képet a következőképp weboldaladra:

    <picture>
    <source type="image/webp" srcset="images/flower1.webp">
    <source type="image/jpeg" srcset="images/flower1.jpg">
    <img src="images/flower1.jpg">
    </picture>

    A fenti kódrészlet egyben arra is szolgál, hogy fenntartsa a kompatibilitást a régebbi böngészőkkel a következőképp: azon böngészők esetén, ahol a webp kiterjesztés nem támogatott, a jpg fájl fog betöltődni.

  4. Ellenőrizd a weboldalad megjelenését!
    A vizuális megtekintés után célszerű még bevetni a Google webfejlesztő eszközét, a Lighthouse-t is, amely böngésző kiterjesztésként elérhető és képes ellenőrizni többek között azt is, hogy megfelelően szúrtad-e be a webp képeket meghívó kódot.

Címkék: zöld informatika, tudástár, webp, webp képformátum, jpg tömörítés

Kapcsolat

Hirdetések

Minden jog fenntartva. © 2015-2021