Fotografie jsou páteří moderního webu. Přesto většina provozovatelů webů dělá při práci s obrázky zásadní chyby, které negativně ovlivňují rychlost načítání, SEO i uživatelskou zkušenost. Správné zacházení s fotografiemi není rocket science, ale vyžaduje znalost několika důležitých principů.
Proč je správná práce s fotografiemi tak důležitá
Obrázky tvoří v průměru šedesát až sedmdesát procent celkové velikosti webové stránky. Špatně optimalizované fotografie mohou zpomalit načítání webu z dvou sekund na deset a více. To má přímý dopad na návštěvnost – podle studií Google opustí čtyřicet procent uživatelů web, který se načítá déle než tři sekundy.
Kromě rychlosti ovlivňují fotografie také pozici ve vyhledávačích. Google při hodnocení webu bere v úvahu technické parametry obrázků, jejich pojmenování i alternativní texty. Správně optimalizované fotografie tak mohou přinést dodatečnou návštěvnost z vyhledávání obrázků.
Výběr správného formátu obrázků
Každý typ fotografie vyžaduje jiný formát souboru. Znalost rozdílů mezi formáty vám ušetří gigabajty místa na serveru a výrazně zrychlí web.
JPEG – univerzální volba pro fotografie
Formát JPEG je ideální pro běžné fotografie s mnoha barvami a plynulými přechody. Podporuje kompresi s mírnou ztrátou kvality, což umožňuje výrazně zmenšit velikost souboru bez viditelného zhoršení obrazu.
- Vhodný pro produktové fotografie, portréty a krajiny
- Komprese osmdesát až osmdesát pět procent je optimální pro web
- Nepodporuje průhlednost
- Ideální pro obrázky s rozměry nad pět set pixelů
PNG – pro grafiku a průhlednost
PNG formát využijete především pro loga, ikony a grafické prvky vyžadující průhledné pozadí. Na rozdíl od JPEG používá bezztrátovou kompresi.
- Perfektní pro loga a ilustrace s ostrými hranami
- Podporuje průhlednost (alfa kanál)
- Větší velikost souborů než JPEG
- Nevhodný pro rozsáhlé fotografie
WebP – moderní standard budoucnosti
WebP je relativně nový formát od Google, který kombinuje výhody JPEG a PNG. Nabízí lepší kompresi při zachování kvality a podporuje průhlednost.
- O třicet až padesát procent menší soubory než JPEG
- Podporuje průhlednost i animace
- Kompatibilní s většinou moderních prohlížečů
- Doporučujeme používat s fallbackem pro starší prohlížeče
Optimalizace velikosti a rozlišení fotografií
Největší chybou začátečníků je nahrávání fotografií přímo z fotoaparátu nebo mobilu bez jakékoli úpravy. Moderní telefony pořizují snímky s rozlišením dvanáct až sto osm megapixelů, což vytváří soubory o velikosti pět až patnáct megabajtů. Pro web je to naprosto zbytečné.
Jaké rozlišení skutečně potřebujete
Pro většinu webových aplikací platí následující pravidla:
- Hlavní obrázky a bannery: maximálně tisíc devět set dvacet pixelů na šířku
- Produktové fotografie: osm set až tisíc dvě stě pixelů
- Miniatury a náhledy: tři sta až pět set pixelů
- Retina displeje: dvojnásobné rozlišení, ale s vyšší kompresí
Pro blog nebo zpravodajský web postačí šířka tisíc dvě stě pixelů i pro hlavní ilustrační fotografie. Vyšší rozlišení nemá smysl, protože většina monitorů a mobilních zařízení stejně zobrazuje menší velikost.
Nástroje pro optimalizaci obrázků
Existuje řada nástrojů, které vám pomohou s optimalizací fotografií:
- TinyPNG a TinyJPG: online komprese bez viditelné ztráty kvality
- ImageOptim: desktopová aplikace pro Mac
- RIOT: pokročilý nástroj pro Windows
- Squoosh: webová aplikace od Google s pokročilým nastavením
- WordPress pluginy: Smush, ShortPixel, Imagify pro automatickou optimalizaci
Systém pojmenování a organizace souborů
Chaotické pojmenování fotografií typu IMG_3847.jpg nebo fotka-final-final-2.jpg není jen neprofesionální, ale škodí také SEO a orientaci v souborech.
Pravidla pro pojmenování fotografií
Dodržujte tyto zásady pro konzistentní a SEO-friendly pojmenování:
- Používejte pouze malá písmena
- Oddělujte slova pomlčkami, ne podtržítky
- Vyhněte se diakritice a speciálním znakům
- Název by měl popisovat obsah obrázku
- Zahrnujte relevantní klíčová slova
Špatně: IMG_20240115.jpg, fotka 1.jpg, obrázek-nový-FINAL.jpg
Správně: moderni-kuchyne-bila-leskla.jpg, wordpress-dashboard-nastaveni.jpg, letni-zahrada-terasa.jpg
Struktura složek pro ukládání fotografií
Promyšlená organizace složek vám ušetří hodiny hledání a usnadní správu webu. Doporučujeme vytvořit hierarchickou strukturu podle typu obsahu:
- /produkty/ – fotografie produktů s podsložkami podle kategorií
- /blog/ – ilustrační obrázky k článkům, ideálně členěné podle roku a měsíce
- /galerie/ – fotogalerie s podsložkami podle událostí
- /system/ – loga, ikony, tlačítka a další grafické prvky
- /team/ – fotografie týmu a zaměstnanců
V případě rozsáhlého webu s tisíci fotografiemi zvažte další členění podle roku nebo kategorie. WordPress automaticky ukládá soubory do struktury /rok/mesic/, což je pro většinu případů vyhovující.
SEO optimalizace fotografií
Fotografie mohou být významným zdrojem návštěvnosti z vyhledávání Google Obrázky. K tomu je však nutné správně vyplnit metadata a alternativní texty.
Alternativní text (ALT tag)
ALT text plní dvě důležité funkce – zpřístupňuje obsah obrázku nevidomým uživatelům a pomáhá vyhledávačům pochopit, co je na fotografii zobrazeno.
Pravidla pro psaní ALT textů:
- Popište konkrétně, co je na obrázku vidět
- Používejte přirozený jazyk, ne výčet klíčových slov
- Optimální délka je pět až patnáct slov
- Nezačínejte slovy „obrázek“ nebo „fotografie“
- Zahrnujte relevantní klíčová slova, ale přirozeně
Špatně: „obrázek“, „fotka produktu“, „kuchyně kuchyně moderní kuchyně bílá“
Správně: „Moderní bílá kuchyně s lesklými dvířky a nerezovými spotřebiči“
Title atribut a popisky
Title atribut se zobrazí při najetí myší na obrázek. Není tak důležitý pro SEO jako ALT text, ale zlepšuje uživatelskou zkušenost. Může být o něco delší a obsahovat doplňující informace.
U WordPress webu nezapomínejte vyplňovat také pole Popisek a Popis, které se používají v galeriích a mohou být indexovány vyhledávači.
Technické aspekty načítání fotografií
Moderní weby by měly využívat pokročilé techniky načítání obrázků pro maximální výkon.
Lazy loading – líné načítání
Lazy loading zajistí, že se fotografie načtou až ve chvíli, kdy se uživatel přiblíží k místu, kde se zobrazují. To výrazně zrychlí načtení stránky.
Ve WordPressu je lazy loading od verze pět celá šest aktivní automaticky. Pro starší verze použijte plugin nebo přidejte atribut loading=“lazy“ do tagu img:
Výhody lazy loadingu:
- Rychlejší načtení stránky o třicet až padesát procent
- Nižší spotřeba dat pro mobilní uživatele
- Menší zátěž serveru
- Lepší skóre v PageSpeed Insights
Responzivní obrázky
Responzivní web by měl načítat různě velké verze fotografií podle velikosti displeje. Mobilní telefon nepotřebuje stahovat obrázek široký dva tisíce pixelů.
WordPress automaticky vytváří několik velikostí každé nahrané fotografie. Pro pokročilé použití využijte HTML atribut srcset, který prohlížeči nabídne více variant:
- Mobilní zařízení dostanou verzi širokou čtyři sta až osm set pixelů
- Tablety načtou střední verzi kolem tisíc pixelů
- Desktopy získají plnou verzi
- Retina displeje automaticky načtou dvojnásobné rozlišení
CDN pro rychlejší doručení
Content Delivery Network (CDN) ukládá kopie vašich fotografií na servery rozmístěné po celém světě. Uživatel pak stahuje obrázky z geograficky nejbližšího serveru, což výrazně zkracuje dobu načítání.
Populární CDN služby jako Cloudflare, BunnyCDN nebo KeyCDN nabízejí i automatickou optimalizaci a konverzi obrázků do moderních formátů.
Bezpečnost a zálohování fotografií
Ztráta fotografií může být pro web fatální. Pravidelné zálohování je absolutní nutnost.
Strategie zálohování
Doporučujeme kombinovat několik způsobů zálohování:
- Automatické zálohy hostingu: většina kvalitních hostingů nabízí denní zálohy
- WordPress pluginy: UpdraftPlus, BackWPup pro automatické zálohy do cloudu
- Manuální zálohy: pravidelné stahování složky wp-content/uploads
- Cloud storage: synchronizace do Google Drive, Dropbox nebo OneDrive
- Pravidlo tří kopií: originál + dvě zálohy na různých místech
Ochrana před krádeží fotografií
Pokud používáte vlastní kvalitní fotografie, měli byste je chránit před neoprávněným použitím:
- Přidejte nenápadný vodoznak s logem nebo URL
- Zablokujte pravé tlačítko myši (s vědomím, že to není stoprocentní ochrana)
- Používejte nižší rozlišení pro webové zobrazení
- Zvažte registraci autorských práv u důležitých fotografií
- Pravidelně kontrolujte použití vašich fotek pomocí Google Obrázky
Časté chyby při práci s fotografiemi
Vyvarujte se těchto nejčastějších prohřešků, které poškozují výkon a profesionalitu webu:
Nahrávání příliš velkých souborů
Fotografie