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

‍

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.