Najčastejší dôvod, prečo sa web načítava pomaly, nie je hosting ani zlý kód. Sú to obrázky. Konkrétne obrázky, ktoré sú 5-megapixelové fotky priamo z mobilu alebo fotoaparátu, nahodené na web bez akejkoľvek úpravy.
Jedna fotka z fotoaparátu má bežne 3 až 8 MB. Stránka s desiatimi takými obrázkami má 50 MB. To je dvadsaťkrát viac, ako by mala mať celá podstránka aj s textom, fontami a skriptami. Návštevník na mobile čaká, Google to vidí, výsledok je horšie SEO a vyššia miera odchodov.
V tomto návode si ukážeme postup, ktorý používame my v agentúre. Je rýchly, bezplatný a dá sa naučiť za pätnásť minút. Funguje pre WordPress aj pre akúkoľvek inú platformu.
Krok 1: Rozmyslite si, kam obrázok pôjde
Skôr ako čokoľvek otvoríte, položte si otázku: kde presne tento obrázok bude? Toto určuje, akú má mať veľkosť. Nemá zmysel zmenšovať fotku na 800 pixelov, ak má byť hero obrázok cez celú šírku stránky. A nemá zmysel nahrávať 4000-pixelovú fotku, ak bude v malom boxe vedľa textu.
Pre jednoduchosť používame v praxi jednu univerzálnu šírku: 2000 pixelov. Je to dosť pre takmer všetky pozície na webe vrátane retina displejov, a zároveň to neprodukuje obrovské súbory.
Prečo práve 2000 pixelov?
Bežný monitor má rozlíšenie 1920 pixelov na šírku. Retina (vysokohustotné) displeje na MacBookoch a novších notebookoch potrebujú dvojnásobnú hustotu pixelov, aby bol obrázok ostrý. 2000 pixelov pokryje obe situácie – stačí to na full-width hero, na obrázok v stĺpci, aj na lightbox po kliknutí. Pre úplnú väčšinu fotiek na firemných weboch je to optimálny kompromis medzi kvalitou a veľkosťou.
Výnimka: ak ide o logo, ikonu alebo malú náhľadovku v zozname, môžete ísť aj výrazne nižšie (400 – 800 px). Ale ak váhate, dajte 2000.
Krok 2: Otvorte Squoosh
Na úpravu obrázkov používame nástroj Squoosh.app od Google. Je bezplatný, beží priamo v prehliadači (nemusíte nič inštalovať) a obrázky zostávajú u vás v počítači – nenahrávajú sa nikam na server. To je dôležité, ak pracujete s fotkami klientov alebo internými materiálmi.
Squoosh vie naraz spraviť dve veci: zmenšiť obrázok na požadovanú šírku a prekonvertovať ho do formátu WebP. Predtým sme používali kombináciu Adobe Express + TinyPNG, ale Squoosh celý workflow nahradí jedným nástrojom.
Otvorte https://squoosh.app a presuňte do okna obrázok, ktorý chcete upraviť.
Krok 3: Nastavte šírku na 2000 pixelov
Po nahratí obrázka uvidíte vpravo panel s nastaveniami. Hore je sekcia Resize (zmena veľkosti) a dole Compress (kompresia). Začneme hore.
- Zapnite Resize prepínačom vpravo (zmení sa na modrý).
- Method: nechajte Lanczos3 (default). Je to najostrejší algoritmus na zmenšovanie a pre fotky funguje najlepšie.
- Width: kliknite na pole a vpíšte 2000. Pole Height (výška) sa dopočíta automaticky, ak máte zapnutú voľbu Maintain aspect ratio (zachovať pomer strán) – tú nechajte zaškrtnutú.
- Ostatné voľby: (Premultiply alpha, Linear RGB) nechajte zaškrtnuté, Reduce palette nechajte vypnuté.
POZOR
Ak je váš pôvodný obrázok menší ako 2000 pixelov (napríklad screenshot z webu má často 1280 px), nezvyšujte ho. Squoosh by ho síce roztiahol, ale obrázok by stratil ostrosť. V takom prípade nechajte pôvodnú šírku a pokračujte rovno na kompresiu.
Krok 4: Nastavte WebP a kvalitu 70
WebP je moderný formát obrázkov, ktorý pri rovnakej kvalite produkuje 3 až 5-krát menšie súbory ako bežný JPG alebo PNG. Podporujú ho všetky moderné prehliadače (Chrome, Firefox, Safari, Edge) – v roku 2026 už nie je dôvod ho nepoužívať.
- V pravom paneli chodte nadol do sekcie Compress.
- V rozbaľovacom menu vyberte WebP.
- Lossless nechajte vypnuté (bez zaškrtnutia). Lossless robí súbory zbytočne veľké a pre fotky to nemá zmysel.
- Effort: nechajte na 4 (default). Vyššia hodnota znamená pomalšiu kompresiu, ale výsledok je takmer rovnaký.
- Quality (kvalita): tu pozor – posuvník je nepresný. Kliknite na číslo vpravo (default 75), vymažte ho a vpíšte 70. Tým máte istotu, že je hodnota presne tam, kde chcete.
PREČO KVALITA 70?
Pri WebP je kvalita 70 taký zlatý stred, kde ľudské oko nevidí rozdiel oproti originálu, ale súbor je výrazne menší. Squoosh ukazuje v spodnej časti obrazovky porovnanie pôvodného a nového obrázka aj s veľkosťou súboru – posúvajte deliacu čiaru a presvedčte sa sami.
Ak vidíte na obrázku rušivé artefakty (napríklad „škvrny“ na čistom pozadí alebo rozmazané hrany), zvýšte kvalitu na 75. Ak je obrázok jednoduchý (napríklad screenshot bez gradientov), môžete ísť aj na 60 a stále to bude vyzerať dobre.
Krok 5: Stiahnite obrázok
Vpravo dole je modré tlačidlo na stiahnutie. Squoosh ukáže, o koľko sa súbor zmenšil – pri bežnej fotke z fotoaparátu očakávajte úsporu 90 až 95 %. Z 3-megabajtovej fotky bude súbor s veľkosťou okolo 150 až 250 kB.
| Pôvodný obrázok | Po úprave (2000 px, WebP 70) | Úspora |
|---|---|---|
| Fotka z mobilu (4000 × 3000 px, JPG, 4,2 MB) | 2000 × 1500 px, WebP, ~200 kB | ~95 % |
| Fotka z fotoaparátu (6000 × 4000 px, JPG, 8,5 MB) | 2000 × 1333 px, WebP, ~250 kB | ~97 % |
| Screenshot (1920 × 1080 px, PNG, 1,8 MB) | 1920 × 1080 px, WebP, ~120 kB | ~93 % |
Krok 6: Premenujte súbor podľa toho, čo je na obrázku
Skôr ako obrázok nahráte na web, premenujte ho. Defaultný názov z foťáku vyzerá ako IMG_20250214_103847.webp a pre Google nehovorí nič. Premenovaním pomôžete SEO – Google z názvu súboru číta, čo na obrázku je.
Zásady dobrého názvu súboru:
- Slovenský popis bez diakritiky (nie kávový-stroj-v-kancelárii.webp, ale kavovy-stroj-v-kancelarii.webp)
- Pomlčky medzi slovami, nie podčiarkovníky ani medzery
- Malé písmená
- Krátko a vecne – 3 až 5 slov stačí
Príklady:
tim-pri-praci-na-projekte.webpukazka-webu-pre-stolarstvo.webp
Krok 7: Po nahratí na web doplňte ALT text
ALT text je textový popis obrázka, ktorý sa zobrazí, ak sa obrázok z nejakého dôvodu nenačíta. Ale to nie je hlavný dôvod, prečo ho treba vyplniť – sú dva oveľa dôležitejšie:
- Prístupnosť pre zrakovo postihnutých. Čítače obrazovky (screen readery) prečítajú nevidiacim návštevníkom práve ALT text. Bez neho je obrázok pre nich neviditeľný.
- SEO. Google nevidí, čo je na obrázku. Algoritmus síce vie analyzovať obsah fotky, ale ALT text je pre neho primárny zdroj informácie. Dobre napísané ALT texty pomáhajú obrázku objaviť sa v Google Images, čo môže priviesť na web ďalšiu návštevnosť.
Ako napísať dobrý ALT text:
- Popíšte, čo na obrázku skutočne je, nie čo by ste chceli, aby tam bolo. Ak je na fotke dvaja chlapi pri stole s notebookom, napíšte to. Nepíšte „úspešná spolupráca a inovácia v digitálnej dobe“.
- Buďte konkrétni. Popis „Pes“ nieje veľmi správne. „Hnedý labrador beží po pláži“ je dobrý popis.
- Krátko – jedna veta, maximálne 125 znakov.
- Bez „obrázok zobrazuje…“ alebo „fotka znázorňuje…“. Čítače obrazovky už vedia, že čítajú ALT text obrázka, nemusíte to opakovať.
- Kľúčové slovo, ak má prirodzene zapadnúť, môže pomôcť SEO. Ale netlačte na to – ALT text je hlavne pre ľudí.
Príklady dobrých a zlých ALT textov
Fotka: muž v montérkach renovuje drevený stôl v dielni.
❌ obrázok
❌ práca
❌ profesionálny stolár pri svojej obľúbenej činnosti v krásnej dielni
✅ Stolár brúsi povrch dubového stola v dielni v Rimavskej Sobote
Vo WordPresse nájdete pole na ALT text takto: kliknite na obrázok v editore, vpravo sa otvorí panel s nastaveniami a tam je políčko Alternatívny text (alebo Alt text). V knižnici Multimédií je to pole Alternatívny text pri detaile obrázka.
Zhrnutie: celý workflow v štyroch riadkoch
- Squoosh.app → presuň obrázok → Resize na 2000 px → WebP, kvalita 70 → stiahnuť
- Premenuj súbor popisne, bez diakritiky, s pomlčkami (nazov-popisu.webp)
- Nahraj na web
- Doplň ALT text – jedna konkrétna veta o tom, čo na obrázku je
Celý postup zaberie pri jednom obrázku menej ako minútu. Ak ho zopakujete pri každom obrázku, ktorý nahráte na web, máte vyriešený 80 % problém s rýchlosťou webu.
Záver
Optimalizácia obrázkov nie je raketová veda. Je to návyk. Akonáhle si zapamätáte postup (Squoosh → 2000 px → WebP 70 → premenovať → ALT text), urobíte to pri každej fotke automaticky a váš web bude rýchly aj o päť rokov.
Ak na to nemáte čas alebo chcete mať istotu, že váš web je správne optimalizovaný – napíšte nám.