PNG do WebP

Ako previesť PNG do WebP

Pretiahnite obrázky do nástroja alebo ich vyberte zo zariadenia – PNG aj JPG, pokojne desiatky naraz. Cieľový formát WebP je predvolený. Zvoľte kvalitu: pre fotografie 80 %, pre logá, ikony a snímky obrazovky Bezstratová (100 %). Kliknite na Previesť obrázky a pri každom náhľade uvidíte veľkosť pred a po prevode – typicky 200 kB namiesto 1,5 MB. Výsledky stiahnete po jednom alebo naraz v ZIP. Všetko prebieha v prehliadači, na server sa nič nenahráva.

Prečo WebP: rýchlejší web a lepšie PageSpeed skóre

WebP je formát od Googlu navrhnutý pre web: pri rovnakom vzhľade je stratový WebP o 25 – 34 % menší než JPG a bezstratový o 26 % menší než PNG. Menšie obrázky znamenajú rýchlejšie načítanie stránky, lepšie Core Web Vitals (najmä LCP) a nižšiu spotrebu dát na mobile – PageSpeed Insights preto odporúča „zobrazovať obrázky vo formátoch novej generácie“ a myslí tým práve WebP alebo AVIF. Navyše WebP spája výhody oboch starších formátov: pozná priehľadnosť ako PNG aj stratovú kompresiu ako JPG, a to v jednom súbore.

Stratovo alebo bezstratovo – a aká kvalita

Stratový WebP funguje ako JPG: kvalita 80 % je bod, kde fotka vyzerá rovnako ako originál a súbor je najmenší, 92 % si nechajte na tlač či archív, 60 % na miniatúry. Bezstratový WebP (voľba 100 %) uloží obrázok pixel po pixeli ako PNG, len úspornejšie – pre grafiku s textom a ostrými hranami je to jediná správna voľba, stratová kompresia by okolo písmen vytvorila šum. Bezstratové kódovanie pri 100 % zaručujú Chrome a Edge; iné prehliadače môžu túto hodnotu uložiť ako najvyššiu stratovú kvalitu. Veľkosť súboru najviac ovplyvňuje počet pixelov: obrázok, ktorý sa na webe zobrazí v šírke 800 px, najprv zmenšite v nástroji zmena veľkosti obrázka a až potom prevádzajte.

JPG do WebP

Rovnako prevediete aj JPG do WebP – pri zrýchľovaní existujúceho webu je to najčastejší krok, lebo väčšina fotiek už JPG je. Počítajte s tým, že JPG je už raz stlačený: WebP z neho vyjde o štvrtinu až tretinu menší, no kvalitu nižšiu, než mal zdroj, nevoľte – dve stratové kompresie za sebou sa sčítajú. Ak máte k dispozícii pôvodný PNG alebo fotku priamo z foťáku, prevádzajte radšej tú.

Kde WebP funguje a kde nie

Prehliadače: všetky súčasné – Chrome, Firefox, Edge, Opera, Samsung Internet aj Safari od verzie 14 (macOS Big Sur a iOS 14 z roku 2020). Na webe tak WebP bez obáv použijete pre vyše 97 % návštevníkov. Programy: Windows Fotky, macOS Náhľad, Photoshop od 23.2, GIMP, Affinity, Figma, Canva aj Office 365. Kde WebP nepatrí: tlačiarne a fotolaby, úradné formuláre, staršie redakčné systémy, e-mailové prílohy pre neznámych príjemcov a všetko, čo vyslovene žiada JPG či PNG – tam zostaňte pri PNG do JPG. Na kódovanie WebP nástroj využíva prehliadač; Safari ho vie ukladať od verzie 17 – v staršom Safari voľba WebP chýba a nástroj to oznámi.

Ako WebP nasadiť na web so záložným JPG

Ak chcete mať istotu aj pre prastaré prehliadače, vložte obrázok cez značku <picture>: prehliadač si vezme WebP, a keď ho nepozná, siahne po JPG. Nezabudnite na rozmery, aby stránka pri načítaní neposkakovala:

<picture>
  <source srcset="obrazok.webp" type="image/webp">
  <img src="obrazok.jpg" alt="Popis obrázka" width="1200" height="800" loading="lazy">
</picture>

Vo WordPresse to za vás spraví plugin na optimalizáciu obrázkov alebo WebP podpora zabudovaná od verzie 5.8, v Astro, Next.js či Nuxt vstavané komponenty obrázkov. Pre jednorazové prevody a statické weby stačí tento nástroj a nahratie WebP súborov vedľa pôvodných.

PNG to WebP bez nahrávania na server

Online konvertory obrázky zväčša najprv nahrajú na svoj server a obmedzujú počet či veľkosť súborov. Tu kódovanie prebieha vo vašom prehliadači – obrázky sa nikam neodosielajú, počet nie je obmedzený a po načítaní stránky nástroj funguje aj bez internetu. Hodí sa tak aj na nezverejnené produktové fotky, návrhy či interné materiály. Opačný smer, keď WebP z webu potrebujete v bežnom formáte, rieši WebP do JPG a WebP do PNG; ešte novší formát AVIF prevedie AVIF do JPG.