Optimalizace obrázků na webu

Internetové vyhledávače jako je Google nebo Seznam řadí weby do výsledků mimo jiné podle toho, jak dobře mají optimalizované obrázky.

Pokud máme příliš velkou datovou velikost obrázků na našem webu, můžeme ji zmenšit a zlepšit tak výkon našeho webu. Obtíž je v tom, že snižování datové velikosti obrázku snižuje jeho kvalitu. Pokud to přeženeme, tak můžeme návštěvníky našich webových stránek odradit.

Optimalizace datové velikosti není jediný faktor, který internetové vyhledávače hodnotí. Pro každý obrázek je charakteristický název souboru obrázku a HTML atribut ALT. Pojďme se podívat, jaké jsou postupy pro optimalizaci obrázků na maximální výkon.

Pojmenujme soubory obrázků relevantně

Vytvoření popisných názvů souborů bohatých na klíčová slova je podstatné pro optimalizaci obrázků. Internetové vyhledávače hodnotí nejen text na našem webu, ale také názvy souborů. Proto je důležité v názvech souborů použít relevantní klíčová slova, která pomohou naší webové stránce umístit se v internetových vyhledávačích.

Optimalizujme u obrázků atribut ALT

Atributy ATL jsou textovou alternativou k obrázkům. Atribut ALT se zobrazuje, když prohlížeč neumí obrázek zobrazit. I když je obrázek zobrazen správně, tak pokud nad něj umístíme kurzor myši, zobrazí se text atributu ALT nebo text atributu TITLE.

Přidání vhodných atributů ALT, které obsahují relevantní klíčová slova, do HTML značek obrázků na našem webu nám pomůže lépe se umístit v internetových vyhledávačích. Použití atributů ALT je vhodným způsobem, jak zajistit, aby se produkty našeho e-shopu zobrazily ve výsledcích vyhledávání obrázků.

Pro použití atributů ALT v HTML značkách obrázků jsou tyto pokyny:

• Popišme naše obrázky v jasném jazyce podobně, jako jsme to udělali v názvech souborů.

• Pokud prodáváme produkty, které mají čísla modelů nebo sériová čísla, použijme je v atributech ALT.

• Každý atribut ALT nechť je unikátní.

• Nepoužívejme atributy ALT pro dekorativní obrázky.

Snižme datovou velikost souborů obrázků

Asi 50% návštěvníků není ochotno čekat více než 3 sekundy, než se web načte. Proto dbejme na dobu trvání načítání, aby byla co nejkratší. Internetové vyhledávače měří dobu trvání načítání pro sestavování pořadí webů ve výsledcích.

Jakmile návštěvník dorazí na náš web, tak si přeje hned s ním pracovat. Nepřeje si být zdržován zdlouhavým načítáním. Zařiďme, aby se náš web co nejrycheji načítal! Jednou z účinných cest je zmenšit velikosti souborů obrázků na minimum. Při zmenšování dbejme na to, aby obrázky udržely rozumnou grafickou kvalitu.

Opatření, které se ukazuje jako nevhodné, je takzvaný lazy load, který načítá obrázek až tehdy, když návštěvník posune okno internetového prohlížeče do části stránky, kde se tento obrázek nachází. A to proto, že to návštěvníka dodatečně zdržuje.

Zařiďme, aby se všechny naše obrázky načetly najednou a to do 3 sekund od zahájení náčítání stránky.

Použijme správný souborový formát

Existují 3 běžné formáty, které se v praxi webu využívají. Jsou to JPEG (souborová přípona .jpg), GIF (souborová přípona .gif) a PNG (souborová přípona .png).

Formát JPEG se stal standardem, který už dlouhá léta funguje na webu. Obrázkům formátu JPEG můžeme zmenšovat datovou velikost souboru přičemž dochází k relativně malé ztrátě grafické kvality.

Formát GIF mívá menší grafickou kvalitu oproti formátu JPEG. Proto se používá pro jednodušší a menší obrázky, než se používá JPEG. Výhodou formátu GIF je, že podporuje animace.

Formát PNG se stal populární náhradou za formát GIF. Výhodou formátu PNG je dobré řešení průhlednosti pozadí obrázku.

Používejme souborový formát SVG

Formát obrázku SVG je vektorový formát, který funguje dobře pro loga, ikony, texty a jednoduché obrázky. Obrázky ve formátu SVG mohou mít až o 95% menší datovou velikost souboru oproti datové velikosti souboru stejného obrázku ve formátu JPEG. Internetové vyhledávače umí přečíst texty, které jsou napsány v obrázcích formátu SVG.

Firma DigiDay Creative – tvorba webu pro vás provede optimalizaci obrázků na vašem webu. Kontaktujte nás.