Veľkosť fotiek na web: koľko má vážiť fotka v e-shope? Otestovali sme JPG a WebP
Zadajte do vyhľadávača „veľkosť fotiek na web“ a dostanete odpovede, ktoré sa od seba diametrálne líšia. Väčšina návodov je napísaná pre blogerov alebo programátorov, nie pre niekoho, kto má e-shop so stovkami produktových fotiek.
Nižšie nájdete konkrétne číslo, vysvetlenie, odkiaľ sa berie, a spôsob, ako sa k nemu dostať bez toho, aby fotky vyzerali horšie. Celé to stojí na dvoch krokoch: zmenšiť rozmery fotky a uložiť ju vo formáte WebP. Je to formát novší než JPG. Vyvinul ho Google a pri podobnej kvalite zvyčajne dáva ľahšie súbory. Vyskúšali sme to na jednej fotke a ukazujeme výsledok. Nesľubujeme, že zmena formátu zdvojnásobí predaj, pretože to nikto poctivo sľúbiť nemôže.
Krátka odpoveď: okolo 130 KB na produktovú fotku
Pri fotke, ktorú si zákazník prezerá na karte produktu, je rozumný cieľ okolo 130 KB. Miniatúra v zozname produktov môže vážiť do niekoľkonástich kilobajtov.
Nie je to norma Googlu ani žiadnej organizácie. Takáto norma jednoducho neexistuje. Je to praktický kompromis: pod určitou hranicou stráca fotka detaily, ktoré chce zákazník vidieť, teda textúru látky, kresbu dreva či lesk glazúry. Nad ňou platíte časom načítania za detaily, ktoré na displeji telefónu aj tak nikto nepostrehne.
Skôr než začnete, zistite, z čoho vychádzate. Ak vaše produktové fotky dnes vážia po niekoľko megabajtov, úspora bude veľká. Ak vážia po 200 KB, bude malá.
Prečo záleží na tom, koľko fotky vážia
Obrázky tvoria najväčšiu časť typickej hlavnej stránky. Podľa správy HTTP Archive Web Almanac 2025 váži hlavná stránka zobrazená na telefóne v mediáne 2,56 MB a obrázky na nej spolu v mediáne približne 911 KB. To je zhruba tretina a viac než všetok kód JavaScriptu.
Druhý dôvod je pre e-shop dôležitejší. Google meria, ako rýchlo sa zobrazí najväčší prvok viditeľný na obrazovke. Tento ukazovateľ sa volá LCP. Na 76 % stránok zobrazených na telefóne je týmto najväčším prvkom práve obrázok a v e-shope je to zvyčajne produktová fotka alebo banner.
Google očakáva, že sa tento prvok zobrazí do 2,5 sekundy. Nie v jednom teste, ale najmenej v troch štvrtinách skutočných návštev. Výsledok nad 4 sekundy považuje za slabý.
Zlepší rýchlejšia stránka vaše pozície v Googli?
Môže trochu pomôcť, ale menej, než naznačuje mnoho návodov. Google píše, že jeho systémy hodnotenia využívajú ukazovatele rýchlosti. Hneď však dodáva, že dobré výsledky nezaručujú vysokú pozíciu a stránka s relevantným obsahom stále vyhráva nad rýchlejšou, ale menej relevantnou.
Rýchlosť zohráva najväčšiu úlohu vtedy, keď má niekoľko stránok podobne dobrý obsah. Samotný formát súboru nie je faktorom, podľa ktorého Google zoraďuje výsledky. Google neodmeňuje fotku za to, že je vo formáte WebP. Nepriamo odmeňuje stránku, ktorá sa načíta rýchlejšie.
Pozor aj na čísla, ktoré kolujú po internete. Populárne tvrdenie, že sekunda oneskorenia znamená o 7 % menej konverzií, pochádza z prieskumu, ktorý firma Aberdeen Group urobila v roku 2008 medzi viac než 160 firmami, a nie z merania toho, ako sa správajú nakupujúci. Rozhodnutia naň nestavajte.
Rozmery idú pred formátom
Tu sa robí najčastejšia chyba. Zmena formátu na WebP je druhá vec, ktorú treba urobiť, nie prvá.
Fotka z telefónu s rozlíšením 12 Mpx má 4000 × 3000 pixelov. Google Merchant Center, teda služba, cez ktorú e-shopy posielajú produkty do Nákupov Google, odporúča produktové fotky s rozmermi približne 1500 × 1500 pixelov. To je rozumný orientačný bod aj pre váš e-shop.
Ak e-shop pošle väčší súbor, než koľko miesta fotka zaberá na obrazovke, prehliadač ho aj tak zmenší, ale najprv ho musí celý stiahnuť.
Vyskúšali sme to na jednej fotke
Vzali sme produktovú fotku — keramický hrnček na hladkom pozadí — a uložili ju štyrmi spôsobmi. Vybrali sme ju zámerne: sýta oranžová farba a plynulý prechod farieb v pozadí sú miesta, kde kompresia ľahko zanechá stopy. Z hľadiska samotnej veľkosti súboru je to zato jednoduchší prípad než fotka z fotoaparátu.
| Verzia | Rozmery | Veľkosť súboru |
|---|---|---|
| Originál v JPG | 2880 × 2880 px | 1826 KB |
| Len zmenšená, stále JPG | 1500 × 1500 px | 550 KB |
| Len WebP, pôvodné rozmery | 2880 × 2880 px | 128 KB |
| Zmenšená a uložená ako WebP | 1500 × 1500 px | 122 KB |
Samotné zmenšenie rozmerov znížilo veľkosť súboru o 70 %. Uloženie do WebP s cieľovou veľkosťou 130 KB ho potom zmenšilo ešte viac než štyrikrát. Celkovo je fotka pätnásťkrát ľahšia než originál.
Toto druhé zmenšenie však nie je zásluhou samotného formátu. Zmenšený JPG mal stále kvalitu 95, kým plugin skomprimoval WebP silnejšie, aby sa zmestil do 130 KB. Koľko prináša samotný formát, píšeme nižšie.
Najviac prezradí porovnanie posledných dvoch riadkov. Obe verzie vážia takmer rovnako, ale nie sú rovnako dobré. Kvalita pri ukladaní sa nastavuje na stupnici do 100 a čím je nižšia, tým viac drobných detailov zmizne. Aby sa fotka v pôvodných rozmeroch zmestila do 130 KB, musel plugin znížiť kvalitu na 55. Zmenšená fotka sa do tých istých 130 KB zmestila pri kvalite 87 a podľa nášho merania ju kompresia skreslila menej. Práve preto idú rozmery pred formátom.
Test sme urobili 13. septembra 2026 naším pluginom ConverterSEO 1.31.1, nastaveným na cieľovú veľkosť 130 KB, na serveri s WordPressom 7.1 a grafickou knižnicou GD. Fotka hrnčeka nepochádza z fotoaparátu: vygenerovali sme ju špeciálne pre tento test a uložili ako JPG v kvalite 95. Skutočné fotky z fotoaparátu majú viac šumu a zvyčajne vážia viac, takže vám vyjdú iné čísla. Dôležitý je smer: najprv rozmery, potom formát.
Zhoršuje WebP kvalitu fotiek?
Trochu áno. WebP používaný na fotky je stratový formát, takže pri ukladaní vždy niečo zahodí. Formulácia „bez straty kvality“ sa objavuje v návodoch, dokonca aj priamo u Googlu, ale stojí za ňou porovnanie, v ktorom kvalitu oboch súborov hodnotil algoritmus. Neznamená to, že súbor nič nestratil. Bezstratová kompresia sa pri produktových fotkách používa zriedka, pretože súbory potom vychádzajú mnohonásobne väčšie.
Pri rozumných nastaveniach však môže byť tento rozdiel veľmi malý. Tu je ten istý výrez hrnčeka z nášho testu v oboch verziách.
Porovnanie pixel po pixeli ukazuje, že WebP sa od originálu odchyľuje o niečo viac než JPG vľavo. Na obrazovke, dokonca aj vo zväčšení, sa tento rozdiel dá len ťažko nájsť. Bodky v glazúre, odlesk aj okraj hrnčeka zostali na svojom mieste.
Pozor si dajte v dvoch prípadoch:
- Plynulé prechody farieb, napríklad pozadie štúdiovej fotky. Pri príliš silnej kompresii sa namiesto plynulého prechodu môžu objaviť pruhy.
- Veľmi vysoká kvalita. Tu WebP len ťažko dorovná JPG, takže súbor nemusí vždy vyjsť menší.
Skôr než na WebP prevediete všetky fotky v e-shope, vyskúšajte to na niekoľkých a prezrite si ich vo zväčšení vedľa originálov. Začnite tými s hladkým pozadím a sýtou farbou.
WebP alebo JPG: koľko naozaj ušetríte
Google vo svojej štúdii uviedol, že WebP je o 25–34 % menší než JPG, keď algoritmus hodnotí kvalitu oboch súborov ako rovnakú. Je to pravda, ale s výhradou, o ktorej návody zvyčajne nehovoria. Test prebehol okolo roku 2011 a WebP v ňom porovnávali s JPG uloženým starým programom, ktorý pri rovnakej kvalite vytvára väčšie súbory než novšie nástroje.
Novšia analýza firmy Cloudinary z roku 2023 dáva úplnejší obraz. Pri nižších nastaveniach kvality je WebP o 25–35 % menší než JPG uložený bez optimalizácie a pri vyšších sa tento náskok zmenšuje. Oproti JPG uloženému moderným programom, ktorý sám súbory výrazne zmenšuje, napríklad mozjpeg, je menší už len o 3–5 %.
Čo to znamená pre vás? Ak nahrávate fotky rovno z fotoaparátu, úspora bude výrazná, ale z veľkej časti vďaka menším rozmerom a silnejšej kompresii, nie vďaka samotnému formátu. Ak vaše JPG súbory už niekto kedysi poriadne skomprimoval, samotná zmena formátu prinesie málo a viac získate na rozmeroch.
Existuje ešte novší formát AVIF. V tej istej analýze Cloudinary vyšiel približne o 10–15 % menší než WebP, ale pri predvolených nastaveniach trvalo jeho ukladanie zhruba desaťkrát dlhšie. Pri e-shope s tisíckami fotiek je to skutočný rozdiel.
Kam môžete poslať WebP a kam nie
Produktová fotka nekončí len vo vašom e-shope. Nahrávate ju aj na Allegro, posielate ju do Nákupov Google, niekedy na Amazon. WebP neprejde všade.
| Kam | Prijme WebP? |
|---|---|
| Váš e-shop na WordPresse | Áno, od verzie 5.8, ak server WebP podporuje |
| Google Merchant Center | Áno |
| Allegro (allegro.sk) | Len keď ponuky vystavujete cez API (program alebo plugin prepojený s účtom Allegro) alebo zo súboru. Inak stránka pomoci Allegro uvádza JPG, JPEG a PNG a pri formulári na vystavenie ponuky WebP nespomína. |
| Amazon | Skôr nie: v zozname povolených formátov nebol (stav z roku 2024) |
| Import produktov do WooCommerce zo súboru CSV alebo z iného programu | Áno, od verzie 7.7 |
Z toho plynie jednoduché pravidlo: originály fotiek si nechajte v JPG alebo PNG a WebP používajte na stránke svojho e-shopu. Neprevádzajte jedinú kópiu, ktorú máte.
Zvládnu prehliadače vašich zákazníkov WebP?
Áno. Podľa služby Can I Use, na základe údajov z augusta 2026, WebP plne podporuje približne 97 % prehliadačov používaných vo svete.
Safari podporuje WebP od verzie 14, ktorá vyšla v septembri 2020 spolu s iOS 14. Na počítačoch Mac to však funguje až od systému macOS 11 Big Sur. Veta „Safari nepodporuje WebP“, ktorá stále koluje v starších návodoch, teda už roky neplatí. Aj vyhľadávač Google oficiálne podporuje obrázky vo WebP.
Čo WordPress zvládne a čo nie
WordPress od verzie 5.8 z júla 2021 umožňuje nahrávať fotky vo WebP do knižnice médií, ak server tento formát podporuje. Sám však vaše JPG ani PNG súbory neprevedie. V roku 2022 sa do verzie 6.1 pokúsili pridať automatické vytváranie WebP z nahrávaných JPG súborov, ale zmenu pred vydaním stiahli.
Či váš server vie ukladať WebP, zistíte v administrácii WordPressu: Nástroje → Zdravie webovej stránky → Informácie → Obsluha médií. Nájdite tam riadky „GD podporované formáty súborov“ a „ImageMagick podporované formáty súborov“. Ak v niektorom z nich vidíte WEBP, všetko je v poriadku.
Fotky, ktoré už v e-shope máte, zostanú v starom formáte, kým s nimi niečo neurobíte. Sú dve cesty.
- Jednotlivé fotky prevediete zadarmo v konvertore WebP. Funguje vo vašom prehliadači, takže súbory sa nedostanú na žiadny server.
- Všetky fotky naraz spracuje plugin ConverterSEO. Komprimuje ich na serveri vášho e-shopu, jednorazovo: pri nahraní fotky alebo vtedy, keď sami spustíte spracovanie fotiek, ktoré už sú v knižnici. Nikdy nie počas návštevy zákazníka.
Jedna dôležitá poznámka. Plugin po kompresii nahradí súbor v knižnici médií verziou WebP a originál vymaže. Ak máte originály fotiek len vo WordPresse, skôr než začnete, urobte si ich kópiu, napríklad tak, že si cez správcu súborov v administrácii hostingu stiahnete do počítača priečinok wp-content/uploads.
Ako zistiť, či sa to oplatí
Spustite PageSpeed Insights pre kartu produktu a pre stránku kategórie. Ak nástroj neukáže žiadne obrázky na zlepšenie, prínos WebP bude malý.
Efekt posudzujte podľa údajov zo skutočných návštev, nie podľa jedného merania, pretože jednotlivý test raz vyjde lepšie, raz horšie. Takéto údaje PageSpeed Insights ukazuje v hornej časti správy, ak má stránka dostatočnú návštevnosť. Google kontroluje, či sa stránka načíta rýchlo aspoň v troch štvrtinách skutočných návštev.
A jedna vec, ktorú je ľahké pokaziť. Oneskorené načítanie (lazy loading) odkladá stiahnutie fotky až na chvíľu, keď k nej zákazník posunie stránku. Nezapínajte ho pre hlavnú fotku produktu. Google to výslovne neodporúča, pretože takéto načítanie oneskorí zobrazenie najdôležitejšieho prvku stránky. Oneskorené načítanie má zmysel pri fotkách umiestnených nižšie.
Čím začať vo svojom e-shope
- Zistite, koľko vaše produktové fotky vážia a aké majú rozmery: v knižnici médií kliknite na fotku a pozrite sa na polia „Veľkosť“ a „Rozmery“.
- Zmenšite ich na približne 1500 pixelov, teda na rozmer, ktorý Google Merchant Center odporúča pre produktové fotky.
- Uložte ich vo formáte WebP tak, aby vážili okolo 130 KB.
- Niekoľko z nich si prezrite vo zväčšení, najmä tie s hladkým pozadím.
- Originály v JPG si nechajte pre Allegro a Amazon.
- Efekt posúďte podľa skutočných návštev, nie podľa jedného testu.
Ak máte fotiek len zopár, stačí bezplatný konvertor WebP. Ak ich máte stovky, plugin ConverterSEO ich spracuje všetky naraz a kompresia do WebP je v ňom zadarmo a bez limitu. Ak chcete, aby tie isté fotky mali aj dobré názvy súborov a popisy, pozrite si článok o tom, ako pripraviť obrázky pre SEO.