Proč jsou příliš velké obrázky na webu problém?
Obrázky dělají webové stránky vizuálně přitažlivější a přehlednější. Ale když jsou příliš velké (datově i rozměrově), mohou web výrazně zpomalit. A to není dobré ani pro návštěvníky, ani pro vyhledávače.
Když na web nahrajete obrázek z mobilu nebo fotoaparátu, může mít klidně 5–15 MB. To je pro běžné použití naprosto zbytečné. Pár takových fotek a stránka se začne načítat velmi pomalu.
A pomalý web má hned několik nevýhod:
- odradí návštěvníky, kteří nechtějí čekat
- zhoršuje hodnocení ve vyhledávačích (rychlost je SEO faktor)
- zbytečně zatěžuje hosting a přenáší velké objemy dat
- ztěžuje načítání na mobilních sítích
- zhoršuje celkový uživatelský zážitek
O tom, proč zlepšovat rychlost webu, se můžete dočíst ZDE.
? Ideální je fotku nejdřív upravit – oříznout, zmenšit a až poté nahrát na web. Většinou bohatě stačí obrázek o velikosti pod 300 KB – a někdy i mnohem menší.
Moje jméno je Pavel Szabo a jsem programátor webových stránek, eshopů a redakčních systémů. Pokud potřebujete zkušeného a spolehlivého programátora pro vaše projekty, můžete mě ihned kontaktovat. Můžete si taktéž prohlédnout mé reference a doporučení od klientů.
V čem pomůže snížení datové velikosti obrázků?
Když obrázky správně upravíte, výrazně tím zlepšíte fungování celého webu. Konkrétně:
- ✅ Zrychlíte načítání webu – stránky se zobrazí rychleji, návštěvník neuteče
- ✅ Zlepšíte výsledky ve vyhledávačích – Google má rád rychlé weby
- ✅ Snížíte náklady na hosting – menší přenos dat = menší zatížení serveru
- ✅ Zlepšíte UX na mobilních zařízeních – obrázky se načtou i při pomalejším připojení
- ✅ Zvýšíte pravděpodobnost konverze – lidé déle zůstanou a častěji provedou akci
Jaká je ideální velikost obrázků na webu?
Velikost obrázku na webu záleží na tom, kde se bude zobrazovat. Zároveň je dnes běžné, že návštěvníci používají zařízení s vysokým rozlišením (např. Retina displeje), proto se doporučuje obrázky vkládat ve dvojnásobné šířce, než jakou skutečně zabírají na stránce. Prohlížeč je zobrazí správně, ale na kvalitních displejích budou vypadat ostře.
Tady je pár obecných doporučení:
- Obrázek na celou šířku webu (např. úvodní banner): zobrazení cca 1200 px → doporučený obrázek 2400 px
- Obrázky v článcích nebo vedle textu: zobrazení cca 600 px → doporučený obrázek 1200 px
- Miniatury (náhledy, galerie): zobrazení cca 300 px → doporučený obrázek 600 px
- Ikony a drobná grafika: zobrazení cca 100 px → doporučený obrázek 200 px
Datová velikost by se ideálně měla pohybovat pod 300 KB. U menších obrázků (náhledů, ikon) často stačí i pod 100 KB. Důležitá je nejen správná šířka, ale také komprese a vhodný formát – ideálně WebP.
V námi používaných systémech zajišťuji automatickou komprimaci originálních obrázků, takže se na webu vždy načítá taková verze, která odpovídá konkrétnímu rozlišení a použití. Nemusíte tedy manuálně připravovat každou variantu.
Zároveň doporučuji na serveru zachovávat originální (plné) verze obrázků. Pokud by se v budoucnu změnil způsob zobrazování, nebo se začaly běžně používat větší displeje (např. 4K nebo 8K monitory), bude možné z těchto originálů snadno vytvořit nové varianty bez ztráty kvality.
Jak zmenšit velikost obrázků?
Obrázky můžete upravit v nástrojích jako Canva, Zoner nebo použít jednoduché online nástroje:
Stačí nahrát fotku, nastavit požadovanou velikost a formát a stáhnout optimalizovanou verzi. Teprve tu pak nahrávejte na web.
Jaký formát obrázku použít na webu?
Výběr správného formátu ovlivňuje jak kvalitu, tak výslednou velikost obrázku. Doporučuji:
- WebP – moderní formát s výbornou kompresí a kvalitou. Ideální volba pro většinu případů
- JPG/JPEG – vhodný pro fotky, pokud WebP není k dispozici
- PNG – používejte jen tehdy, pokud potřebujete průhledné pozadí (např. u loga)
- SVG – perfektní pro loga a vektorové ikony, které se nenačítají jako bitmapy
Nepodceňujte názvy obrázků na webových stránkách
Obrázky by měly mít smysluplné názvy. Místo IMG1234.jpg doporučuji například kavarna-interier-praha.jpg. Pomáhá to v SEO i při správě souborů.
Shrnutí: co si ohlídat u obrázků na webu
- Nepoužívejte obrázky rovnou z mobilu nebo fotoaparátu
- Přizpůsobte rozměry obrázku místu, kde se bude zobrazovat
- Optimalizujte datovou velikost – ideálně pod 300 KB
- Používejte moderní formát WebP, případně JPG nebo PNG podle potřeby
- Pojmenujte soubor smysluplně – pomáhá to i v SEO
Máte pocit, že se váš web načítá pomalu? Nejste si jistí, jak správně připravit obrázky? Kontaktujte mě – rád se na to podívám a poradím.
