Jak připravit velikost obrázků a fotek pro web: formáty a rozměry

Co, když nechci používat WebP a chci nahrávat obrázky ve formátu JPG nebo JPEG?

Můžete používat JPG/JPEG místo WebP. Musíte, ale víc optimalizovat velikost souboru, aby web zůstal rychlý. Doporučuji obrázky zmenšit a poté nahrát na web a prohnat obrázky ještě pomocí nějakého pluginu na kompresi a převod do WebP třeba pluginem Imagify. Výhoda je, že nemusíte ručně převádět obrázky na WebP, zachováte kontrolu nad kvalitou JPEG, ale získáte WebP fallback, WordPress + Imagify se postará o optimální velikosti pro desktop, tablet a mobil.

Online nástroje na zmenšení obrázků pro web

Pokud chcete, aby se váš web načítal rychle a obrázky nevytvářely zbytečnou zátěž, je důležité je správně zmenšit. Naštěstí existuje několik online nástrojů zdarma, které vám s tím pomohou.

TinyPNG / TinyJPG

Web: https://tinypng.com
Funkce: komprimuje PNG i JPG bez znatelné ztráty kvality
Výhody: jednoduché, rychlé, podpora dávkového nahrávání
Nevýhody: nelze měnit rozměry přímo, pouze velikost souboru

Squoosh

Web: https://squoosh.app
Funkce: změna rozměrů, komprese, volba formátu (WebP, PNG, JPEG)
Výhody: online, zdarma, možnost náhledu kvality
Nevýhody: více možností, vyžaduje trochu více znalostí

ILoveIMG

Web: https://www.iloveimg.com/cs
Funkce: změna rozměrů, komprese, převod formátu
Výhody: přehledné, dávkové zpracování
Nevýhody: omezení velikosti souboru ve free verzi

ImageResize.org

Web: https://imageresize.org
Funkce: změna šířky/výšky, ořez, komprese
Výhody: rychlé a jednoduché úpravy
Nevýhody: menší podpora formátů než Squoosh

Compress-Or-Die

Web: https://compress-or-die.com/
Funkce: pokročilá komprese obrázků, podpora WebP
Výhody: vysoká kontrola kvality
Nevýhody: složitější rozhraní

Tipy pro efektivní zmenšení obrázků

• Změňte rozměry obrázků na přesné pixely potřebné pro web (např. hero obrázek 1920×1080 px, miniatura 150×150 px)
• Zkomprimujte soubor na co nejmenší velikost bez ztráty kvality
• Používejte moderní formát WebP pro menší velikost souboru při zachování kvality
• Vždy si udělejte náhled před nahráním na web, aby kvalita zůstala dobrá

Doporučené rozměry obrázků pro web

Správné rozměry zajistí, že obrázky budou ostré na všech zařízeních a web nebude zbytečně pomalý. Příliš velké obrázky zpomalují web, malé působí neprofesionálně.

Když tvoříte web v editorech jako je Elementor nebo Divi, mějte připravené obrázky v rozměrech, které odpovídají typům sekcí a modulů/widgetů. Správná velikost zajišťuje rychlé načítání a ostrý vzhled na všech zařízeních. Divi i Elementor mají responzivní funkce, které automaticky přizpůsobí velikost obrázku podle zařízení (desktop, tablet, mobil). Elementor ani Divi však obrázek nezkomprimují ani výrazně nezmenší velikost souboru, jen přizpůsobí jeho rozměry. Pokud tedy nahrajete velký soubor, stále bude zpomalovat načítání webu, i když se zobrazuje na mobilním telefonu menší. Proto je stále dobré nahrát optimalizovaný a co nejmenší soubor (komprimovaný WebP/JPG), aby se web rychle načítal.

Formát WEBP nejlépe, ale je s tím piplárna a doporučuji nahrávat fotky tedy spíše v PNG pro průhledné pozadí jinak JPG/JPEG ty jsou menší, ale nelze mít průhledné pozadí. A poté až doporučuji použít plugin Imagify.

Orientační rozměry, mohou být i jiné, podle webu a fotek

