WebP

Co je WebP?

WebP je moderní obrazový formát vyvinutý společností Google, který nabízí až 30% lepší kompresi než tradiční JPEG a PNG při zachování stejné vizuální kvality. Představte si to jako evoluce starých formátů – WebP kombinuje to nejlepší z obou světů: podporuje ztrátovou kompresi jako JPEG (pro fotografie) i bezeztrátovou jako PNG (pro grafiku s ostrými hranami), a navíc přidává podporu průhlednosti (alfa kanál) a dokonce i animací. Jde o formát navržený přímo pro moderní web s důrazem na rychlost načítání a efektivní využití datového přenosu.

Menší velikost souborů znamená rychlejší načítání webu, nižší spotřebu dat a lepší uživatelský zážitek, což přímo ovlivňuje SEO a konverze. Podle studií společnosti Google může WebP zmenšit velikost fotografií o 25-35% oproti JPEG a grafiky o 26% oproti PNG při zachování stejné kvality. Pro návštěvníka to znamená, že stránka se načte rychleji, pro provozovatele webu to znamená nižší náklady na hosting a bandwidth.

Performance je dnes kritickým faktorem – Google Core Web Vitals měří rychlost načítání a penalizuje pomalé weby v SEO rankingu. WebP je jedním z nejefektivnějších způsobů, jak zrychlit váš web bez nutnosti komplikovaných technických změn. Moderní weby jako YouTube, Facebook, Netflix nebo Google používají WebP pro optimální doručování vizuálního obsahu miliardám uživatelů denně.

Výhody WebP oproti JPEG a PNG

• Výrazně menší velikost souboru

WebP nabízí až 30% lepší kompresi než JPEG při stejné kvalitě fotografie. To znamená, že obrázek, který jako JPEG zabírá 100 KB, jako WebP zabere jen 70 KB. Pro stránku s desítkami obrázků to znamená úsporu stovek kilobytů až megabytů. Menší soubory = rychlejší stahování = rychlejší načtení webu. Každá sekunda zpoždění snižuje konverze průměrně o 7%.

• Podpora průhlednosti i animací

WebP podporuje alfa kanál (průhlednost) jako PNG, ale s výrazně menší velikostí souboru. Dříve jste museli volit – JPEG pro fotky bez průhlednosti, nebo PNG pro grafiku s průhledností. WebP dělá obojí. Navíc podporuje animace jako GIF, ale s mnohem lepší kompresí a kvalitou. Animovaný WebP může být až 64% menší než ekvivalentní animovaný GIF.

• Ztrátová i bezeztrátová komprese

Ztrátová komprese (lossy) je ideální pro fotografie, kde malé ztráty kvality nejsou viditelné okem. Bezeztrátová (lossless) je perfektní pro loga, ikony, screenshoty nebo UI prvky, kde potřebujete dokonalou ostrost. WebP podporuje obě metody, zatímco JPEG pouze ztrátovou a PNG pouze bezeztrátovou. Jeden formát pro všechny scénáře.

• Lepší SEO díky rychlosti

Google oficiálně potvrdil, že rychlost načítání stránky je ranking faktor. PageSpeed Insights a Lighthouse audity penalizují velké obrázky ve formátu JPEG/PNG a doporučují WebP. Přechod na WebP okamžitě zlepší vaše Core Web Vitals skóre (LCP – Largest Contentful Paint), což má přímý dopad na pozice ve vyhledávání.

• Nižší náklady na hosting a CDN

Menší soubory = menší datový přenos. Pokud váš web přenáší 100 GB dat měsíčně, přechod na WebP může snížit přenos na 70 GB. To se projeví nižšími náklady na hosting a CDN služby. Pro weby s vysokou návštěvností jde o tisíce korun úspory ročně.

Podpora WebP v prohlížečích

V roce 2025 je WebP podporován prakticky všemi moderními prohlížeči. Chrome, Firefox, Edge, Safari, Opera i mobilní verze těchto prohlížečů plně podporují WebP. Safari přidal podporu WebP v roce 2020 s verzí 14, což bylo poslední velké nedostající puzzle. Podle statistik Can I Use má WebP globální podporu přes 97% všech používaných prohlížečů. To znamená, že drtivá většina vašich návštěvníků WebP obrázky bez problému zobrazí.

Staré prohlížeče jako Internet Explorer nebo velmi staré verze Safari WebP nepodporují. Proto je důležité implementovat fallback – záložní řešení pro tyto prohlížeče. Moderní přístup používá <picture> element v HTML, který umožňuje prohlížeči automaticky vybrat formát, který podporuje. Prohlížeče, které WebP neznají, jednoduše načtou JPEG nebo PNG verzi. Tímto způsobem získáte výhody WebP pro většinu uživatelů, zatímco starší prohlížeče dostanou klasický formát.

Jak převést obrázky na WebP formát?

• Online konverzní nástroje

Nejjednodušší způsob pro malý počet obrázků jsou online nástroje jako Squoosh.app (od Googlu), CloudConvert nebo Online-Convert. Nahrajete JPEG/PNG obrázek, nástroj ho převede na WebP a stáhnete výsledek. Tyto nástroje často nabízejí možnost nastavit kvalitu komprese – obvykle doporučuji hodnotu 80-85 pro fotografie, což nabízí perfektní balanci mezi kvalitou a velikostí.

• Grafické editory

Adobe Photoshop od verze 23.2 podporuje export do WebP přímo přes funkci "Uložit pro web". GIMP podporuje WebP po instalaci pluginu. Figma a Sketch umožňují export do WebP nativně. Pro designéry je to pohodlné – vytvořit design a rovnou exportovat do optimálního formátu.

