Prečo a ako optimalizovať obrázky na web

Cieľom optimalizácie je znížiť objem dát, ktoré si používateľ musí stiahnuť, ak chce zobraziť stránku na webe. Znížením veľkosti súborov tak priamo úmerne znižujeme čas načítania.

2 minúty čítania

Niet pochýb o tom, že obrázky sú neoddeliteľnou súčasťou webu. Obrázky nielenže vizualizujú obsah, no slúžia aj na optické rozdelenie obsahu na stránke. Bohužiaľ používanie nesprávneho formátu a veľkosti obrázkov si môže vybrať svoju daň v podobe veľkého strašiaka - pomalého načítania webu.

Pomalé načítanie webu negatívne ovplyvňuje používateľa, znižuje konverný pomer, ale má takisto negatívny vplyv na SEO. Obrázky by mali zlepšovať užívateľský zážitok. Nesprávne optimalizované obrázky spôsobujú úplný opak.

Stránka by sa mala načítať menej ako 2 sekundy.

Čo je optimalizácia obrázkov na web ?

Optimalizácia obrázkov je proces, pri ktorom znižujeme veľkosť súboru obrázkov. Cieľom optimalizácie je znížiť objem dát, ktoré si používateľ musí stiahnuť, ak chce zobraziť stránku na webe. Znížením veľkosti súborov tak priamo úmerne znižujeme čas načítania.

Ideálna veľkosť bežného obrázka je menej ako 100 kB

Postup pri optimalizácii obrázkov na web

1. Zistite aktuálnu rýchlosť načítania web stránky

Predtým ako začnete s optimalizáciou, je dôležité zmerať si rýchlosť načítania webu. Pre tento krok môžete využiť množstvo programov ako napríklad PageSpeed Insights a WebPageTest. Alebo si môžete nechať od nás vypracovať BEZPLATNÝ audit, v rámci ktorého vám zmeriame mimo iného aj rýchlosť web stránky.

2. Zistite, aký formát obrázkov je pre vás vhodný

Výber formátu obrázkov je dôležitý. Vysvetlíme vám najpodstatnejšie rozdiely.

  1. JPEG - vhodné pre farebné obrázky, pri ktorých je rozlíšenie dôležité (veľké bannery)
  2. PNG - vhodné pre obrázky s transparentným pozadím a menej farbami
  3. GIF - podporuje len 256 farieb, dôležitá je dĺžka animácie
  4. WebP - formát novej generácie, ktorý je 26% menší ako PNG a 25-34% menšie ako porovnateľné JPEG

Používajte formát WebP, kdekoľvek sa použiť dá.

3. Kompresujte obrázky

Na zmenšenie veľkosti súboru treba obrázok kompresovať. Na kompresiu nám výborne poslúžia online nástroje. My najčastejšie používame TinyPNG a EZGIF.

4. Obrázky pomenujte a vyplňte alt tag

Pre správnu SEO optimalizáciu vyšperkujte vaše obrázky správnym názvom a alt tagom. Vďaka tomuto kroku môžu používatelia kliknúť na váš obrázok vo vyhľadávaní a dostať sa na váš web.

  1. Pomenovanie obrázka - pomenujte obrázok bez diakritiky vo svojom počítači. Na vyplnenie medzier využívajte pomlčky.
  2. Vyplnenie alt tag - Alt tag by mal byť o trochu popisnejší ako názov obrázka. Alt tag vyplníte v kóde webu alebo vo svojom CMS systéme pri pridávaní obrázkov.

Záver

Vďaka tomuto zrozumiteľnému návodu ste sa dozvedeli, na čo nám slúži optimalizácia obrázkov na web. Taktiež sme si ukázali presný postup zmenšovania (kompresie) obrázkov. Na úplný záver môžete vaše obrázky vyšperkovať názvom a alt tagom, ktoré pomôžu pri SEO optimalizácii. Najlepšie na tom je, že obrázok si dokáže optimalizovať každý pomocou dostupných nástrojov na internete. Veríme, že sme opäť o kúsok vylepšili váš web a online marketing.

Autorita domény ako mantra SEO špecialistov

Čo je to domain rating, ako funguje a kde ho viem zmerať? Dočítate sa v najnovšom článku!

Čo je SSL certifikát a ako funguje

Čo je to SSL certifikát, na čo slúži, prečo ho potrebujem, a ako ho nainštalujem ? Spolu s návodom na inštaláciu SSL certifikátu sa to dozviete v našom najnovšom článku.