Optimalizácia obrázkov pre SEO: Alt texty, veľkosť súborov a formáty

Prečo optimalizovať obrázky?

Obrázky tvoria často 50-80% veľkosti webovej stránky. Neoptimalizované obrázky spomaľujú načítanie, čo má negatívny vplyv na:

• SEO – Rýchlosť stránky je rankingový faktor
• Používateľský zážitok – Pomalé stránky majú vyššiu bounce rate
• Konverzie – Každá sekunda oneskorenia znižuje konverzie

Navyše, správne optimalizované obrázky môžu prinášať návštevnosť z Google Image Search.

Tento článok je súčasťou série On-Page SEO a tvorba obsahu.

Alt text: Základ SEO obrázkov

Čo je alt text?

Alt text (alternatívny text) je popis obrázka, ktorý sa zobrazí, keď sa obrázok nenačíta. Je kľúčový pre:

• SEO – Google "číta" obrázky cez alt text
• Prístupnosť – Screen readery ho čítajú nevidiacim
• Kontext – Pomáha Googlu pochopiť obsah

Ako písať alt text

✅ Dobré pravidlá:

• Stručný (do 125 znakov)
• Opisný – čo je na obrázku?
• Obsahuje kľúčové slovo (prirodzene)
• Bez "obrázok", "fotka" na začiatku

Príklady:

✅ "SEO audit report zobrazený na laptop obrazovke" ✅ "Graf rastu organickej návštevnosti po SEO optimalizácii" ❌ "Obrázok" (neopisné) ❌ "SEO SEO optimalizácia SEO služby SEO" (keyword stuffing) ❌ "" (prázdny alt)

Kedy nechať alt prázdny?

Dekoratívne obrázky (ikony, ornamenty) môžu mať prázdny alt: `alt=""`

Názvy súborov obrázkov

SEO-friendly názvy

Google berie do úvahy aj názov súboru:

✅ Dobré:

• seo-audit-graf.webp
• keyword-research-nastroje.jpg
• on-page-seo-checklist.png

❌ Zlé:

• IMG_12345.jpg
• screenshot-2024-01-15.png
• obrazok1.jpg

Pravidlá

• Používajte pomlčky (nie podčiarkovníky)
• Popisné názvy
• Malé písmená
• Bez diakritiky (pre URL)

Formáty obrázkov

Moderné formáty

Odporúčanie 2025

• Primárne: WebP (najlepší pomer kvalita/veľkosť)
• Ikony/logá: SVG
• Fallback: JPEG/PNG pre staršie browsery

Kompresia a veľkosť súborov

Odporúčané veľkosti

• Hero obrázky: max 200-300 KB
• Obrázky v obsahu: max 100-150 KB
• Thumbnaily: max 30-50 KB
• Ikony: max 5-10 KB

Nástroje na kompresiu

Online:

• TinyPNG/TinyJPG
• Squoosh (Google)
• Compressor.io

Desktop:

• ImageOptim (Mac)
• RIOT (Windows)

WordPress pluginy:

• ShortPixel
• Imagify
• Smush

Lossy vs Lossless

• Lossy – Znižuje kvalitu, väčšia úspora (70-90%)
• Lossless – Zachováva kvalitu, menšia úspora (20-30%)

Pre web je lossy kompresia zvyčajne dostačujúca.

Lazy Loading

Čo je lazy loading?

Lazy loading načítava obrázky až keď sú potrebné (keď sa používateľ scrolluje k nim). Výrazne zlepšuje:

• Initial page load time
• LCP (Largest Contentful Paint)
• Dátovú spotrebu

Implementácia

Natívne (HTML): ```html <img src="obrazok.webp" loading="lazy" alt="Popis"> ```

Dôležité: Nenačítavajte lazy above-the-fold obrázky (hero, logo).

Responzívne obrázky

Srcset a Sizes

Poskytnite rôzne veľkosti pre rôzne zariadenia:

```html <img srcset="obrazok-400.webp 400w, obrazok-800.webp 800w, obrazok-1200.webp 1200w" sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px" src="obrazok-800.webp" alt="Popis obrázka"> ```

Image Sitemap

Pre lepšiu indexáciu obrázkov vytvorte image sitemap:

```xml <url> <loc>https://example.com/stranka</loc> image:image image:lochttps://example.com/obrazok.webp</image:loc> image:titleNázov obrázka</image:title> </image:image> </url> ```

Google Image Search optimalizácia

Ako sa dostať do Image Search

1. Relevantný alt text s kľúčovými slovami
2. Kvalitné, originálne obrázky
3. Kontextový obsah okolo obrázka
4. Štruktúrované dáta (Schema.org ImageObject)
5. Image sitemap

Checklist optimalizácie obrázkov

✅ Relevantný, opisný alt text ✅ SEO-friendly názov súboru ✅ Moderný formát (WebP) ✅ Komprimované na minimálnu veľkosť ✅ Lazy loading pre below-the-fold ✅ Responzívne veľkosti ✅ Správne rozmery (neprezoomované)

Záver

Optimalizácia obrázkov je často prehliadaná, ale môže výrazne zlepšiť rýchlosť webu aj SEO. Investujte čas do správnych názvov, alt textov a kompresie.

Viac o on-page faktoroch nájdete v hlavnom článku On-Page SEO a tvorba obsahu.

📚 Tento článok je súčasťou série On-Page SEO a tvorba obsahu