Optimální velikost a formát: Jak připravit fotografie pro web a e-shopy [2025]

Vizuální dojem je na moderním webu či v e-shopu naprosto zásadní. Kvalitní produktová fotografie nebo atraktivní snímek může rozhodnout o tom, zda si návštěvník váš web oblíbí a nakoupí u vás, nebo se přesune ke konkurenci. Současně však fotografie s příliš velkým rozlišením či nevhodným formátem dokáže zpomalit načítání stránek a odradit potenciální zákazníky. Jak tedy najít optimální rovnováhu mezi kvalitou zobrazení a velikostí souboru? A které formáty a nástroje se vyplatí používat? V následujícím článku vás těmito otázkami provedeme.

1. Proč řešit velikost a formát fotek pro web a e-shopy

Při návrhu a správě webových stránek či e-shopu je nezbytné dbát na rychlost načítání. Stránky, které se načítají pomalu, mají negativní dopad na uživatelskou zkušenost i pozici ve vyhledávačích. Velké obrázky dokážou čas načítání výrazně prodloužit.

• Rychlejší načítání = více spokojených zákazníků
• Nižší datové přenosy = méně nákladů na hosting a lepší uživatelský komfort
• Kvalitní fotky = klíč k atraktivním prezentacím produktů

Ať už provozujete blog, firemní web nebo celý e-shop s desítkami kategorií, optimalizace fotografií se vám bohatě vyplatí.

2. Formáty, se kterými se nejčastěji setkáte

Rozhodnutí o optimálním formátu je důležité z hlediska velikosti souboru, zachování kvality a kompatibility s prohlížeči.

JPG (JPEG)

Výhody

• 💚 Velmi dobře optimalizované pro fotografický obsah.
• 💚 Vysoká míra komprese při zachování dostatečné kvality.
• 💚 Široká podpora napříč všemi zařízeními a prohlížeči.

Nevýhody

• ❌ Přílišná komprese může způsobit viditelné artefakty.

PNG

Výhody

• 💚 Bezztrátový formát, vhodný pro grafiky a loga.
• 💚 Podpora průhlednosti (alpha kanál).

Nevýhody

• ❌ Větší velikost souboru u fotek oproti JPG.

WebP

Výhody

• 💚 Moderní formát od Googlu, kombinuje výhody JPG a PNG.
• 💚 Vysoká komprese a malé soubory.

Nevýhody

• ❌ Starší prohlížeče jej nemusí podporovat (potřeba fallbacku).

TIFF

Výhody

• 💚 Vysoká kvalita, ideální pro archivaci a tisk.

Nevýhody

• ❌ Nevhodné pro web, soubory bývají velmi velké.

Pro web a e-shopy je nejčastější volbou formát JPG (případně WebP tam, kde se neřeší kompatibilita se staršími prohlížeči).

3. Ideální rozlišení a velikost fotek

3.1 Rozlišení pro web

Obecně se doporučuje, aby obrázky nepřesahovaly maximální velikost, ve které se budou na webu zobrazovat. Pokud na stránce zobrazujete fotku širokou 1200 px, nemá obvykle smysl nahrávat originál s šířkou třeba 6000 px.

• Běžné rozlišení pro obrázky v e-shopu: 800–1200 px na šířku
• Náhledové a thumbnail obrázky: 150–300 px (popř. čtvercové varianty jako 300×300 px)

3.2 Datová velikost

V ideálním případě se snažte, aby jedna obrázková příloha nepřesáhla 200–400 kB. Mnohé e-shopy a weby jsou dokonce schopny jít ještě níž, aniž by uživatel zaznamenal markantní ztrátu kvality.

Kompresní nástroje (např. TinyPNG, Squoosh, Photoshop) dokážou zmenšit velikost i o desítky procent.

Pro fotografie je vhodné mít rozumný kompromis mezi kompresí a kvalitou – příliš vysoká komprese degraduje vzhled a může kazit dojem z produktu.

4. V jakých nástrojích fotky optimalizovat

Adobe Photoshop / Lightroom

Umožňují export ve formátech JPG či PNG s nastavením úrovně kvality.

Photoshop nabízí funkci „Uložit pro web“ (Save for Web), kde si můžete hrát s mírou komprese a vidět výslednou velikost.

Online nástroje (TinyPNG, TinyJPG, CompressJPEG apod.)

Rychlá a jednoduchá cesta, stačí nahrát soubory a poté stáhnout optimalizované verze.

Vhodné pro menší objemy, pro hromadné zpracování desítek či stovek fotek už může být pomalejší.

Specializovaný software

Např. Squoosh (nástroj od Googlu), ImageOptim (Mac), Caesium (Windows).

Užitečné při hromadné správě a kompresi velkého počtu fotek.

5. Infiry: Když chcete automatizovat optimalizaci

Pro mnoho firem, e-shopů a marketingových týmů je zásadní šetřit čas a minimalizovat manuální úkony. Infiry nabízí řešení, kdy lze všechny fotky nahrát ve vysoké kvalitě (např. pro tisk nebo pozdější úpravy) a teprve při stahování si vybrat variantu:

• Původní velikost – Maximální kvalita pro archivaci či další úpravy.
• Menší rozměr – Vhodné pro web, e-shopy, sociální sítě.
• Vodoznak – Pro ochranu autorských práv a ukázkové snímky.

Tímto způsobem nemusíte pokaždé ručně zmenšovat fotky. Zkrátka vyberete kolekci produktů nebo konkrétní fotku a stáhnete požadovanou optimalizovanou verzi v jednom kroku.

Navíc v Infiry můžete:

• Spravovat fotky z různých zařízení.
• Organizovat je v kolekcích dle produktů, kategorií či sezónních kampaní.
• Doplnit metadata (popisek, klíčová slova, autor, datum pořízení), aby bylo vyhledávání přesnější.
• Rozkopírovat popisky do všech nahrávaných fotek najednou – ideální pro e-shopy s velkým množstvím podobných produktů.

6. Shrnutí

• Volba formátu: Nejčastěji JPG pro fotografie, PNG pro grafiku s průhledností, WebP tam, kde to dává smysl.
• Rozlišení: Vždy upravte na takovou velikost, v jaké se fotky budou reálně zobrazovat.
• Kompresní úroveň: Usilujte o soubory velikosti cca 200–400 kB pro rychlé načítání.
• Nástroje: Photoshop/Lightroom, online kompresory nebo komplexní řešení, které umožňuje stahovat rovnou zmenšené verze (Infiry).
• Dlouhodobé ukládání: Uchovávejte originály (pro tisk či budoucí úpravy) a optimalizované verze (pro web).

Závěr

Optimalizace fotek pro web či e-shopy má významný vliv na rychlost načítání, spokojenost návštěvníků i SEO. Správná kombinace rozlišení, formátu a komprese navíc nemusí nutně znamenat složité kroky – stačí se zamyslet nad konečným účelem snímku a vybrat vhodný nástroj či službu.

Díky Infiry nemusíte pokaždé ručně řešit jednotlivé velikosti fotek. Můžete pohodlně pracovat s vysokými kvalitami, a kdykoliv potřebujete fotky pro web, e-shop či sociální sítě, stáhnete je ve vhodném rozlišení a formátu. Ušetříte tak spoustu času i úsilí, které můžete investovat do dalšího rozvoje svého podnikání nebo tvorby nového obsahu.

Neváhejte a vyzkoušejte si, jak vám důsledná optimalizace a moderní nástroje mohou usnadnit správu produktových či ilustračních fotografií a přispět ke skvělému uživatelskému zážitku na vašem webu!