PNG to WebP konvertálás

A PNG to WebP konvertálás akkor hasznos, ha egy PNG-képet weboldalon használnál. A PNG veszteségmentes és tud átlátszó hátteret, de a fájl gyakran nagy, főleg ha fotó vagy fotószerű tartalom van benne. A WebP ugyanúgy tárolja az átlátszóságot, és jóval kisebb fájlt ad, ezért gyorsabb lesz tőle az oldal.

Tipikus esetek:

• kivágott, átlátszó hátterű termékfotók egy webshopban;
• logók, ikonok, illusztrációk egy céges oldalon;
• PNG-be exportált képernyőképek, diagramok egy blogban;
• Canvából vagy más tervezőprogramból PNG-ként mentett bannerek.

E-mailhez, nyomtatáshoz és ügyintézési feltöltéshez viszont maradj a PNG-nél vagy a JPG-nél: ezek a rendszerek a WebP-t gyakran nem fogadják.

Egy webshopban 20 termék van, mindegyikhez egy kivágott, átlátszó hátterű PNG, 1200 × 1200 pixelben. Tömörítetlenül egy ilyen kép 1200 × 1200 × 4 bájt = 5 760 000 bájt (kb. 5,8 MB), a PNG ezt fotónál jellemzően 1,5–3 MB-ra tömöríti. A 20 kép tehát 30–60 MB.

WebP-be alakítva, 85%-os minőségen (a veszteséges WebP is megtartja az átlátszóságot) egy ilyen kép jellemzően 80–250 KB lesz. A 20 kép így 1,6–5 MB – nagyjából a tizede.

Egyszerű grafikánál (logó, kevés szín, nagy egyszínű felületek) más a kép. Ott a PNG is hatékony, és a Google mérései szerint a veszteségmentes WebP átlagosan 26%-kal kisebb, mint a PNG. Egy 60 KB-os PNG-logóból így kb. 60 × 0,74 ≈ 44 KB-os WebP lesz. A nyereség kisebb, de a látvány pixelre azonos marad.

A csúszka 30 és 100% között állítható, alapból 90%-on áll. Ha egy logó éle a WebP-ben kicsit zajosnak tűnik, vidd feljebb a minőséget. Ha a WebP nagyobb lett, mint a PNG (kis, egyszínű grafikánál előfordul), hagyd a képet PNG-ben.

• Túl nagy pixelméret. A legtöbb megtakarítást a kicsinyítés hozza. Ha egy 4000 pixeles PNG az oldalon 800 pixelen jelenik meg, előbb méretezd át, aztán konvertálj: a pixelszám így huszonötödére csökken.
• Az eredeti PNG törlése. A WebP a végleges, webes változat. A szerkeszthető eredeti PNG-t tartsd meg, mert ha valamit módosítanod kell, abból dolgozz.
• WebP nyomdába. A nyomdák és a fotókidolgozók ritkán fogadják. Nyomtatáshoz PNG, JPG vagy PDF kell.
• Fehér szél az átlátszó kép körül. Ha a PNG-t eredetileg fehér háttér elé vágták ki, a szélén maradhat egy halvány fehér sáv. Ez az eredeti képben is benne van, a konvertálás csak láthatóbbá teheti sötét háttéren.

A böngésződ beolvassa a PNG-t, a pixeleket az átlátszósággal együtt kibontja, és WebP-ként kódolja újra a beállított minőséggel. A képek nem kerülnek fel szerverre. Egy képnél a WebP rögtön letöltődik, több képnél egy ZIP-fájlban, az eredeti nevekkel. JPG-fotók átalakításához a JPG to WebP, visszafelé a WebP to PNG eszköz való.

A WebP-képet a weboldalon ugyanúgy hivatkozod, mint a PNG-t: a képcímben egyszerűen .webp lesz a kiterjesztés. A legtöbb tartalomkezelőben (WordPress, Shopify, WooCommerce) a médiatárba feltöltve ugyanúgy beszúrhatod, mint bármely más képet. Ha nagyon régi böngészőkre is gondolnod kell, a HTML picture elemével megadhatsz tartalékot: előbb a WebP-forrást, utána a PNG-t, és a böngésző azt tölti be, amelyiket ismeri. A ma használt böngészőknél erre már nincs szükség.

A képhez tartozó alternatív szöveget (alt) ne hagyd üresen: a Google képkeresője és a képernyőolvasók is ebből tudják, mi van a képen. Egy termékfotónál ez lehet például a termék neve és színe.