Vezměte jakýkoli web, který vás ztratil během prvních pár vteřin, a vraťte se na jeho začátek. S velkou pravděpodobností s tím měly něco společného obrázky. Stockové foto usmívajících se cizích lidí, kteří vůbec nevypadají jako lidé, jimž firma skutečně slouží. Hlavní obrázek tak vágní, že by mohl patřit jakékoli firmě v jakémkoli oboru. Nebo žádné obrázky vůbec, takže stránka působí holě a nedokončeně. Obrázky na webu nejsou dekorace. Jsou to sdělení. Tento článek popisuje, co obrázky na webu skutečně dělají, jak vybrat ty správné, kam na každé stránce patří a co se stane, když to uděláte špatně.
Návštěvníci zpracovávají obrázky rychleji než slova. Dřív než někdo přečte váš nadpis, jeho mozek si už z vizuálu vytvořil první dojem. To znamená, že vaše obrázky vedou argument o vaší firmě dřív, než k tomu dojdete vy sami. Otázka je, zda je to argument, který chcete vést.
Co obrázky na webu vlastně dělají?
Každý obrázek na vašem webu něco říká návštěvníkovi. Hlavní obrázek na úvodní stránce říká „takovou firmou jsme a pro tyto lidi tu jsme“. Fotka na stránce O nás říká „jsou tu skuteční lidé“. Snímek produktu na stránce služby říká „tohle dostanete, když s námi budete spolupracovat“.
Když jsou tyto signály jasné a relevantní, návštěvníci se cítí zorientovaní. Když jsou vágní nebo obecné, návštěvníci necítí nic, což je nejhorší výsledek. Návštěvník, který nic necítí, nemá důvod číst dál.
Obrázky také vedou, kam jde oko. To je jádro vizuální hierarchie na stránce. Dobře umístěný obrázek přitahuje pozornost k sekci, na které záleží. Špatně umístěný pozornost tříští a návštěvník neví, kam se podívat dál. Každý obrázek by si měl své místo zasloužit tím, že pomáhá návštěvníkovi pohybovat se správným směrem.
Skutečné fotky, nebo stockové fotky: záleží na tom?
Ano. Víc, než většina lidí čeká.
Návštěvníci poznají stockové fotky lépe než před pěti lety. Dokonale nasvícená zasedačka se čtyřmi etnicky různorodými profesionály, kteří přikyvují nad notebookem. Podání ruky na pozadí panoramatu města. Usmívající se žena s hrnkem kávy. Tyto obrázky jsou tak běžné, že si návštěvníci vytvořili jakousi vizuální imunitu. Vidí je a nezaregistrují nic.
Skutečné fotky dělají opak. Fotka vašeho skutečného obchodu, vašeho skutečného týmu, vaší skutečné hotové práce. Tyto obrázky jsou specifické pro vás a jen pro vás. Návštěvník, který je vidí, dostává důkaz, že za webem stojí skutečná firma, což je jedna z nejcennějších věcí, které může obrázek sdělit. I fotka z telefonu pořízená při dobrém světle bývá často účinnější než vyleštěný stockový snímek, protože je skutečná.
Stockové fotografie ale mají své místo. Pro články na blogu, pro ilustraci abstraktních pojmů a pro vyplnění vedlejších obrazových pozic, kde konkrétnost tolik nezáleží, dobře vybraná stocková fotka splní svůj úkol. Pravidlo zní: skutečné fotky používejte tam, kde jde o důvěru, a stockové tam, kde obrázek jen podporuje obsah a netvrdí nic o vaší firmě.
Jak vybrat správný obrázek pro každou stránku?
Než začnete obrázek hledat, zeptejte se, jakou práci má na dané konkrétní stránce odvést.
Na vaší úvodní stránce musí hlavní obrázek sdělit, co děláte a pro koho, dřív, než kdokoli přečte slovo. Pokud by se návštěvník mohl podívat jen na váš hlavní obrázek a vůbec netušit, v jakém oboru působíte, obrázek svou práci neodvádí.
Na vaší stránce O nás musí být obrázek osobní. Ukažte lidi. Ukažte prostor. Ukažte něco, co firmu činí lidskou a konkrétní, ne korporátní a anonymní.
Na stránce služby nebo produktu ukažte výsledek. Před a po pro rekonstrukční firmu. Snímek obrazovky administrace pro softwarový nástroj. Fotka hotového jídla pro cateringovou firmu. Obrázky výsledku jsou přesvědčivější než obrázky postupu, protože odpovídají na otázku, kterou se návštěvník skutečně ptá: co budu mít, až to bude hotové?
Až budete vědět, jakou práci má obrázek odvést, teprve pak ho hledejte. Ne naopak.
Co způsobí, že obrázek pracuje proti vám?
Nerelevantnost
Obrázek, který nemá nic konkrétního říct o vaší firmě, vaší službě ani vašem klientovi, říká návštěvníkovi, že nad vizuálním zážitkem z webu nikdo pořádně nepřemýšlel. Tento dojem zůstává.
Nesoulad
Pokud je váš text vřelý a konverzační, ale obrázky jsou chladné a korporátní, stránka působí nejednotně. Návštěvníci si tohoto nesouladu všimnou, i když ho neumějí pojmenovat. Nálada obrázků a nálada textu se musí shodovat.
Pomalé načítání
Velké nekomprimované obrázky jsou nejčastějším důvodem, proč se weby načítají pomalu. Stránka, která se na telefonu načítá déle než tři vteřiny, ztratí podstatnou část návštěvníků dřív, než se cokoli zobrazí. Každý obrázek, který nahrajete, by měl být pro web zkomprimovaný. Většina platforem pro weby část toho řeší automaticky, ale stojí za to vědět, co nahráváte. Úplný obraz o tom, jak rychlost webu ovlivňuje návštěvníky a pozice ve vyhledávání, najdete v samostatném článku.
Chybějící alternativní text
Každý obrázek na vašem webu potřebuje krátký popis toho, co zobrazuje, napsaný do pole alternativního textu (alt text). Má to dva důvody. Návštěvníci, kteří používají čtečky obrazovky, se na alt text spoléhají, aby pochopili, co obrázek obsahuje. Vyhledávače používají alt text k indexaci obrázků. Vynechání je rychlý způsob, jak přijít o body za přístupnost i o hodnotu pro SEO.
Kde by se obrázky na stránkách měly objevovat?
Univerzální pravidlo pro umístění obrázků neexistuje, ale je několik vzorců, které soustavně fungují.
Nejsilnější obrázek dejte tam, kam se návštěvníci dívají jako první. Na většině stránek je to horní část, nad ohybem. Pokud návštěvník roluje dolů dřív, než se rozhodne číst, druhé obrazové místo někde uprostřed stránky ho zachytí při rolování. Třetí obrázek poblíž konce dlouhé stránky znovu zaujme návštěvníky, kteří přečetli většinu cesty.
Obrázky používejte k rozdělení dlouhých úseků textu, ale jen když obrázek něco přidává. Obrázek, který ilustruje myšlenku z vedlejšího odstavce, odvádí práci. Obrázek umístěný tam jen proto, že sekce připadala příliš dlouhá, je vycpávka a návštěvníci to poznají.
Na mobilu se umístění obrázků mění, protože obrazovka je úzká a obrázky se řadí pod sebe. Obrázek, který je na počítači vedle textu, se na mobilu objeví nad ním nebo pod ním. Vyzkoušejte, jak každá stránka vypadá na telefonu, a ujistěte se, že obrázek dává smysl i na novém místě. Je to součást toho, aby váš web na každé stránce dodržoval zásady responzivního designu.
Jaký formát souboru mají obrázky mít?
Stručná verze:
- JPEG pro fotografie. Malá velikost souboru, vysoká kvalita, funguje všude.
- PNG pro loga, ikony a vše s průhledným pozadím nebo ostrým textem.
- WebP pro obojí, pokud to vaše platforma podporuje. Vytváří menší soubory než JPEG a PNG při stejné úrovni kvality. Většina moderních prohlížečů WebP zvládá bez problémů.
- SVG pro ikony a jednoduché ilustrace. Dokonale se škáluje na jakoukoli velikost při miniaturních velikostech souborů.
U velikosti souborů cílete na méně než 200 kilobajtů pro běžné obrázky na stránce. Hlavní obrázky mohou mít až zhruba 400 kilobajtů. Cokoli většího je třeba před nahráním zkomprimovat. Pětimegabajtová fotka z telefonu na webovou stránku nepatří.
Co je alternativní text a proč ho potřebuje každý obrázek?
Alternativní text je krátký psaný popis připojený k obrázku. Je v značce obrázku na stránce, pro vidoucí návštěvníky neviditelný, ale čtený čtečkami obrazovky a vyhledávači. Oba ho potřebují, aby pochopili, co vaše obrázky obsahují.
Pro přístupnost je alt text způsob, jakým návštěvníci používající čtečky obrazovky vnímají obrázky na vašem webu. Bez něj tito návštěvníci při načtení obrázku neuslyší nic, což zanechává mezeru v tom, co jste chtěli sdělit. Pro SEO platí, že vyhledávače nevidí obrázky tak jako lidé. Alt text je způsob, jak chápou, co obrázek zobrazuje a zda je relevantní pro stránku, kterou podporuje.
Dobře napsat alt text znamená popsat, co skutečně na obrázku je, konkrétně a prostě. Fotka dokončené rekonstrukce kuchyně dostane alt text jako „bílá kuchyň se shakerovými dvířky a mramorovými deskami po rekonstrukci“, a ne „foto kuchyně“ nebo „obrázek1“. Pokud se vaše klíčové slovo do popisu přirozeně hodí, uveďte ho. Ale pište nejdřív popis. Alt text, který existuje jen proto, aby opakoval klíčová slova, selže v obou účelech.
Každý obrázek, který nahrajete, by měl mít alt text napsaný dřív, než stránka půjde do provozu. Zabere to méně než minutu na obrázek a ovlivňuje to jak to, kdo má k vašemu obsahu přístup, tak to, jak se vaše stránky umisťují.
Jak WEMASY řeší obrázky
Tvůrce webů WEMASY obsahuje bloky obrázků, které můžete přidat do jakékoli sekce stránky. Nahráváte přímo v tvůrci, umísťujete a měníte velikost bez kódu a alt text přidáte ve stejném kroku. Obrázky se automaticky servírují responzivně, takže se přizpůsobí každé velikosti obrazovky a nemusíte vytvářet samostatné verze pro počítač a mobil.
Sekce stránek ve WEMASY podporují obrázky vedle textu v pružných sloupcových rozvrženích nebo jako pozadí na celou šířku pro sekce, kde silný vizuál nastavuje tón. V obou případech zůstává obrázek spojený s obsahem, který podporuje, a nevisí volně mimo rozvržení.
Co všechno je součástí, uvidíte na stránce tvůrce webů WEMASY, nebo si prohlédněte tarify na stránce ceníku.
Často kladené otázky o obrázcích na webu
Potřebuji na web profesionální fotky?
Profesionální fotky dělají skutečný rozdíl na klíčových stránkách, zejména na úvodní stránce a stránce O nás, kde se utváří důvěra. U vedlejších obrázků, článků na blogu a doprovodných vizuálů stačí dobře nasvícená fotka pořízená moderním telefonem. Prioritou je, aby byl obrázek skutečný a relevantní pro vaši firmu, ne aby ho pořídil profesionál. S tvůrcem webů WEMASY si to můžete nastavit přímo na svém webu.
Kolik obrázků má mít úvodní stránka?
Dost na to, aby podpořily sekce, ne tolik, aby stránka působila přeplněně nebo se pomalu načítala. Silný hlavní obrázek, jeden nebo dva obrázky v těle stránky a případně fotka týmu nebo pracoviště níž je rozumná struktura pro většinu úvodních stránek malých firem. Každý obrázek by si měl své místo zasloužit, ne vyplňovat prostor.
Mohu na webu používat obrázky z webů se stockovými fotkami?
Ano, za určitých podmínek. Weby se stockovými fotkami nabízejí obrázky s licencemi, které povolují komerční použití, ale před použitím si u každého obrázku zkontrolujte podmínky. Praktickým omezením je, že se tyto obrázky objevují na mnoha jiných webech, proto je používejte na vedlejší a doplňkové obrazové pozice, a ne jako hlavní vizuál na stránkách s vysokým nárokem na důvěru, jako je úvodní stránka nebo stránka O nás.
Jak velké obrázky mám na web nahrávat?
Před nahráním zkomprimujte. Cílete na méně než 200 kilobajtů u většiny obrázků na stránce a méně než 400 kilobajtů u hlavních obrázků. Používejte JPEG pro fotografie, PNG pro loga a průhledné obrázky a WebP, pokud to vaše platforma podporuje. Obrázek vždy před nahráním zmenšete na maximální šířku, ve které se bude zobrazovat, místo abyste nechali prohlížeč, aby ho zmenšil sám.
Ovlivňují obrázky pozice mého webu ve vyhledávání?
Ano, dvěma způsoby. Velké nekomprimované obrázky zpomalují stránku, což vyhledávače zahrnují do řazení. Obrázky bez alt textu promarní příležitost říct vyhledávačům, co stránka obsahuje. Správně velké obrázky s popisným alt textem přispívají jak k rychlosti stránky, tak k viditelnosti ve vyhledávání.