• hero/full width sekce: šířka běžně 1920 (nejostřejší) až 1600 px, výška jak potřebujete 900–1080 px já nejčastěji dávám 1080 px, poměr: cca 16:9, formát: WebP / JPG, velikost kolem 400 – 600 kB
• background sekce přes celou šířku obrazovky, větší obrázky v textu: šířka nejčastěji těch 1600 px nebo 1400 px, výška dle potřeby, velikost kolem 300kB
• obrázek k blogu (náhled + detail), služby, články: šířka 1000 px až těch 800px, výška 750px až 450 px, poměr nejčastěji dle fotek jak jsou připraveny 4:3 nebo 16:9
• obrázek uvnitř v blogu uvnitř článku: šířka 1200 px až 800px, výška dle obsahu jak se hodí, velikost těch 200 kB
• obrázek na 1/2 obrazovky (2 sloupce): šířka: 800–960 px, velikost 200 kB
• obrázek na 1/3 obrazovky (3 sloupce) většinou pro služby, karty, boxy, reference: šířka: 600 px, velikost 150 kB
• obrázek na 1/4 obrazovky (4 sloupce): šířka: 500 - 450 px, velikost 120 kB
• obrázek na 1/5 obrazovky (5 sloupců) loga partnerů, klientů, logo boxy, malé ikonové boxy: šířka: většinou dostačující 350 - 250 px, velikost 80 - 120 kB (kontrolovat rozmazanost)
• fotky osob do referencí: šířka: 600 - 400 px, velikost 120 kB, poměr nejčastěji čtverec 1:1
• logo firmy hlavička menu: šířka: 300–400 px, výška: dle poměru, formát: SVG (nejlepší) nebo PNG
• logo firmy patička: šířka o něco menší: 250–180 px, výška: dle poměru, formát: SVG (nejlepší) nebo PNG
• ikony, SVG: v PNG 64–128 px, SVG neřeší rozměry, ale když budete v nějakém programu ikonu tvořit, tak zadat rozměry musíte, já dávám běžně 128x128px

Dnes jsou retina displeje. Retina je marketingový název Applu pro displeje s velmi vysokou hustotou pixelů. Rozdíl mezi běžným displejem a retina displejem není v „kvalitě obrazovky“ jako takové, ale v hustotě pixelů – tedy v tom, kolik obrazových bodů je namačkaných na stejnou plochu. Obrázek pro šířku 1200 px na stránce by měl mít ideálně 2400 px, aby byl ostrý i na retina. I když retina displeje „chtějí víc pixelů“, nenahrává se 2× větší obrázek všude, používá se rozumný horní limit (např. 2560–2800 px).

Pro retina displeje jsou doporučené rozměry takto:

• Hero obrázek / obrázek pro pozadí (background): šířka 2560–2800 px, výška 1400–1600 px, poměr 16:9, formát WebP, velikost souboru orientačně do 400–500 kB
• Sekce s obrázky / Image Module: 1200 × 800 px (pro menší layouty), u širších sekcí až 1600 px, formát WebP
• Obrázek k článku: 1200 × 630 px, formát WebP / JPEG
• Obrázek přes polovinu obrazovky (2 sloupce): šířka 1600 px, výška podle řezu, poměr 3:2 nebo 4:3, velikost souboru 200–300 kB
• Obrázek na třetinu stránky (3 sloupce): šířka 1200–1400 px, poměr 4:3, velikost souboru 150–220 kB
• Obrázek na čtvrtinu stránky (karty, grid): šířka 1000–1200 px, poměr 4:3, velikost souboru 120–200 kB
• Produktový obrázek (WooCommerce): 1200 × 1200 px (čtverec) nebo 800 × 1000 px, formát WebP / JPEG, velikost souboru do 300 kB
• Galerie: minimálně 1200 px na šířku, ideálně 1400 px, formát WebP
• Miniatura: 150 × 150 px

Rozměry mohou být mírně přizpůsobeny konkrétním šablonám, uvedené hodnoty berte jako doporučení.

Co je hero obrázek?

