Viete, ako optimalizovať obrázky pre web?

To, že kvalitné obrázky na webe sú dôežité vieme z vlastnej skúsenosti asi všetci. Jedlo, ktoré na obrázku nevyzerá vábne si neobjednáme, blog s rozrastrovanými alebo od veci obrázkami rovno preskočíme. Aj napriek tomu veľa podnikateľov používa obrázky odfotené telefónom so slabším fotoaparátom alebo zvolí opozeraný obrázok z fotobanky.  Výberom obrázku to však nekončí. Prečítajte si niekoľko tipov, ako správne optimalizovať obrázky pre web.

Základné požiadavky pre obrázok na webe

Na obrázok by ste mali mať v prvom rade právo, inak vám hrozí dopis od právnika poškodenej strany. Používajte preto svoje vlastné obrázky, fotografie nafotené profesionálom pre vašu spločnosť, obrázky nakúpené z fotobánk alebo fotografie s licenciou CC0, resp. Public domain. Aby ste si boli absolútne istí, že používate fotografie s právami na komerčné používanie, uistite sa, že:

• s fotografom uzatvoríte obchodnú zmluvu, vďaka ktorej všetky práva na fotografie prechádzajú k vám,
• máte zakúpené fotografie z fotobanky s príslušnou licenciou (ak chcete, aby boli napríklad súčasťou WordPress tém, ktoré predávate ďalej, potrebujete rozšírenú licenciu)
• ak sťahujete obrázky z fotobánk zadarmo, viete určit pôvod fotografie, teda nejde o fotografiu pôvodné stiahnutú z platenej fotobanky a nahranú pod falošným autorom (sťahujte radšej fotografie z fotobánk, kde je úzky výber originálnych autorov, alebo ide databázu fotografií zriadenú inak platenou fotobankou).

Ak nie ste skúseným fotografom, radšej zverte túto prácu do rúk odborníkom. Táto investícia sa vám celkom určite vráti. Fotografie by mali byť kvalitné, dobre nasvietené a následne upravené.

Akým typom obrázkov sa radšej vyhnúť?

To, že by mali obrázky zapadať do obsahu blogu vám snáď ani netreba pripomínať. Podľa možností sa vyhnite týmto typom obrázkov:

• obrázok je klišé, nesúvisí s textom a videli sme ho už na milióne ďalších webov,
• obrázok je rozrastrovaný alebo rozmazaný,
• obrázok je zle nasvietený a celkovo ide o amatérsku a nekvalitnú fotografiu,
• ide o pohyblivé gif, tie sú síce populárne ale odvádzajú pozornosť od textu, vyrušujú čitateľa a najmä majú minimálnu výpovednú hodnotu.

Ako vybrať správny formát obrázku?

Asi ste si všimli, že existuje niekoľko formátov obrázkov. Aby sme vám to uľahčili, tu sú najčastejšie tipy aj s vysvetlením, kedy sa hodia a kedy naopak nie:

• jpeg sú aktuálne najpoužívanejšími formátmi obrázkov na webe, ponúkajú dobrú kvalitu s nižšou veľkosťou, výborný kompromis, najmä čo sa týka ecommerce webových stránok.
• png ponúkajú vyššiu kvalitu, no sú zároveň väčšie. Formát png sa odporúča pre sociálne médiá. Napríklad Facebook dokáže poškodiť jpg obrázok, no png obrázok si zachová kvalitu aj po komprimovaní Facebookom.
• gif podporujú animácie alebo sa hodia na ikony či malé grafiky s minimom farieb, určite ich nepoužívajte pre fotografie alebo komplikovanejšie obrázky, zaberú zbytočne veľa miesta a navyše nedosahujú kvalitu jpeg a png.

Veľké obrázky spomaľujú váš web

Pred nahraním nezabudnite váš obrázok zmenšiť, nestačí upraviť rozmery pre zobrazenie vo WordPresse alebo inom CMS. Veľkosť v kb alebo dokonca Mb totiž zvyčajne zostane rovnaká. Mali by ste dodržať pomer kvalita a čo najnižšia veľkosť. Ak má jeden obrázok okolo 100 kb je to v poriadku, no ak má okolo 0,5 Mb a viac, spomaľuje to váš web a má to vplyv aj na vaše umiestnenie vo výsledkoch vyhľadávačov. Aj Google vo svojom algoritme zohľadňuje rýchlosť, akou sa načítavajú vaše stránky.

Obrázok môžete zmenšiť cez sofvér ako IrfanView, ktorý je zadarmo, Photoshop s možnosťou uloženia obrázku pre web a na Macoch cez Preview. Ak máte aj napriek tomu obrázok v kb celkom veľký, môžete vyskúšať niektorú z online online služieb na komprimovanie, ako napríklad tinyjpg alebo tinypng. Ideálne riešenie to síce nie je, ale obrázky vám zmenšia pokiaľ sa bude dať a udrží sa kvalita.

Aj názov obrázku je dôležitý

Veľmi málo blogerov, podnikateľov a dokonca aj marketingových agentúr premenuje obrázok pred tým, než ho nahrá. Pavúky Google ešte stále nedokážu čítať obrázky, preto im potrebujeme pomôcť. Čo sa dozvedia z obrázku, ktorý sa volá IMG82801.jpg? Nič. A čo im povie detsky-domcek-zahrada.jpg? No, asi sa dozvedia o čosi viac. Tento názov obrázku Google prečíta ako detsky domcek zahrada. Keby použijeme podčiarkovníky, teda detsky_domcek_zahrada.jpg, Google ho prečíta ako detskydomcekzahrada, čo je zasa o kus menej zrozumiteľné.

Pri názve obrázku sa teda usilujte o to, aby obsahoval kľúčové slová a pomlčky, a tiež, aby bol bez diakritiky, veľkých písmen, podčiarkovníkov a kadejakých zvláštnych znakov.

Na čo je dobrý alt text?

Pri vkladaní obrázku je vhodné zadať aj alt text hneď z niekoľkých dôvodov, a to ako dodatočná informácia pre pavúky vyhľadávačov, ako informácia pre nevidiacích ľudí, ktorý prechádajú váš web a zobrazí sa aj pri pomalšom internetovom pripojení, ak sa kompletne nenačíta. Pri tvorbe alt textu skúste zatvoriť oči a poproste niekoho nech vám ho prečíta. Viete si predstaviť, čo je na obrázku? Super! Samozrejme, nemali by ste ho prepchávať kľúčovými slovami. Skutočne stačí byť stručný a v niekoľkých slovách opísať, čo sa na obrázku nachádza.

Popis obrázku pomôže čitateľom pri orientácii v texte

Vedeli ste, že len 20 % návštevníkov vášho blogu prečíta text? Ostatní ho len preletia očami a maximálne si prečítajú časť, ktorá je pre nich relevantná. Väčšinou očami skenujú nadpisy, pozrú si obrázky a prečítajú si popipisok pod obrázkom. Ignoráciou popisou teda prichádza o šancu zaujať čitateľa, aby pri vašom článku strávil o čosi viac času a možno si pozrel aj ďalšie.

Zhrnutie

Pri optimalizovaní obrázkov si prejdite tento checklist:

• obrázok sa hodí k obsahu, je kvalitný a nie je to klišé,
• máte právo používať obrázok pre komerčné účely,
• vybrali ste správny formát obrázku (pre web je najvhodnejší jpeg),
• obrázok má upravené rozmery a veľkosť v kb sa pohybuje okolo 100 kb a menej,
• názov súboru obsahuje kľúčové slová a je napísaný cez pomlčky,
• obrázok má zadaný alt text,
• obrázok má popis.