Jak velké mají být fotky na webu a jak je zmenšit?

Krátká odpověď: zmenšit na dvojnásobek zobrazené šířky a zkomprimovat

Jak velké mají být fotky na webu?

U fotky na web rozhoduje hlavně její rozlišení, podle něj se odvíjí i velikost souboru. Fotka z telefonu má na šířku několik tisíc pixelů. Stránka ji přitom ukáže třeba jen 800 pixelů širokou a zbytek dat návštěvník stahuje zbytečně.

Pravidlo je jednoduché: šířka, ve které se fotka na stránce zobrazí, krát dva. Ostré displeje kreslí stejný obsah víc body obrazovky, podle vývojářské dokumentace MDN zhruba dvakrát tolik. Fotce zobrazené 800 pixelů široké tedy stačí kolem 1 600 pixelů. Větší soubor už jen přidá data – podle dokumentace Googlu by stránka neměla posílat obrázky větší, než v jaké velikosti se na displeji zobrazí.

U fotky přes celou šířku obrazovky by plný dvojnásobek na ostrém displeji notebooku znamenal i přes 2 800 pixelů a výrazně větší soubor. Za rozumný strop proto bereme kolem 2 000 pixelů. Zhruba tolik má i největší velikost, kterou si WordPress z nahrané fotky sám vytváří: 2 048 pixelů.

Kolik kilobajtů má fotka mít, se obecně říct nedá – záleží na tom, co je na ní. Rozhoduje, kolik dat stáhne celá stránka. Náš audit upozorní, když by stránka mohla na obrázcích ušetřit aspoň 150 kB, a když by úspora byla 1 MB a víc, označí to jako Kritické. Zvlášť upozorní i na stránku, která při prvním načtení stáhne víc než 3 MB.

Jaký formát obrázků pro web: JPG, PNG, WebP, nebo AVIF?

Pro fotky a další obrázky složené z pixelů doporučuje vývojářská dokumentace MDN formáty WebP a AVIF, protože obvykle vytvoří menší soubor než JPEG, PNG nebo GIF. O viditelnost ve vyhledávání tím nepřijdete: Google oba formáty zpracuje i v hledání obrázků.

• WebP a AVIF. Na fotky i grafiku. Oba umí ztrátovou i bezztrátovou kompresi a průhledné pozadí. AVIF zobrazí jen novější verze prohlížečů, třeba Safari od verze 16.1 nebo Edge od verze 121, a proto k němu MDN radí přidat záložní obrázek ve WebP, JPEG nebo PNG.
• JPEG (JPG). Na fotky tam, kde WebP použít nejde. MDN ho uvádí jako dobrý záložní formát pro fotografie.
• PNG. Na snímky obrazovky, schémata a grafiku s textem nebo s průhledným pozadím. Obrázek ukládá beze ztráty, takže fotka v něm vyjde větší než v JPEG.
• SVG. Na ikony, schémata a logo, pokud ho máte ve vektorové podobě. Zůstane ostré v každé velikosti.
• GIF. Velký animovaný GIF je podle Googlu méně úsporný než video. MDN pro animace doporučuje WebP, AVIF nebo APNG.
• HEIC. Úsporný formát, ve kterém umí fotit iPhone. Na web se nehodí: z běžných prohlížečů ho podle přehledu Can I use zobrazí jen Safari.

Jak zmenšit fotky na web zdarma?

Postup je s každým nástrojem stejný:

1. Ořízněte, co na fotce nemá být. Méně pixelů znamená i menší soubor.
2. Zmenšete šířku v pixelech zhruba na dvojnásobek místa, kde se fotka na stránce zobrazí.
3. Uložte ji jako WebP nebo JPEG s kvalitou kolem 80. Pro představu: WordPress ukládá zmenšené fotky s kvalitou 82 u JPEG a 86 u WebP.
4. Porovnejte výsledek s originálem při stoprocentním zvětšení. Když jsou vidět kostičky nebo rozmazané hrany, uložte fotku s vyšší kvalitou.
5. Originál si schovejte – ze zmenšené fotky už ostrou větší neuděláte.

Zdarma to zvládnou tyto nástroje:

• Squoosh. Aplikace od Googlu, která běží přímo v prohlížeči. Fotku zmenší i převede do WebP, AVIF, JPEG nebo PNG a podle svého popisu ji na server neposílá – vše zpracuje ve Vašem počítači.
• TinyPNG. Webová služba, která zdarma zkomprimuje až 20 fotek najednou, každou do 5 MB, ve formátech WebP, AVIF, JPEG i PNG. Zmenšuje datovou velikost, rozměr v pixelech nastavte předem jinde. Fotky se nahrávají na její server a podle jejích stránek se nejpozději po 48 hodinách mažou.
• PowerToys (Windows). Bezplatný balík nástrojů od Microsoftu. Jeho Image Resizer zmenší víc fotek najednou: označíte je v Průzkumníku, kliknete na ně pravým tlačítkem a zvolíte Image Resizer.
• Náhled (Mac). Fotky otevřete v jednom okně, označíte je v postranním panelu a v nabídce Nástroje zvolíte změnu velikosti.

