Fotky na web: jak je připravit, aby web byl rychlý a hezký

Fotka talíře, ze kterého se kouří, hotové koupelny nebo usměvavého týmu přesvědčí víc než odstavec textu. Fotky na web jsou často to první, podle čeho si návštěvník udělá názor. Jenže fotka nahraná přímo z mobilu může mít několik megabajtů, web zpomalí a v galerii vedle ostatních vypadá jako pěst na oko. V článku vysvětlíme, jak fotky na web připravit – velikost, formát, ořez a popisky – a jak to za vás může udělat systém pro správu obsahu.

Proč na fotkách na webu tolik záleží

Prodávají. U restaurace jídlo a interiér, u řemeslníka hotová práce, u kadeřnictví účesy. Zákazník chce vidět, co dostane.
Budují důvěru. Vlastní fotky provozovny a lidí působí mnohem věrohodněji než obrázky z fotobanky.
Rozhodují o rychlosti. Fotky bývají zdaleka největší část toho, co se při načítání webu stahuje. Příliš velké fotky jsou nejčastější důvod pomalého webu – viz článek Rychlost webu.

Jak velké mají být fotky na web

Fotka z moderního telefonu má typicky kolem 4000 × 3000 pixelů a několik megabajtů. To je dost na tisk velkého plakátu. Na webu se ale i na velkém monitoru zobrazí v mnohem menší velikosti, takže zbytek se stahuje zbytečně – a na mobilních datech dlouho.

Pro běžné fotky na webu stačí kolem 1200 až 2000 pixelů na delší straně a velikost souboru v řádu stovek kilobajtů, ne megabajtů. Rozdíl na pohled nepoznáte, v rychlosti webu ano.

Jaký formát zvolit

Formát	Kdy se hodí	Poznámka
JPEG	fotografie	starý, ale všude podporovaný standard
PNG	loga, grafika, obrázky s průhledností	u fotek zbytečně velké soubory
WebP	fotografie i grafika na webu	moderní formát, při stejné kvalitě výrazně menší než JPEG, podporují ho všechny současné prohlížeče

Pro fotky na webu je dnes nejlepší volba WebP. Pokud ale nahráváte fotky do systému, který je převádí sám, nemusíte formát řešit vůbec.

Ořez a poměr stran

Fotky na webu by měly mít jednotný tvar. Galerie, kde se střídají fotky na výšku, na šířku a čtvercové, působí neuspořádaně. Hlavní fotka v záhlaví zase potřebuje široký formát, jinak se na ní ořízne hlava nebo talíř.

Nejčastější poměry stran:

16:9 nebo 21:9 – široké fotky do záhlaví stránky a bannerů,
4:3 – běžné fotky do článků a galerií,
1:1 – čtvercové náhledy, sociální sítě,
3:4 a 9:16 – fotky na výšku, příběhy na sociálních sítích.

Ořezem zároveň fotku vylepšíte: odstraníte rušivý okraj, popelnici v rohu nebo prázdné nebe a to důležité dostanete doprostřed.

Popisky a alternativní text

Ke každé fotce na webu patří alternativní text (alt text) – krátký popis toho, co na fotce je. Návštěvník ho běžně nevidí, ale:

čte ho Google, který jinak neví, co na fotce je. Dobře popsaná fotka se může objevit i ve vyhledávání obrázků,
čtou ho hlasové čtečky nevidomým a slabozrakým návštěvníkům,
zobrazí se místo fotky, když se nenačte.

Pište jednoduše a konkrétně, co na fotce je: „Hovězí tatarák s topinkami na dřevěném prkénku“ místo „IMG_4521“ nebo „jídlo“. Nemusíte do popisu cpát klíčová slova, stačí poctivý popis.

Tipy pro lepší fotky

Foťte při denním světle. U okna, ne pod zářivkou a bez blesku. Jídlo i interiér pak vypadají přirozeně.
Foťte na šířku, pokud fotka nemá jít vyloženě na výšku. Na šířku se hodí do většiny míst na webu.
Nechte kolem motivu místo. Fotka se pak dá oříznout do různých formátů.
Ukazujte skutečnost. Vlastní provozovnu, vlastní jídla, vlastní lidi. Zákazník pozná rozdíl.
Používejte jen fotky, ke kterým máte práva. Obrázek z vyhledávání není volně k použití. Vlastní fotky nebo fotky s licencí z fotobanky jsou jistota.
Fotky obměňujte. Nové jídlo, sezónní menu, nová realizace – aktuální fotky ukazují, že firma žije.

Jak to řeší Puretech CMS

Všechno výše zní jako spousta práce. V Puretech CMS ji za vás udělá systém – nemusíte vědět nic o pixelech ani formátech:

Nahrajete fotky, jak je máte. Přetáhnete je do prohlížeče, vyberete ze složky nebo vložíte ze schránky přes Ctrl+V. Klidně několik najednou.
Oříznete je. U každé fotky vyberete poměr stran – 21:9, 16:9, 4:3, 1:1, 3:4, 9:16, volný ořez nebo originál – a výřez posunete tak, aby to důležité bylo uprostřed.
Doplníte název a popis. Alternativní text je povinný, takže na něj nikdy nezapomenete.
CMS fotku optimalizuje sám. Převede ji do formátu WebP, zmenší na velikost vhodnou pro web a vytvoří i malý náhled pro rychlé zobrazení v přehledech. Z několikamegabajtové fotky z mobilu je soubor, který se načte během okamžiku.

Fotky pak vkládáte do článků na blogu nebo z nich skládáte fotogalerie, které se na webu zobrazí v přehledné mřížce a po kliknutí ve velkém náhledu. Všechny fotky máte na jednom místě, takže stejnou fotku použijete v článku i v galerii a nemusíte ji nahrávat znovu.

Tip: Potřebujete fotku pro sociální sítě, e-mail nebo tisk? V Puretech CMS najdete i nástroj Editor obrázků. Fotku v něm oříznete, nastavíte jí přesnou velikost v pixelech a stáhnete jako JPEG, PNG nebo WebP. Všechno probíhá jen ve vašem prohlížeči, fotka se nikam nenahrává.

Jak zvládnout správu fotek, článků a dalšího obsahu bez webmastera, popisujeme v článku Správa obsahu webu, kterou zvládne každý.

Časté otázky

Můžu na web nahrát fotky přímo z mobilu?

Ano. Do Puretech CMS je nahrajete tak, jak jsou, a systém je pro web sám zmenší a převede. Ořez a popis doplníte při nahrání.

Nezhorší se zmenšením kvalita fotky?

Na webu ne. Fotka se zmenší na velikost, ve které se na webu opravdu zobrazuje, takže rozdíl na obrazovce nepoznáte. Originál si ponechte u sebe pro tisk.

Kolik fotek dát do galerie?

Raději méně a dobrých. Deset vybraných fotek řekne víc než sto podobných. Galerii pak průběžně obměňujte.

Musím psát popisek ke každé fotce?

Alternativní text ano – stačí jedna krátká věta. Pomáhá Googlu i návštěvníkům, kteří fotky nevidí.

Shrnutí

Dobré fotky na web prodávají, ale musí být správně připravené: zmenšené, v moderním formátu, jednotně oříznuté a s popiskem. Ruční příprava zabere čas, proto je nejjednodušší nechat ji na systému. V Puretech CMS fotku nahrajete, jak je, oříznete a popíšete – a o velikost a formát se postará sám.

Chci web s fotogalerií→