• Dávková konverze pomocí softwaru

Pro desítky nebo stovky obrázků potřebujete automatizaci. XnConvert je zdarma nástroj pro Windows/Mac/Linux, který umožňuje hromadnou konverzi s možností nastavení kvality. Prostě vyberete složku s JPEG obrázky, nastavíte výstupní formát WebP, kvalitu 85 a spustíte dávkový převod. Za minutu máte hotovo.

• Konverze na serveru (automatická)

Pokročilé řešení pro WordPress nebo vlastní weby je automatická konverze při nahrání obrázku. WordPress pluginy jako ShortPixel, Imagify nebo EWWW Image Optimizer automaticky převádějí každý nahraný obrázek na WebP. Pro vlastní backend můžete použít knihovny jako cwebp (příkazový řádek), Sharp (Node.js) nebo Imagick (PHP) k automatické konverzi.

• CDN s automatickou konverzí

Služby jako Cloudflare, Cloudinary nebo ImageKit nabízejí automatickou konverzi obrázků do WebP on-the-fly. Nahrajete JPEG, ale CDN automaticky doručí WebP verzi prohlížečům, které ji podporují. Nulová práce na vaší straně, maximální optimalizace.

Implementace WebP na webu (picture tag, fallback)

Správná implementace WebP na webu vyžaduje použití <picture> elementu, který umožňuje poskytnout více formátů obrázku a nechat prohlížeč vybrat ten, který podporuje. Takto vypadá základní implementace:

<picture>
  <source srcset="obrazek.webp" type="image/webp">
  <source srcset="obrazek.jpg" type="image/jpeg">
  <img src="obrazek.jpg" alt="Popis obrázku" width="800" height="600">
</picture>

Jak to funguje: Prohlížeč nejprve zkouší <source> elementy v pořadí shora dolů. Pokud podporuje WebP, načte obrazek.webp. Pokud ne, pokračuje k další source a načte obrazek.jpg. Fallback <img> element zajišťuje, že i velmi staré prohlížeče, které <picture> nepodporují, zobrazí alespoň JPEG verzi. Vždy nezapomeňte na atribut alt pro přístupnost a SEO.

Pro responzivní obrázky můžete kombinovat WebP s různými velikostmi pomocí srcset. Pokud používáte WordPress, pluginy automaticky generují tento kód. Pro vlastní řešení doporučuji vytvořit WebP verzi každého obrázku a upravit šablony webu, aby používaly <picture> místo <img>.

WebP a SEO - vliv na rychlost načítání

WebP má přímý pozitivní dopad na SEO prostřednictvím zrychlení načítání stránky. Google jasně komunikuje, že rychlost webu je ranking faktor od roku 2010 pro desktop a od roku 2018 pro mobilní vyhledávání. V roce 2021 Google přidal Core Web Vitals jako oficiální metriky ovlivňující pozice ve vyhledávání. Jedna z klíčových metrik je LCP (Largest Contentful Paint), která měří, jak rychlo se načte největší viditelný prvek na stránce – často právě hlavní obrázek nebo hero image.

Pokud váš hlavní obrázek je JPEG o velikosti 500 KB a načítá se 2 sekundy, vaše LCP skóre je špatné. Převodem na WebP zmenšíte obrázek na 350 KB, načítání se zkrátí na 1,4 sekundy a LCP skóre se zlepší. Google PageSpeed Insights a Lighthouse audit přímo doporučují převod obrázků na moderní formáty (WebP nebo AVIF) jako jedno z klíčových optimalizací. Rychlejší web = nižší bounce rate, vyšší engagement, lepší konverze a vyšší pozice ve vyhledávání.

Kdy použít WebP a kdy zůstat u JPEG/PNG?

• Používejte WebP pro webový obsah

Pokud obrázky slouží výhradně pro zobrazení na webu, WebP je nejlepší volba. Fotografie produktů v e-shopu, blog posty, galerie, bannery, screenshoty – vše by mělo být ve WebP. Získáte menší velikost, rychlejší načítání a lepší SEO. S fallbackem na JPEG/PNG máte jistotu, že každý návštěvník obrázek uvidí.

• Zůstaňte u JPEG/PNG pro stahovatelné soubory

Pokud nabízíte obrázky ke stažení – například tiskové fotografie, materiály pro tisková média, wallpapery – ponechte je v JPEG nebo PNG. Ne každý software umí WebP otevřít a editovat. Uživatelé očekávají standardní formáty pro offline použití. WebP je primárně pro web browsing, ne pro práci v grafických editorech.

• Pro fotografie volte WebP lossy (ztrátovou)

Fotografie mají komplexní barevné přechody, kde drobné ztráty kvality nejsou viditelné. WebP lossy s kvalitou 80-85 nabízí perfektní balanci – výrazně menší velikost než JPEG při vizuálně identické kvalitě. Pro produktové fotografie, portréty, krajiny je to ideální volba.

• Pro loga a grafiku volte WebP lossless nebo PNG

Loga, ikony, diagramy a UI prvky s ostrými hranami a jednoduchými barvami vypadají nejlépe s bezeztrátovou kompresí. WebP lossless je menší než PNG se stejnou kvalitou. Pokud ale budete logo používat i offline (vizitky, prezentace), zachovejte i PNG verzi.

• Nahraďte GIF animace WebP animovaným

GIF je zastaralý formát s omezenou paletou 256 barev a velkou velikostí souborů. Animovaný WebP nabízí plnou paletu barev, lepší kvalitu a až 64% menší velikost. Pro moderní weby je animovaný WebP jasná volba. Fallback můžete udělat na statický obrázek nebo video.

Související pojmy