Optimalizace obrázků není dekorace. Jde o strukturu. Když berete optimalizaci obrázků pro web jako obchodní dovednost, méně draze hádáte a vytváříte stránky, které lidi vedou k akci.
Optimalizace obrázků pro web zmenšuje velikost souboru při zachování přijatelné vizuální kvality. Tato kapitola srozumitelně vysvětluje, co to znamená, proč to ovlivňuje váš web i marketing a jak to uplatnit, aniž byste se ztratili v odborných výrazech. Uvidíte také, jak do stejného obrazu zapadá SEO obrázků. Projděme si to krok za krokem.
Co optimalizace obrázků pro web znamená v praxi
Optimalizace obrázků pro web zmenšuje velikost souboru při zachování přijatelné vizuální kvality.
Těžké obrázky patří k hlavním příčinám pomalých stránek na mobilu.
Typy souborů a rozměry obrázků by měly odpovídat velikosti zobrazení, ne rozlišení fotoaparátu.
Jak optimalizaci obrázků pro web uplatnit na svém webu
Obrázky před nahráním do CMS zmenšete na maximální šířku, ve které se zobrazí.
Začněte jednou stránkou, třeba úvodní nebo hlavní vstupní stránkou (landing page). Nejdřív opravte největší problém a stejný postup pak přeneste na další šablony.
Tuto kapitolu spojte s obrázky na webu jako základem a s obrázky na pozadí webu jako dalším krokem v tomto modulu.
Praktický kontrolní seznam na dnešek
Obrázky před nahráním do CMS zmenšete na maximální šířku, ve které se zobrazí.
Když procházíte jakoukoli stránku, ptejte se, zda je optimalizace obrázků na mobilu znát hned při prvním posunu. Pokud ne, přeskupte sekce dřív, než začnete ladit detaily.
Uložte si snímky obrazovky před změnami a po nich, abyste poznali, co na vašem webu skutečně pohnulo výsledky u optimalizace obrázků pro web.
Sdílejte tento kontrolní seznam s každým, kdo váš web upravuje, aby SEO obrázků zůstalo jednotné i na nových stránkách.
Vyberte si jedno číslo, které budete tento měsíc sledovat, například čas na stránce nebo zahájená vyplnění formuláře. Změny designu pak svážete s výsledky podnikání, a ne jen s vkusem.
Jak toto téma souvisí s celou vaší značkou
Vizuální rozhodnutí málokdy platí jen pro jednu stránku. Typy souborů a rozměry obrázků by měly odpovídat velikosti zobrazení, ne rozlišení fotoaparátu.
Vaše příspěvky na sociálních sítích, e-maily i tištěné materiály by měly opakovat stejnou hierarchii, barvy a pravidla písma jako váš web.
Když se vizuální podoba značky rozchází, zákazníci cítí nenápadný nesoulad, i když nedokážou říct proč.
Použijte obrázky na pozadí webu a porovnejte poznatky s příbuznou kapitolou v tomto modulu.
Těžké obrázky patří k hlavním příčinám pomalých stránek na mobilu.
Časté otázky, které lidé přehlížejí
Vedlejší pojmy jako SEO obrázků a typy obrazových souborů vám pomohou najít hlubší příklady a porovnat svou práci s běžnými standardy.
Typy souborů a rozměry obrázků by měly odpovídat velikosti zobrazení, ne rozlišení fotoaparátu.
Zapište si jednu změnu před a po, kterou tento týden otestujete na živé stránce. Malé změřené úpravy porazí vágní plány.
Když váš tým používá společnou slovní zásobu o optimalizaci obrázků pro web, ubude kol úprav s designéry a agenturami.
Nástroje, které usnadní vizuální úpravy
K řadě úprav rozvržení a stylu nepotřebujete vlastní kód. Vizuální editor vám umožní upravit mezery, barvy a písmo a přitom si prohlížet náhled pro mobil i počítač.
WEMASY obsahuje Tvůrce webů s vizuální úpravou, takže změny zveřejníte, aniž byste u každé drobnosti čekali na vývojáře. Až budete chtít využít, co jste se naučili, otevřete Tvůrce webů.
Až změny zveřejníte, znovu si projděte obrázky na webu a fotografii s negativním prostorem, ať si celý modul drží pohromadě.
Teď máte k optimalizaci obrázků pro web funkční optiku. Použijte ji, když kontrolujete web, schvalujete marketingové podklady nebo zadáváte práci designérovi. Pokračujte kapitolami fotografie s negativním prostorem a obrázky na pozadí webu, ať v tomto modulu neztratíte tempo.
Často kladené otázky
Jak dlouho trvá optimalizovat obrázky na webu?
Většina malých firem uvidí jasnější stránky během několika soustředěných sezení, jakmile uplatní základy z této kapitoly. Začněte úvodní stránkou a stejná pravidla pak přeneste na stránky služeb a kontaktů.
Potřebujete designéra pro optimalizaci obrázků pro web?
Designér pomůže u složitých rebrandingů, ale řadu úprav kolem optimalizace obrázků zvládnete sami, jakmile víte, na co se dívat. Pro související rady použijte vedle této kapitoly obrázky na webu.
Může vám WEMASY pomoci s optimalizací obrázků na vašem webu?
WEMASY obsahuje v Tvůrci webů vizuální editor, takže rozvržení, barvy a písmo upravíte bez kódu. Otevřete Tvůrce webů, upravte šablony a zkontrolujte změny na mobilu.
Jaká je nejčastější chyba při optimalizaci obrázků pro web?
Lidé se snaží opravit všechno najednou místo jedné stránky po druhé. Vyberte si jednu prioritu, například čitelnost nebo kontrast, a pak se podívejte na fotografii s negativním prostorem pro další zlepšení.
Jak souvisí optimalizace obrázků pro web s SEO?
Jasná vizuální hierarchie a čitelné písmo udrží návštěvníky na stránce déle, což podporuje signály zapojení, které vyhledávače sledují. Nejlepších výsledků dosáhnete, když úpravy designu spojíte s dobrou strukturou obsahu.
Co se učit dál po optimalizaci obrázků pro web?
Pokračujte kapitolami obrázky na webu a fotografie s negativním prostorem v této knize, abyste pro svou značku online vybudovali ucelený vizuální systém.