Fotky na web: velikost, formát a jak je připravit
Fotky prodávají víc než většina textů – pokud jsou skutečné a dobře připravené. Tady je postup od focení po nahrání: co fotit, v jakém rozlišení, jakém formátu a jak fotky zmenšit, aby web zůstal rychlý.
Aktualizováno
Krok 1: Rozhodněte, co má fotka ukázat
Fotka na firemním webu má úkol: ukázat, jak vypadá výsledek vaší práce, kdo zákazníka obslouží nebo kam přijde. Než začnete fotit, sepište si seznam záběrů podle stránek webu:
- Lidé – vy a tým při práci, ne strnulé portréty před zdí.
- Výsledky – hotové realizace, produkty, jídla, proměny.
- Místo – vchod (aby ho zákazník poznal), interiér, parkování.
- Postup – detail rukou, nástrojů, materiálu. Dodá to důvěryhodnost.
Pro realizace foťte i „před“, pokud to jde – srovnání ukáže práci nejlépe. Fotky z telefonu stačí, když jsou ostré, rovné a při dobrém světle (ideálně denním, bez blesku).
Krok 2: Fotobanka jen tam, kde vlastní fotka nedává smysl
Fotobanka se hodí na ilustrační pozadí nebo abstraktní téma. Na místa, kde zákazník čeká vás – tým, provozovnu, realizace – ji nepoužívejte. Úsměvy z fotobanky lidé poznají a web s nimi působí neosobně.
U fotobanky si zkontrolujte licenci: jestli dovoluje komerční užití na webu, jestli potřebujete uvést autora a jestli fotka nezobrazuje ochranné známky nebo lidi bez souhlasu k reklamnímu užití. Fotky nalezené přes vyhledávač obrázků bez licence nepoužívejte vůbec.
Krok 3: Zvolte rozměr podle místa na webu
Rozměr v pixelech se řídí tím, jak velká bude fotka na obrazovce. Displeje s vysokou hustotou (retina) potřebují zhruba dvojnásobek zobrazené šířky, aby fotka byla ostrá. Orientační hodnoty pro šířku delší strany:
| Použití | Šířka zdroje | Poznámka |
|---|---|---|
| Hlavní fotka přes celou šířku | zhruba 2000–2560 px | na mobilu se načítá menší verze |
| Fotka v textu | zhruba 1200–1600 px | dvojnásobek šířky textového sloupce |
| Náhled v galerii | zhruba 600–800 px | po kliknutí větší verze |
| Portrét člena týmu | zhruba 800 px | čtverec nebo na výšku, jednotný ořez |
| Logo | vektor (SVG) | rozměr pak nehraje roli |
Jsou to praktická doporučení, ne pravidla. Pokud web dělá webař, zeptejte se ho na rozměry pro konkrétní šablonu – a pošlete mu originály, ať si verze připraví sám.
Krok 4: Vyberte správný formát
| Formát | Kdy ho použít |
|---|---|
| JPEG | Fotky. Univerzální, dobře se komprimuje. |
| WebP | Fotky i grafika s průhledností. Menší než JPEG při podobné kvalitě. |
| AVIF | Fotky. Často ještě menší než WebP, převod je ale pomalejší. |
| PNG | Snímky obrazovky, grafika s ostrými hranami a průhledností. Na fotky zbytečně velký. |
| SVG | Loga, ikony a jednoduché ilustrace. Ostré v jakékoli velikosti. |
Krok 5: Zmenšete a zkomprimujte
Fotka z telefonu má několik megabajtů a rozměry, které web nepotřebuje. Postup:
- Zmenšete fotku na šířku podle tabulky výše.
- Zkomprimujte ji. Zdarma to zvládne například Squoosh v prohlížeči, kde vidíte rozdíl kvality vedle sebe.
- Zkontrolujte výsledek při plné velikosti – hlavně tváře a jemné detaily.
- Pojmenujte soubor česky bez diakritiky, např. rekonstrukce-koupelny-brno.webp, ne IMG_4821.jpg.
Velké nekomprimované fotky jsou nejčastější důvod pomalého webu. Jak to změřit, popisuje návod Rychlost webu.
Krok 6: Napište alt texty
Ke každé obsahové fotce patří krátký popis toho, co je na ní důležité. Slouží lidem se čtečkou obrazovky (viz přístupnost webu) a vyhledávačům. Nepište „fotka“ ani seznam klíčových slov.
- Slabší: „koupelna, rekonstrukce, obklady, Brno“
- Lepší: „Koupelna po rekonstrukci s velkoformátovým obkladem a sprchovým koutem“
Krok 7: Pohlídejte práva a souhlasy
- Od fotografa si nechte potvrdit, že fotky smíte použít na webu i sítích.
- Rozpoznatelní lidé jako hlavní motiv: vyžádejte si souhlas, u dětí od rodičů.
- U realizací u zákazníka se zeptejte, jestli fotky smíte zveřejnit, a nefoťte adresu ani osobní věci.
- Odstraňte z fotek SPZ, jmenovky a dokumenty, které tam nemají být.
Pro portfolio fotografů platí ještě další specifika – víc ve článku Web pro fotografa.
Časté otázky
Jakou velikost v MB má mít fotka na web?
Pevný limit neexistuje, ale běžná obsahová fotka po zmenšení a kompresi obvykle vyjde na desítky až nízké stovky kB. Fotka z mobilu nebo foťáku v plném rozlišení má několik MB – tu na web nikdy nenahrávejte přímo.
Je lepší WebP, nebo JPEG?
Pro fotky na webu je dnes výhodnější WebP nebo AVIF: při stejné kvalitě bývají menší. Všechny současné prohlížeče je podporují. Moderní weby obvykle převádějí obrázky automaticky, takže vy dodáte kvalitní JPEG a o formát se postará web.
Můžu na web dát fotku z Googlu?
Ne, pokud k ní nemáte licenci. Fotky nalezené přes vyhledávání patří autorům. Použijte vlastní fotky, fotobanku s licencí pro komerční užití, nebo fotku od autora s jeho svolením.
Potřebuji souhlas lidí, kteří jsou na fotce?
U fotek, kde je člověk dobře rozpoznatelný a je hlavním motivem (zaměstnanci, zákazníci, děti), si souhlas vyžádejte – nejlépe písemně a s uvedením, kde fotka bude. U zaměstnanců to vyřešte předem, ne až při focení.
Co je alt text a kdo ho píše?
Krátký textový popis obrázku pro lidi, kteří ho nevidí (čtečky obrazovky), a pro vyhledávače. Píše se k obsahovým fotkám – popisuje, co je na nich důležité. Čistě ozdobné obrázky alt text nepotřebují.