Velikost fotek na web: kolik má vážit fotka v e-shopu? Otestovali jsme JPG a WebP
Napište do vyhledávače „velikost fotek na web“ a co výsledek, to úplně jiné číslo. Většina návodů je psaná pro blogery nebo programátory, ne pro někoho, kdo vede e-shop se stovkami produktových fotek.
Níže najdete konkrétní číslo, vysvětlení, odkud se bere, a postup, jak se k němu dostat, aniž by fotky vypadaly hůř. Jde o dva kroky: zmenšit rozměry fotky a uložit ji ve formátu WebP. WebP je novější formát než JPG, vyvinul ho Google a při podobné kvalitě obvykle dává lehčí soubory. Vyzkoušeli jsme to na jedné fotce a ukazujeme výsledek. Neslibujeme, že změna formátu zdvojnásobí prodeje, protože to nikdo poctivě slíbit nemůže.
Krátká odpověď: zhruba 130 kB na produktovou fotku
U fotky, kterou si zákazník prohlíží na detailu produktu, je rozumný cíl zhruba 130 kB. Náhled v seznamu produktů může vážit nanejvýš něco přes deset kilobajtů.
Není to norma Googlu ani žádné organizace. Taková norma prostě neexistuje. Je to praktický kompromis: pod určitou hranicí fotka ztrácí detaily, které chce zákazník vidět, tedy strukturu látky, kresbu dřeva nebo lesk glazury. Nad ní platíte dobou načítání za detaily, kterých si na displeji telefonu stejně nikdo nevšimne.
Než začnete, zjistěte, z čeho vycházíte. Pokud vaše produktové fotky dnes váží po několika megabajtech, bude úspora velká. Pokud váží po 200 kB, bude malá.
Proč na váze fotek záleží
Obrázky jsou největší složkou typické hlavní stránky webu. Podle zprávy HTTP Archive Web Almanac 2025 je medián váhy hlavní stránky zobrazené na telefonu 2,56 MB a medián celkové váhy obrázků na takové stránce zhruba 911 kB. To je přibližně třetina celé stránky a víc než veškerý kód v JavaScriptu.
Druhý důvod je pro e-shop důležitější. Google měří, jak rychle se zobrazí největší prvek viditelný na obrazovce. Tomuto ukazateli se říká LCP. Na 76 % stránek zobrazených na telefonu je tímto největším prvkem právě obrázek a v e-shopu je to obvykle fotka produktu nebo banner.
Google očekává, že se tento prvek zobrazí do 2,5 sekundy. Ne v jednom testu, ale nejméně ve třech čtvrtinách skutečných návštěv. Výsledek nad 4 sekundy považuje za špatný.
Zlepší rychlejší web vaši pozici v Googlu?
Může trochu pomoct, ale méně, než naznačuje řada návodů. Google píše, že jeho systémy hodnocení ukazatele rychlosti využívají. Hned ale dodává, že dobré výsledky nezaručují vysokou pozici a stránka s relevantním obsahem pořád vyhrává nad rychlejší, ale méně relevantní stránkou.
Rychlost hraje největší roli tehdy, když má několik stránek podobně dobrý obsah. Samotný formát souboru není faktorem, podle kterého Google řadí výsledky. Google neodměňuje fotku za to, že je ve formátu WebP. Nepřímo odměňuje stránku, která se načítá rychleji.
Dejte si pozor i na čísla, která kolují po internetu. Oblíbené tvrzení, že sekunda zpoždění znamená o 7 % méně konverzí, pochází z průzkumu firmy Aberdeen Group, který proběhl v roce 2008 mezi více než 160 firmami, a ne z měření chování nakupujících. Nestavte na něm svá rozhodnutí.
Rozměry mají přednost před formátem
Tady se dělá nejčastější chyba. Převod do WebP je až druhý krok, ne první.
Fotka z telefonu s rozlišením 12 Mpx má 4000 × 3000 pixelů. Google Merchant Center, tedy rozhraní, přes které e-shopy posílají produkty do Nákupů Google, doporučuje produktové fotky o rozměrech zhruba 1500 × 1500 pixelů. To je rozumné vodítko i pro váš e-shop.
Když e-shop pošle fotku ve větších rozměrech, než v jakých se na obrazovce zobrazí, prohlížeč ji sice zmenší, ale nejdřív ji musí celou stáhnout.
Vyzkoušeli jsme to na jedné fotce
Vzali jsme produktovou fotku — keramický hrnek na hladkém pozadí — a uložili ji čtyřmi způsoby. Vybrali jsme ji záměrně: sytá oranžová barva a hladký barevný přechod v pozadí jsou místa, kde komprese snadno zanechá stopy. Z hlediska samotné váhy souboru je to naopak snazší případ než fotka z fotoaparátu.
| Verze | Rozměry | Váha |
|---|---|---|
| Originál v JPG | 2880 × 2880 px | 1826 kB |
| Jen zmenšená, pořád JPG | 1500 × 1500 px | 550 kB |
| Jen WebP, původní rozměry | 2880 × 2880 px | 128 kB |
| Zmenšená a uložená jako WebP | 1500 × 1500 px | 122 kB |
Samotné zmenšení rozměrů snížilo váhu souboru o 70 %. Uložení ve formátu WebP s cílovou váhou 130 kB ho pak zmenšilo ještě víc než čtyřikrát. Celkem je fotka patnáctkrát lehčí než originál.
Toto druhé zmenšení ale není zásluhou samotného formátu. Zmenšený JPG měl pořád kvalitu 95, kdežto plugin zkomprimoval WebP silněji, aby se vešel do 130 kB. Kolik přináší samotný formát, rozebíráme níže.
Nejvíc prozradí porovnání posledních dvou řádků. Obě verze váží skoro stejně, ale nejsou stejně dobré. Kvalita se při ukládání nastavuje na stupnici do 100 a čím je nižší, tím víc drobných detailů zmizí. Aby se fotka v původních rozměrech vešla do 130 kB, musel plugin snížit kvalitu na 55. Zmenšená fotka se do stejných 130 kB vešla s kvalitou 87 a podle našeho měření ji komprese zkreslila méně. Právě proto mají rozměry přednost před formátem.
Test jsme provedli 13. září 2026 naším pluginem ConverterSEO 1.31.1 nastaveným na cílovou váhu 130 kB, na serveru s WordPressem 7.1 a grafickou knihovnou GD. Fotka hrnku nepochází z fotoaparátu: vygenerovali jsme ji speciálně pro tento test a uložili jako JPG v kvalitě 95. Skutečné fotky z fotoaparátu mají víc šumu a obvykle váží víc, takže vám vyjdou jiná čísla. Důležitý je směr: nejdřív rozměry, potom formát.
Zhoršuje WebP kvalitu fotek?
Trochu ano. WebP, který se používá pro fotky, je ztrátový formát, takže při ukládání vždycky něco zahodí. Formulace „bez ztráty kvality“ se objevuje v návodech, a dokonce i přímo u Googlu. Stojí za ní ale porovnání, ve kterém kvalitu obou souborů hodnotil algoritmus. Neznamená to, že soubor nic neztratil. Bezeztrátová komprese se u produktových fotek používá zřídka, protože soubory pak vycházejí mnohonásobně větší.
Při rozumném nastavení ale může být rozdíl velmi malý. Tady je stejný výřez hrnku z našeho testu v obou verzích.
Porovnání pixel po pixelu ukazuje, že se WebP od originálu odchyluje nepatrně víc než JPG vlevo. Na obrazovce, i při zvětšení, ten rozdíl jen těžko najdete. Tečky v glazuře, odlesk i okraj hrnku zůstaly na svém místě.
Opatrnost se vyplatí ve dvou případech:
- Plynulé barevné přechody, například pozadí studiové fotky. Při příliš silné kompresi se místo plynulého přechodu mohou objevit pruhy.
- Velmi vysoká kvalita. Tady WebP jen těžko dotahuje JPG, takže soubor nemusí vždycky vyjít menší.
Než do WebP převedete všechny fotky v e-shopu, vyzkoušejte to na několika a prohlédněte si je ve zvětšení vedle originálů. Začněte těmi s hladkým pozadím a sytou barvou.
WebP, nebo JPG: kolik doopravdy ušetříte
Google ve své studii uvedl, že WebP je o 25–34 % menší než JPG, když algoritmus hodnotí kvalitu obou souborů jako stejnou. To je pravda, ale s výhradou, o které návody obvykle mlčí. Test proběhl zhruba v roce 2011 a WebP se v něm porovnával s JPG uloženým starým programem, který při stejné kvalitě vytváří větší soubory než novější nástroje.
Novější analýza společnosti Cloudinary z roku 2023 přináší ucelenější pohled. Při nižším nastavení kvality je WebP o 25–35 % menší než JPG uložený bez optimalizace, při vyšším se tahle výhoda zmenšuje. Oproti JPG uloženému moderním programem, který sám soubory výrazně zmenšuje, například mozjpeg, je menší už jen o 3–5 %.
Co to znamená pro vás? Pokud nahráváte fotky rovnou z fotoaparátu, úspora bude výrazná, ale z velké části díky menším rozměrům a silnější kompresi, ne díky samotnému formátu. Pokud vám někdo soubory JPG už dřív pořádně zkomprimoval, samotná změna formátu přinese málo a víc získáte na rozměrech.
Existuje ještě novější formát AVIF. Ve stejné analýze Cloudinary vyšel zhruba o 10–15 % menší než WebP, ale při výchozím nastavení trvalo jeho ukládání přibližně desetkrát déle. U e-shopu s tisíci fotek je to skutečný rozdíl.
Kam můžete WebP poslat a kam ne
Produktová fotka nekončí jen ve vašem e-shopu. Nahráváte ji také na Allegro, posíláte do Nákupů Google, někdy na Amazon. WebP ale neprojde všude.
| Kam | Přijme WebP? |
|---|---|
| Váš e-shop na WordPressu | Ano, od verze 5.8, pokud WebP podporuje server |
| Google Merchant Center | Ano |
| Allegro (allegro.cz) | Jen když nabídky vystavujete přes API (program nebo plugin propojený s účtem Allegro) nebo ze souboru. V ostatních případech uvádí nápověda Allegra jen JPG, JPEG a PNG. |
| Amazon | Spíš ne: v seznamu povolených formátů nebyl (stav z roku 2024) |
| Import produktů do WooCommerce ze souboru CSV nebo z jiného programu | Ano, od verze 7.7 |
Z toho plyne jednoduché pravidlo: originály fotek si nechte v JPG nebo PNG a WebP používejte na webu svého e-shopu. Nepřevádějte jedinou kopii, kterou máte.
Zvládnou prohlížeče vašich zákazníků WebP?
Ano. Podle webu Can I Use, na základě dat ze srpna 2026, WebP plně podporuje zhruba 97 % prohlížečů používaných ve světě.
Safari podporuje WebP od verze 14, která vyšla v září 2020 spolu s iOS 14. Na počítačích Mac to ale funguje až od systému macOS 11 Big Sur. Věta „Safari WebP nepodporuje“, která pořád koluje ve starších návodech, tedy už léta neplatí. Také vyhledávač Google obrázky ve formátu WebP oficiálně podporuje.
Co WordPress zvládne sám a co ne
WordPress od verze 5.8 z července 2021 umožňuje nahrát fotky ve WebP do knihovny médií, pokud server tento formát podporuje. Sám ale vaše soubory JPG ani PNG nepřevede. V roce 2022 se do verze 6.1 zkoušelo přidat automatické vytváření WebP z nahrávaných souborů JPG, ale změnu ještě před vydáním zase stáhli.
Jestli váš server umí ukládat WebP, zjistíte v administraci WordPressu: Nástroje → Stav webu → Informace → Zpracování médií. Najděte tam řádky „GD podporované formáty souborů“ a „ImageMagick podporuje formáty souborů“. Pokud je v některém z nich WEBP, je všechno v pořádku.
Fotky, které už v e-shopu máte, zůstanou ve starém formátu, dokud s nimi něco neuděláte. Jsou dvě cesty.
- Jednotlivé fotky převedete zdarma v konvertoru WebP. Funguje ve vašem prohlížeči, takže se soubory nedostanou na žádný server.
- Všechny fotky najednou převede plugin ConverterSEO. Komprimuje je na serveru vašeho e-shopu, a to jednorázově: při nahrání fotky, nebo když sami spustíte převod fotek, které už v knihovně jsou. Nikdy během návštěvy zákazníka.
Jedno důležité upozornění. Po kompresi plugin nahradí soubor v knihovně médií verzí WebP a originál smaže. Pokud máte originály fotek jen ve WordPressu, udělejte si před začátkem jejich kopii, například tak, že si složku wp-content/uploads stáhnete do počítače přes správce souborů v administraci hostingu.
Jak zjistit, jestli se to vyplatí
Spusťte PageSpeed Insights pro detail produktu a pro stránku kategorie. Pokud nástroj u obrázků nenavrhuje žádné zlepšení, přínos WebP bude malý.
Výsledek posuzujte podle dat ze skutečných návštěv, ne podle jednoho měření, protože jednotlivý test jednou vyjde lépe a jindy hůř. Tato data ukazuje PageSpeed Insights v horní části zprávy, pokud má stránka dost návštěv. Google kontroluje, jestli se stránka načítá rychle aspoň ve třech čtvrtinách skutečných návštěv.
A jedna věc, kterou je snadné pokazit. Líné načítání (lazy loading) odkládá stažení fotky do chvíle, kdy k ní zákazník na stránce sjede. U hlavní fotky produktu ho nezapínejte. Google to výslovně nedoporučuje, protože takové načítání zdržuje zobrazení nejdůležitějšího prvku stránky. Líné načítání má smysl u fotek umístěných níž.
Kde ve svém e-shopu začít
- Zjistěte, kolik vaše produktové fotky váží a jaké mají rozměry: v knihovně médií klikněte na fotku a podívejte se na pole „Velikost souboru“ a „Rozměry“.
- Zmenšete je zhruba na 1500 pixelů, tedy na rozměry, které Google Merchant Center doporučuje pro produktové fotky.
- Uložte je ve formátu WebP tak, aby vážily zhruba 130 kB.
- Několik si jich prohlédněte ve zvětšení, hlavně ty s hladkým pozadím.
- Originály v JPG si nechte pro Allegro a Amazon.
- Výsledek posuzujte podle skutečných návštěv, ne podle jednoho testu.
Pokud máte fotek jen pár, stačí bezplatný konvertor WebP. Pokud jich máte stovky, plugin ConverterSEO je převede všechny najednou a komprese do WebP je v něm zdarma a bez limitu. Jestli chcete, aby stejné fotky měly i dobré názvy souborů a popisy, podívejte se na článek o tom, jak připravit obrázky pro SEO.