Jaký formát použít, jak je připravit a proč na tom záleží
Obrázky jsou jednou z nejčastějších příčin, proč je web pomalý.
Zároveň jsou ale klíčové pro první dojem, emoce i důvěryhodnost webu.
Dobrá zpráva je, že stačí dodržet pár jednoduchých pravidel a obrázky vám začnou sloužit – ne škodit.
Jak vybrat fotky, které na webu zaujmou, popisuje fotografka Dana Ostrovská v článku fotky na web.
Proč jsou obrázky na webu tak důležité
- ovlivňují rychlost načítání webu
- mají vliv na SEO
- rozhodují o prvním dojmu
- hrají roli v přístupnosti webu
Špatně připravené obrázky = pomalý web, horší pozice ve vyhledávání a vyšší míra odchodů.
Jaký formát obrázků použít na web
✅ Doporučené formáty
WebP
👉 ideální volba pro web
- výrazně menší velikost souboru
- zachovává kvalitu
- podporovaný většinou moderních prohlížečů
JPG (JPEG)
👉 dobrá alternativa
- vhodný pro fotografie
- větší soubory než WebP, ale stále použitelný
⚠️ Formáty, kterým se vyhýbat
- PNG – pouze pokud potřebujete průhlednost (loga, ikony)
- TIFF, BMP – na web vůbec nepatří
Doporučené rozměry a velikost obrázků
Z praxe se mi dlouhodobě osvědčilo:
- maximální šířka:
1920 px - ideální velikost souboru: do 200 kB
- čím menší, tím lepší (pokud neutrpí kvalita)
📌 Obrázek větší než 300–400 kB už je často zbytečně velký.
Častá chyba: nahrávání „originálů“
Fotky přímo z:
- mobilu
- fotoaparátu
- Canvy bez úprav
➡️ mívají klidně 3–8 MB
➡️ web pak načítá zbytečně velká data
Na web nikdy nenahrávejte originální soubory.
Jak obrázky připravit před nahráním
Základní postup:
- upravte rozměr (max. 1920 px)
- zvolte správný formát (WebP / JPG)
- optimalizujte velikost souboru
- až potom nahrajte na web
Existuje spousta nástrojů, které to zvládnou během pár sekund – důležité je na to nezapomínat.
Obrázky a rychlost webu
Obrázky mají přímý vliv na:
- rychlost načítání
- Core Web Vitals
- mobilní výkon webu
Optimalizované obrázky často znamenají:
- rychlejší web bez zásahu do kódu
- lepší skóre v nástrojích pro měření rychlosti
Proč na rychlosti záleží i pro Google, vysvětluju v článku Co je SEO.
Obrázky a přístupnost
Každý obrázek by měl mít:
- smysluplný alternativní text (alt text)
- popis toho, co je na obrázku důležité
Alt text:
- pomáhá lidem se zrakovým omezením
- používají ho čtečky obrazovky
- může mít pozitivní vliv i na SEO
Shrnutí – rychlá pravidla
Pokud si máte zapamatovat jen pár věcí:
- používejte WebP (nebo JPG)
- maximální šířka 1920 px
- ideálně do 200 kB
- nikdy nenahrávejte originální fotky
- myslete na alt texty
Nejste si jistí, jestli to máte na webu správně?
Pokud máte pocit, že:
- je web pomalý
- obrázky jsou „nějak moc velké“
- nebo si prostě nejste jistá
👉 ráda se na to podívám a řeknu vám, co má smysl upravit a co už je v pořádku.
Na webech, které stavím, řeším obrázky za vás: tvorba webu.