Zmenší fotky sám WordPress, Webnode, Wix nebo Shoptet?

Každá platforma to má jinak: některá fotky zmenší a převede sama, jiná jen doporučí, jak velké je nahrát. Podle jejich vlastní nápovědy:

Ve WordPressu převod do WebP nebo AVIF obstará třeba bezplatný plugin Modern Image Formats, který vyvíjí tým WordPressu pro výkon. Fotky z iPhonu ve formátu HEIC převádí WordPress od verze 6.7 při nahrání do JPEG sám, pokud to server umí.

Jak zjistit, jestli má Váš web zbytečně velké fotky?

Nejrychleji to ukáže měření. Náš audit si stránku nechá změřit nástrojem Googlu PageSpeed Insights a z výsledku vypíše, kolik dat by stránka na obrázcích ušetřila, i s konkrétním souborem. Řekne také, jestli jsou obrázky dost ostré a jestli mají v kódu rozměry. Když stránka stáhne víc než 3 MB, vypíše i tři největší soubory z měření.

Ve studii Stav českých firemních webů 2026 jsme v srpnu 2026 takhle změřili úvodní stránky 367 webů malých českých firem:

U 71 z 367 stránek by úspora byla 1 MB a víc, a audit je proto označil jako Kritické.

Audit měří jednu stránku, kterou zadáte – obvykle úvodní – z jednoho měřeného načtení na simulovaném telefonu. Posoudí jen obrázky, které se při něm stáhly, takže fotky načítané až při posouvání, podstránky a fotky produktů v něm nejsou, a originály v administraci webu nevidí. Ostrost posuzuje podle počtu pixelů, ne podle toho, jestli je fotka zaostřená.

Co dalšího stránku zpomaluje a jak číst měření rychlosti, rozebírá náš článek o tom, jak zrychlit web.

Proč jsou obrázky na webu rozmazané nebo roztažené?

Rozmazaný obrázek má v souboru méně pixelů, než kolik jich jeho místo na displeji potřebuje, a prohlížeč ho proto musí zvětšit. Pomůže nahrát větší soubor, zase zhruba dvojnásobek zobrazené velikosti, a logo nejlépe jako SVG. Logo ve dvojnásobném rozlišení, které se na stránce zobrazí menší, je v pořádku.

Roztažený nebo zploštělý obrázek vznikne, když mu web nastaví šířku a výšku v jiném poměru, než má fotka sama. Pomůže zachovat poměr stran, nebo fotku předem oříznout do tvaru místa, kde se zobrazí.

Obojí audit hledá na stránce, kterou změří. Ve studii Stav českých firemních webů 2026 našel roztažený nebo zmáčknutý obrázek u 34 z 367 úvodních stránek. Málo ostrý obrázek našel častěji:

Ceník nebo rozvrh uložený jako obrázek se na telefonu zmenší tak, že text nejde přečíst, a hlasová čtečka ho bez popisku nepřečte vůbec. Takový text patří na stránku jako text. Obrázku, který něco sděluje, dejte krátký popisek toho, co na něm je – patří to k základům přístupnosti webu.

Proč stránka při načítání poskakuje?

Obrázek bez rozměrů v kódu nemá na stránce vyhrazené místo. Prohlížeč neví, jak velký bude, dokud se nestáhne, a když dorazí, text pod ním se posune – někdy přesně ve chvíli, kdy chce návštěvník kliknout. Google proto radí uvádět u obrázků vždy šířku a výšku, případně místo vyhradit poměrem stran ve stylech stránky.

WordPress od verze 5.5 rozměry doplňuje sám, ale jen u obrázků vložených z knihovny médií. Jinde záleží na tom, jak je web postavený. Audit takové obrázky vypíše v řádku Obrázky bez udaných rozměrů. Když se rozvržení při jeho měření neposunulo, report to napíše: chyba se zatím neprojevila, na pomalejším připojení se ale projevit může.

Ve studii Stav českých firemních webů 2026 audit obrázky bez rozměrů hledal na úvodních stránkách 367 webů:

Jak se poskakování stránky měří a kde podle Googlu začíná dobrá hodnota, vysvětluje náš článek o zrychlení webu.

Které fotky načítat až při posouvání stránky?

Odložené načítání (anglicky lazy loading) se hodí pro fotky níž na stránce: galerii, reference nebo fotky v dlouhém výpisu produktů. Návštěvník, který k nim nedojde, je vůbec nestahuje. Podle Googlu ho dnes umějí všechny hlavní prohlížeče.

WordPress ho od verze 5.5 přidává sám obrázkům, které mají v kódu rozměry. Od verze 6.3 ho vynechá u obrázku, který bude nejspíš hlavní, a naopak mu dá u prohlížeče přednost.