„Hero obrázek“ je pojem z webdesignu a znamená velký hlavní obrázek, který se obvykle zobrazí na úvodní stránce webu nebo na začátku článku. Je to první vizuální prvek, který návštěvník uvidí, a má za úkol upoutat pozornost a předat hlavní poselství webu.

Klíčové vlastnosti hero obrázku

• Velký formát: Zabírá obvykle celou šířku obrazovky (full-width). Doporučená šířka pro moderní web a retina displeje je 2560–2800 px, výška 1400–1600 px.
• Hlavní vizuální dojem: Může obsahovat fotku, ilustraci nebo grafiku. Slouží k vizuálnímu představení značky, produktu nebo služby.
• Často s textem nebo CTA: Někdy se na hero obrázek přidává nadpis (headline), podnadpis nebo výzva k akci (CTA button).
• Důležitý pro rychlost a SEO: Obrázek musí být optimalizovaný (WebP/JPEG, komprese do 400–500 kB). WordPress a buildery (editory webu jako např. Divi nebo Elementor) zajistí responzivní zobrazení, takže není nutné připravovat zvlášť mobilní varianty.

Hero obrázek je vizuálně dominantní prvek webu, který hned na první pohled komunikuje, o čem stránka je, a motivuje návštěvníka pokračovat dále.

💡 Tip pro web: Připravte hero obrázek optimalizovaný pro rychlé načítání a vysokou ostrost i na retina displejích. Buildery se postarají o správné zobrazení na různých zařízeních.

Jak velká by měla být velikost souboru

Cílem je, aby se web načítal rychle a bez čekání. Menší velikost souboru znamená lepší uživatelský zážitek i SEO. U běžných fotografií doporučuji velikost přibližně 100–400 KB. Velké hero obrázky mohou být i kolem 500–800 KB při vysokém rozlišení, pokud je nezbytné zachovat kvalitu.

WordPress a editory jako Elementor nebo Divi a jakémkoli jiné buildery umí zobrazit obrázky responzivně, to znamená, že je zobrazí menší velikostně podle typu zařízení (mobil, tablet), ale neumí je za vás správně připravit, aby nebyly obrázky tak velké (velikostí souboru) – to musíte udělat vy nebo si na to nainstalovat na webu nějaký plugin, který to za vás udělá. Příklad: pokud nahrajete obrázejk typu JPG rozlišení 6000 × 4000 px, velikost souboru 4 MB, WordPress sice vytvoří menší rozměry, ale základní kvalita a datová náročnost zůstává vysoká a web se načítá pomalu.

SEO optimalizace obrázků

Obrázky mají významný vliv na vyhledávání. Správně optimalizované obrázky mohou přivést další návštěvníky a zvýšit viditelnost vašeho webu.

• používejte smysluplné názvy souborů
• vyplňujte ALT popisy
• komprimujte obrázky bez ztráty kvality, velké rozměry bez komprese zpomalí web a poškodí SEO
• zajistěte responzivní zobrazení, WordPress + buildery (Divi, Elementor) si z obrázku vytvoří menší varianty automaticky
• retina-ready berte jako nepřímý SEO benefit připravte 2× rozměr než je skutečná šířka v layoutu (ne vždy - nepřekračujte 2800 px na šířku – víc už je většinou zbytečné a jen zvyšuje velikost souboru)

Proč a jak správně pojmenovat obrázky pro web

Správné pojmenování obrázků je důležité pro SEO a pro uživatele. Google totiž obrázek „nevidí“ tak, jako my – spoléhá se na ALT text, název souboru a kontext stránky. Správný název souboru pomáhá vyhledávačům pochopit, co obrázek zobrazuje, a zvyšuje šanci, že se objeví ve vyhledávání obrázků.

Jak pojmenovat obrázky správně

