Jak připravit obrázky pro web?

Každý web potřebuje obrázky. Lidé v prvních okamžicích vnímají hlavně vizuální prvky a proto je to velmi důležité téma. Obrázky dělají image vašeho webu a důležitý prvek, který vám pomůže zákazníka zaujmout a udržet ho na svém webu. Obrázek udrží pozornost a motivuje k prvnímu kroku - aby začal číst a vnímat váš obsah.

 Zcela jinak na se na to ale dívá Google a další vyhledávače. Je zajímají hlavně tyto věci

  • Jak velký je ten obrázek - jinými slovy jak dlouho se načítá
  • Co je na obrázku vyobrazeno a zda to souvisí s tím co uživatel hledá

My tedy musíme zajistit nejen atraktivitu pro vaše návštěvníky webu, ale také, aby byly obrázky čitelné a vyhovující vyhledávačům. Nezapomeňte také, že obrázky němůžet jen tak stáhnout kdekoli.

Jak zmenšit velikost obrázku?

Když říkám velikost obrázku, tak nemám na mysli jakou plochu pokrývá na obrazovce, ale jak velký je to soubor. Velikost souboru obrázku na webu by měly být ideálně méně než 100 Kb.

2 hlavní parametry, které určují velikost obrázku

Komprese obrázků a formát.

Doporučujeme používat dva formáty obrázků a to jsou:

  1. Obrázky ve formátu .jpg

Tento typ obrázků má ideální předpoklady ke kompresi. To znamená, že při zachování kvality obrázku dokážete soubor zmenšit na minimum.

  1. Obrázky ve formátu .png

Tyto obrázky mají hlavní výhodu, že umí využívat transparentní pozadí. Pokud tedy potřebujete někdo použít například logo nebo nějaký grafický prvek, který má průhledné pozadí, pak to bude zpravidla .png (případně .svg)

Rozměr obrázků

Rozměr se udává v pixelech a asi nemá smysl mít na webu obrázky, které mají větší rozměr než je například maximální šířka všeho webu. Tam kde potřebujete pouze malý obrázek k dokreslení či jako designový prvek, pak je dobré přizpůsobit i jeho velikost.

Určit ale používejte responzivní přístup k zobrazení obrázku. Jednoduchá cesta je, že obrázku rozměr určíte v procentech. Chcete-li aby obrázek byl v textu, tak mu dejte například šířku 50% a zarovnání třeba vlevo. Takto nastavený rozměr pak bude zohledňovat velikost monitoru nebo mobilního zařízení a přizpůsobí se na polovinu obrazovky.

 

Jak na to? Jak změnit velikost a rozměr obrázků?

 Jsou tu samozřejmě různé aplikace jako Photoshop, Gimp Picasa a jistě spousta dalších. Ty však vyžadují nějaký čas a dovednosti. 

 Doporučuji jednoduchý online nástroj - Online Image Tool

online image tool Online Image Tool

Online Image Tool | nástroj na změnu velikosti obrázku

 Adresa nástroje: https://www.onlineimagetool.com/cs/
Je to opravdu jednoduchý nástroj, díky kterému upravíte velikost vašich obrázků bez nutnosti se učit s grafickým programem a nemusíte pátrat po nastaveních.

Můžete zde obrázky převést na jiný formát, komprimovat, oříznout nebo otočit. 

Nezapomínejte vzkázat vyhledávači co je na obrázku

To že máte na webu obrázky je skvělé, dobře to vypadá, ale je potřeba myslet i na to, aby se Google dověděl co na obrázku je. To zajistíte velmi jednoduše doplněním popisu obrázku. Je to tzv. ALT obrázku (Alternate Text). Popis obrázku, který ve většině redakčních systémů jako jsou například Joomla nebo WordPress, při vkládání nabízí jako “Popis obrázku, Titulek, Alternate Text” (označení záleží na editoru, který váš web používá). 

Obrázek s ALT popisem pomáhá SEO

Pokud chcete něco udělat pro SEO svých stránek, tak pište popisy svých obrázků a používejte klíčová slova, která se dané stránky týkají. 

Tak například obrázek, který vidíte na této stránce, zobrazující jak Online Image Tool vypadá, má popis “Online Image Tool | nástroj na změnu velikosti obrázku” a vyhledávači je tak jasné že je to relevantní obrázek k tématu.

 Využívejte obrázky chytře a oživte tak nejen design webu, ale zlepšete svoje šance ve vyhledávačích.

Grafické práce 

Pokud byste potřebovali pomoc s grafickými prvka vašeho webu, nebo i mimo online svět. Neváhejte se na nás obrátit. Grafika nás baví a rádi pro vás připravíme bannery, logo, letáky vizitky, nebo jiný grafický návrh.

Napište nám, rádi odpovíme nebo se Vám ozveme, abychom vše prodiskutovali.