Je statisticky dokázáno, že obrázek zaujme víc než slova. Dalo by se klidně říct, že obrázek mluví za všechno a hodně o textu, který ho doprovází, prozradí. Proto si na nich dejte záležet a věnujte se i jejich optimalizaci.
A to zvládnete klidně i sami. Nepotřebujete absolvovat žádný kurz ani utrácet tisíce korun za poradenství či za to, že si na optimalizaci budete platit nějakého specialistu. Existuje pár osvědčených rad, díky nimž zvládnete optimalizaci obrázků i vy a za pár minut.
Proč optimalizovat?
Optimalizace obrázků má hned dva významy. Za prvé je nutné fotky zmenšit tak, aby zbytečně nezabíraly místo na webu či e-shopu a aby se vám stránky rychleji načítaly. Za druhé je musíte upravit z hlediska SEO. Právě SEO napomáhá tomu, aby byly vaše stránky snadno dohledatelné ve všech vyhledávačích. Optimalizované obrázky rovněž pomáhají vyhledávačům rozeznat kontext vaší stránky. V neposlední řadě – a možná to ještě nevíte – je druhým nejčastějším způsobem v Google prohlížeči vyhledávání právě pomocí obrázků. Tento způsob vyhledávání tvoří třicet procent všech způsobů vyhledávání.
Jaké jsou správné rozměry obrázku?
To je velmi zapeklitá otázka, ovšem jedno pravidlo je jasně dané – na web nepotřebujete dávat obrázky v tiskové kvalitě. To je naprosto zbytečné. Někdy se vám ovšem na stránkách zobrazuje obrázek o rozměrech 400 x 250 px, přičemž jeho skutečná velikost je desetinásobná. Proto si pamatujte, že obrázek se zobrazuje v malé velikosti, ale při načítání stránky se načítá celý zdrojový soubor. Proto vždycky nahrávejte obrázky jen v takové velikosti, v níž se budou i načítat.
Velikost obrázku
Ideální velikost obrázku pro web činí okolo 100 kB. Někdy ovšem při zmenšování může dojít ke ztrátě jeho kvality. Jak tomu zabránit?
Používáte-li pro úpravu fotografií a jiných obrázků Photoshop, můžete si je jednoduše exportovat pro web. V dalším kroku si pak nastavíte požadovanou kvalitu.
Pokud ale Photoshop ani jiný nástroj na úpravu fotek nemáte, pak přejděte na stránku Tiny JPG či Tiny PNG a nahrajte do okýnka umístěného nahoře uprostřed vybraný obrázek. Tak se vám zmenší, ale kvalita obrázku zůstane zachována.
Při kompresi obrázků dochází buď k:
- ke ztrátové kompresi (lossy) – obrázek se zmenšuje, ale klesá i jeho kvalita, až nakonec může být obrázek zcela rozpixelovaný
- k bezdrátové kompresi (lossless) – obrázek se zmenšuje, avšak kvalita zůstává zachována; při této metodě jsou odstraňována metadata z obrázku; zmenšení obrázku není tak patrné jako v případě první metody
Typy obrázků
Rovněž je důležitou otázkou, jestli zvolit mezi rastrem nebo vektorem.
Vektorové obrázky tvoří křivky a jakmile si je přiblížíte, jsou stejně ostré jako z dálky. Vektory obsahují matematický vzorec, díky kterému obrázek zůstává neměnný. Oceníte je zejména při publikaci loga, geometrických tvarů či jiných grafických prvků.
Oproti tomu rastrové obrázky tvoří jednotlivé body neboli pixely, to znamená, že pokud si takový obrázek zvětšíte, rozpadne se vám na body, pixely.
Zároveň ovšem můžete publikovat obrázky ve formátech (s příponou):
- jpg – nejrozšířenější formát obrázků na internetu; i při malé velikosti souboru si zachovává své barvy
- png – druhý nejrozšířenější formát; v rámci lossless kompresi neztrácí žádné detaily, zároveň je ovšem větší
- gif – předchůdce formátu png; umožňuje vytváření pohyblivých obrázků s nízkou velikostí; hodí se především pro jednoduché obrázky
Méně známé formáty obrázků jsou:
- svg – jde o vektorový formát, který se hodí na grafické prvky, obrazce a další soubory vytvořené například v Adobe Illustrator
- webP – nelze ho zobrazit ve všech vyhledávačích; hodí se k lossless i k lossi kompresi
Optimalizace obrázků z pohledu SEO
Optimalizovat obrázky z hlediska SEO musíte ještě předtím, než je publikujete na svém e-shopu nebo blogu. Existuje několik jednoduchých zásad, kterých byste se měli držet.
Název obrázku
Nikdy nepublikujeme obrázky s původním názvem, který obsahuje velká písmena a čísla. Vždy proto do názvu používejte vhodná klíčová slova, která obrázek (to, co na něm je) vystihují.
Když se obrázek nenačítá
Někdy se může stát, že vám prohlížeč obrázek na webových stránkách nenačte. Pomineme-li to, že za to mohou technické problémy, může být na vině taktéž samotný obrázek, který je ze strany prohlížeče blokován, či je používán režim čtení, při němž se obrázky nezobrazují. Místo obrázku tak může být uveden pouze takzvaný alternativní text (alt text). Do alt textu vepište příslušná klíčová slova. Používáte-li například WordPress, alt text není zapotřebí vyplňovat přímo v kódu, ale vyplníte popisek obrázku při jeho nahrávání do systému.
Správný výběr obrázků
V žádném případě nemůžete na svůj web umisťovat obrázky, které nijak nesouvisí s vaším webem. Vždycky a za každých okolností myslete na to, aby obrázek korespondoval se zaměřením vašeho webu či e-shopu, s textem, ke kterému náleží a zároveň aby s ním souvisela i klíčová slova v popisku obrázku.
Někdy je méně více
Obrázky sice dokážou hezky rozbít, rozčlenit text a zaujmout čtenáře, ale když je jich ve výsledku moc a ještě nejsou optimalizované, nebude vám to nic platné. Váš webový portál nebo e-shop bude prohlížečem diskriminován a uživatelům internetu se nebude zobrazovat.
Samozřejmě můžete místo obrázků publikovat i videa, ale platí pro ně obdobná pravidla. Popisek musí být vždycky optimalizovaný.
Také si nezapomeňte pravidelně kontrolovat, jestli se všechny obrázky načítají tak, jak mají, a případné chyby co nejdříve napravte.