1. Popisný název: Místo IMG1234.jpg použijte konkrétní popis, např. modre-tricko-damske.jpg. V názvu by mělo být to, co obrázek skutečně zobrazuje.
2. Používejte pomlčky místo mezer: Google interpretuje pomlčky jako oddělovač slov. Např. cerna-panske-bunda.jpg je správně, cerna_panske_bunda.jpg nebo cernapansebunda.jpg méně ideálně.
3. Krátké a výstižné: Název by neměl být příliš dlouhý (max. 5–8 slov). Zaměřte se na klíčová slova, ale přirozeně.
4. Bez speciálních znaků: Nepoužívejte čárky, háčky, otazníky nebo symboly (&, %, $). Používejte pouze písmena, čísla a pomlčky.
5. Spolu s ALT textem: Název souboru doplňte ALT textem, který popisuje obrázek pro vyhledávače a zvyšuje přístupnost.

Příklad

Správně pojmenované obrázky spolu s ALT textem zlepší SEO vašeho webu a přístupnost pro všechny uživatele.

Co je ALT text a kde se ve WordPressu vyplňuje

ALT text (alternativní text) je krátký popis obrázku určený pro vyhledávače a čtečky obrazovky. Slouží k tomu, aby:

• SEO: Vyhledávače dokázaly “pochopit”, co je na obrázku. Obrázky mohou přivést návštěvníky z Google Images.
• Přístupnost: Lidé se zrakovým postižením nebo s vypnutými obrázky vidí popis obrázku.
• Fallback: Pokud se obrázek nenačte, zobrazí se ALT text místo něj.

1. Při nahrávání obrázku do Mediální knihovny

1. Jděte do Mediální knihovna → Přidat nový.
2. Klikněte na obrázek, otevře se detail.
3. Najděte pole Alternativní text (ALT).
4. Vyplňte stručný, popisný text (např. „Modré tričko na bílém pozadí“).

2. Při vkládání obrázku do příspěvku nebo stránky

1. Klikněte na Přidat blok → Obrázek.
2. Nahrajte obrázek nebo vyberte z knihovny.
3. V pravém panelu (Blok → Nastavení obrázku) najdete Alternativní text (ALT).
4. Vyplňte popis.

3. V Elementor / Divi

• Elementor: Klikněte na obrázek → Image settings → ALT text.
• Divi: Modul obrázku → Image → ALT text.

Tipy pro správný ALT text

• Buďte struční a výstižní (5–15 slov max.).
• Popište, co je na obrázku, nikoli „obrázek“ nebo „foto“.
• Pokud obrázek je čistě dekorativní, ALT text ponechte prázdný, aby čtečky obrazovky přeskočily.
• Pokud je obrázek klíčový pro obsah, použijte hlavní klíčové slovo, ale přirozeně.

Umí Google zobrazit a zjistit, co je na obrázku?

Google obrázek „nevidí“ tak, jak ho vidíme my. Nemůže přímo rozpoznat obsah s úplnou přesností. Používá však několik metod, aby pochopil, co obrázek zobrazuje:

1. ALT text

Google používá ALT text jako primární zdroj informace o obrázku. Pokud ALT text není vyplněný, vyhledávač se spoléhá na další faktory.

2. Název souboru

Vyhledávač analyzuje název souboru obrázku (např. modre-tricko.jpg). Doporučuje se používat popisné názvy obsahující klíčová slova, oddělená pomlčkami.

3. Kontext stránky

Google bere v úvahu text kolem obrázku, nadpisy a odstavce. Pokud je obrázek u článku o modrém tričku, Google pravděpodobně přiřadí tuto souvislost.

4. Moderní technologie – Google Vision

Google využívá umělou inteligenci a počítačové vidění, které dokáže rozpoznat objekty a obsah obrázku (např. „kočka“, „auto“, „modré tričko“). Tato metoda ale není úplně přesná.

Shrnutí

• Google si dokáže „přečíst“ obrázek jen částečně – spoléhá se na ALT text, název souboru a kontext stránky.
• Nejspolehlivější způsob, jak Google přesně určí, co je na obrázku, je vyplnit ALT text a použít popisné názvy souborů.

Shrnutí a doporučení

Bez kvalitně připravených obrázků dnes web nemůže uspět. Optimalizace obrázků zvyšuje rychlost, důvěryhodnost i výkon webu. Pokud chcete, aby váš web působil profesionálně a přinášel výsledky, optimalizace obrázků je nezbytností.