Optimalizácia obrázkov je jednou z najčastejšie prehliadaných, no pritom veľmi dôležitých súčastí technického SEO a celkového výkonnostného nastavenia webu. Rýchle načítanie stránky ovplyvňuje nielen používateľský zážitok, ale aj umiestnenie vo výsledkoch vyhľadávania. Ak obrázky nie sú optimalizované, môžu zbytočne spomaľovať načítanie, znižovať skóre Core Web Vitals a tým pádom znižovať aj návštevnosť a konverzie.
Pozrime sa na praktické kroky, ako správne optimalizovať obrázky pre SEO a rýchlosť načítania stránky.
Používajte moderné formáty ako WebP
Čo je WebP?
WebP je moderný formát obrázkov vyvinutý spoločnosťou Google, ktorý dokáže zmenšiť veľkosť obrázku až o 30 % bez straty kvality v porovnaní s formátmi JPEG alebo PNG.
Prečo je WebP lepší?
-
Rýchlejšie načítanie stránok vďaka menšej veľkosti súborov
-
Podpora priehľadnosti (ako PNG) aj animácií (ako GIF)
-
Široká podpora v moderných prehliadačoch
Ako implementovať WebP?
-
Exportujte obrázky vo WebP priamo z grafických nástrojov (napr. Photoshop, Figma, Canva)
-
Použite nástroje na konverziu: Squoosh, TinyPNG, CloudConvert
-
Na WordPress stránkach použite pluginy ako WebP Express, ShortPixel, alebo Imagify
Nastavte správne rozmery obrázkov
Prečo sú rozmery dôležité?
Zbytočne veľké obrázky (napr. 4000 px šírka pre zobrazenie 300 px) spomaľujú stránku a zvyšujú objem prenesených dát. Prehliadač síce zmenší obrázok na požadovaný rozmer, ale načíta plnú veľkosť.
Ako na to?
-
Exportujte obrázok v takom rozmere, v akom sa reálne zobrazí (napr. 800x600 px pre blogový obrázok)
-
Pre responzívny web používajte
srcsetasizesatribúty v HTML -
Vyhýbajte sa používaniu rovnakého obrázka vo vysokom rozlíšení na mobile aj desktope
Nezabudnite na alt text
Čo je alt text?
Alt text (alternatívny text) je popis obrázku, ktorý čítajú vyhľadávače a asistívne technológie. Ak sa obrázok nenačíta, zobrazí sa práve alt text.
Ako písať kvalitný alt text?
-
Popíšte, čo je na obrázku, výstižne a jednoducho
-
Používajte kľúčové slová prirodzene – nesnažte sa ich nasilu natlačiť
-
Vyhnite sa frázam ako „obrázok s názvom...“ – rovno popíšte obsah
Príklad zlej praxe:
<img src="product.jpg" alt="foto">
Príklad dobrej praxe:
<img src="product.jpg" alt="Zlaté náušnice s prírodným diamantom">
Ďalšie tipy pre optimalizáciu obrázkov
Komprimujte obrázky bez viditeľnej straty kvality
-
Využite nástroje ako TinyPNG, ImageOptim (pre Mac) alebo Kraken.io
-
Znížte kvalitu na cca 70–80 % – zvyčajne bez viditeľného rozdielu
Lazy loading (odložené načítanie)
-
Umožňuje načítať obrázky až v momente, keď sa zobrazujú na obrazovke
-
Znižuje zaťaženie pri prvom načítaní stránky
-
V HTML použite atribút
loading="lazy":
Používajte popisné názvy súborov
-
Namiesto
IMG_1234.jpgpoužite napr.luxusna-vila-dubaj.jpg -
Pomáha to SEO a lepšej indexácii obrázkov vo vyhľadávačoch (napr. Google Images)
Optimalizácia obrázkov nie je zložitá, no má veľký vplyv na SEO, používateľský zážitok aj rýchlosť načítania stránok. Dodržiavaním týchto zásad:
-
používajte moderné formáty ako WebP,
-
nastavte správne rozmery,
-
vyplňte alt text a názvy súborov,
-
a implementujte lazy loading,
zabezpečíte, že vaše stránky budú rýchle, prehľadné a lepšie hodnotené vo vyhľadávačoch.
Tu nájdete všetkých 33 najčastejších otázok o SEO pre začiatočníkov - SEO FAQ
Komentáre
Zverejnenie komentára