Výměna obrázků přímo na vašem webu: Vaše vizitka musí žít

Říká se, že jeden obrázek vydá za tisíc slov. Na internetu to platí dvojnásob. Návštěvníci webových stránek jsou dnes netrpěliví a často „čtou“ pouze očima – skenují nadpisy a prohlížejí fotografie. Pokud jsou vaše fotky zastaralé, nekvalitní nebo nudné, zákazník odchází dříve, než si přečte jedinou větu o vašich skvělých službách. Schopnost výměny obrázků přímo na vašem webu je klíčová pro udržení atraktivity vaší prezentace. Web nesmí být statickým pomníkem, musí být živým organismem, který reaguje na roční období, aktuální akce nebo novinky ve vašem portfoliu.

Mnoho majitelů webů má zbytečný strach. Bojí se, že když sáhnou do administrace, něco pokazí. Že se obrázek nezobrazí, rozhodí se text nebo spadne celá stránka. Tento strach je pochopitelný, ale v dnešní době moderních redakčních systémů už zbytečný. Webové stránky, které tvořím, jsou navrženy tak, aby správa obrázků byla intuitivní, bezpečná a rychlá. Nemusíte volat programátorovi kvůli každé nové fotce z firemního večírku. S trochou znalostí to zvládnete sami, a my si v tomto článku řekneme, jak na to správně, abyste svému webu spíše neublížili.

Proč je vizuální obsah tak důležitý?

Lidský mozek zpracovává vizuální informace 60 000krát rychleji než text. Když někdo přijde na váš web, během zlomku vteřiny si udělá názor na základě designu a fotografií. Kvalitní fotky budují důvěru. Představte si e-shop, kde jsou fotky produktů rozmazané nebo příliš tmavé. Koupili byste si tam něco? Pravděpodobně ne. A stejně to funguje i u služeb. Pokud jste řemeslník a máte na webu fotky své práce z roku 2005 focené starým mobilem, zákazník může nabýt dojmu, že vaše práce neodpovídá moderním standardům.

Pravidelná aktualizace fotogalerie ukazuje, že vaše firma funguje a má zakázky. Výměna úvodního banneru podle sezóny (Vánoce, léto, Black Friday) zase dává návštěvníkům najevo, že web je udržovaný a informace na něm jsou platné. Výměna obrázků je tedy silným marketingovým nástrojem. Umožňuje vám vyprávět příběh vaší značky a vyvolávat v lidech emoce, které vedou k nákupnímu rozhodnutí.

Nástroje pro snadnou správu: CMS je váš přítel

Doby, kdy se obrázky měnily přepisováním HTML kódu, jsou dávno pryč. Moderní weby stavíme na redakčních systémech (CMS), jako je WordPress nebo Joomla. Tyto systémy mají vestavěné správce médií, které fungují podobně jako složky ve vašem počítači. Nahrávání obrázků je často otázkou metody „Drag & Drop“ – prostě přetáhnete fotku z plochy do prohlížeče a je to. Žádné složité FTP přenosy, žádné psaní kódu.

Weby připravuji tak, abyste měli jasně definovaná místa, kam obrázky patří. Pokud máte na webu sekci „Náš tým“, uvidíte v administraci políčko „Fotografie“. Kliknete na „Vyměnit“, vyberete nový soubor a systém se postará o zbytek. Často je nastaveno automatické oříznutí, takže se nemusíte bát, že by nová fotka byla moc velká a rozhodila design stránky. Cílem je, aby úprava webu byla pro vás radostí, nikoliv technickým oříškem.

Velikost a rychlost: Nejčastější chyba

Tady se dostáváme k nejdůležitější technické části. To, že umíte nahrát fotku, neznamená, že byste tam měli nahrát jakoukoliv fotku. Nejčastější chybou, kterou uživatelé dělají, je nahrávání fotografií v plném rozlišení přímo z fotoaparátu nebo mobilu. Taková fotka může mít velikost 5 až 10 MB. Pokud takových fotek dáte na stránku pět, stránka bude mít 50 MB. Na mobilním připojení se bude načítat půl minuty. A uživatel odejde.

Před výměnou obrázku je nutné ho optimalizovat. To znamená zmenšit jeho datovou velikost při zachování kvality. Pro web obvykle stačí Full HD rozlišení (1920×1080 pixelů) a velikost souboru do 200–300 kB. Existují skvělé online nástroje (např. TinyPNG, ILoveIMG), kde fotku nahrajete, ona se „zmáčkne“ a vy si stáhnete optimalizovanou verzi. Tento krok nikdy nevynechávejte. Rychlost webu je klíčová pro SEO i pro spokojenost zákazníků.

Formáty souborů: JPG, PNG nebo WebP?

Není obrázek jako obrázek. Počítače používají různé formáty a každý se hodí na něco jiného. Pokud chcete provádět úpravy obrázků na webu správně, měli byste znát základní rozdíly:

• JPG (JPEG): Ideální pro fotografie. Umí zobrazit miliony barev a má dobrou kompresi. Je to standard pro fotky produktů, lidí či krajiny.
• PNG: Používá se pro grafiku, loga nebo obrázky s průhledným pozadím. Je obvykle datově větší než JPG, takže na běžné fotky se nehodí.
• WebP: Moderní formát vyvinutý Googlem. Nabízí výrazně menší velikost souboru při stejné kvalitě než JPG. Moderní weby by měly preferovat tento formát.

Většina moderních systémů už umí pracovat s WebP automaticky. Pokud nahrajete JPG, systém si ho může sám převést. Důležité je nepoužívat nevhodné formáty jako BMP nebo TIFF, které jsou pro web obrovské a prohlížeče s nimi mají problém.

SEO pro obrázky: Aby vás našel Google

Věděli jste, že obrázky vám mohou přivést návštěvníky z vyhledávání? Google má sekci „Obrázky“, kterou lidé často používají. Aby ale Google věděl, co na obrázku je, musíte mu to říct. Roboti (zatím) nevidí obsah fotky tak jako my. Čtou text. Proto je při výměně obrázků nutné vyplňovat takzvaný alternativní text (alt tag).

Alt text je krátký popis toho, co na obrázku je. Místo „IMG_5542.jpg“ by měl být název souboru „cervena-sedacka-rohova.jpg“ a alt text „Červená rohová sedačka v moderním obývacím pokoji“. To pomáhá nejen SEO, ale také nevidomým uživatelům, kterým obsah webu čtou speciální čtečky. Správný popis obrázků je známkou profesionálně spravovaného webu a zvyšuje vaši šanci na lepší umístění ve vyhledávačích.

Autorská práva: Pozor na krádeže

Velmi citlivé téma. Potřebujete hezkou fotku do článku, tak jdete na Google Obrázky, stáhnete první pěknou fotku a dáte ji na web. Zadržte! To je nejrychlejší cesta k pokutě. Většina obrázků na internetu je chráněna autorským zákonem. To, že je obrázek na internetu, neznamená, že je zdarma. Fotografové a fotobanky používají speciální software, který prohledává internet a hledá neoprávněné užití jejich děl.

Při správě webového obsahu používejte buď vlastní fotografie (což je nejlepší, protože jsou autentické), nebo fotografie z fotobank. Existují placené fotobanky (Shutterstock, Adobe Stock), kde máte jistotu kvality a licence. Existují i fotobanky zdarma (Unsplash, Pexels, Pixabay), kde můžete fotky použít pro komerční účely, ale vždy si pečlivě přečtěte podmínky licence. Nikdy neriskujte použití kradené fotky, nestojí to za ty problémy.

Ořez a kompozice: Nenechte useknout hlavy

Webové stránky jsou responzivní. To znamená, že se přizpůsobují velikosti obrazovky – jinak vypadají na širokém monitoru, jinak na tabletu a jinak na mobilu na výšku. S tím souvisí i zobrazování obrázků. Často se stává, že na počítači vypadá široký banner skvěle, ale na mobilu se z něj udělá výřez, kde chybí podstatná část sdělení nebo má osoba na fotce „useknutou“ hlavu.

Při výběru obrázků pro web myslete na tzv. „safe zone“ – bezpečnou zónu uprostřed fotky, kde se nachází to nejdůležitější. Okraje mohou být na různých zařízeních oříznuty. Pokud vkládáte text přímo do obrázku (což se obecně nedoporučuje, lepší je text HTML vrstvou přes obrázek), ujistěte se, že je čitelný. Kvalitní správa obrázků vyžaduje trochu estetického cítění a předvídavosti, jak se fotka zachová na malém displeji.

Konzistence stylu: Aby web nebyl jako cirkus

Každý web má svůj vizuální styl – barvy, písma, atmosféru. Vaše obrázky by tento styl měly ctít. Pokud máte web v jemných pastelových barvách a vložíte tam agresivní neonovou grafiku, bude to působit rušivě. Stejně tak, pokud používáte profesionální studiové fotky a najednou tam vložíte tmavou, zrnitou fotku z mobilu, snížíte tím vnímanou hodnotu celé značky.

Snažte se držet jednotný styl. Používejte podobné filtry, podobné nasvícení. Pokud si nejste jistí, je lepší méně než více. Čistota a jednoduchost vítězí. Výměna fotek by měla web vylepšovat, ne ho tříštit. Pokud nemáte cit pro grafiku, rádi vám pomůžeme s výběrem nebo úpravou fotek tak, aby do vašeho webu perfektně zapadly a podpořily vaši firemní identitu.

Pojmenování souborů: Pořádek musí být

Možná to zní jako detail, ale název souboru je důležitý. Nahrávat soubory s názvy jako „DS5541_final_verze2_uprava.jpg“ není dobrá praxe. Nejenže to nevypadá hezky, ale ztěžuje to orientaci v systému. Pokud budete za rok hledat konkrétní fotku, podle tohoto názvu ji nenajdete. Navíc, jak už jsme zmínili, název souboru čte i Google.

Před nahráním soubor přejmenujte. Používejte klíčová slova, malá písmena a místo mezer pomlčky (nepoužívejte diakritiku!). Například: „montaz-okna-praha.jpg“. Udržovat pořádek v knihovně médií na vašem webu vám v budoucnu ušetří spoustu času. Když budete mít na webu stovky fotek, oceníte, že je máte logicky pojmenované a roztříděné.

Co když to nechcete dělat sami?

Chápeme, že ne každý má čas nebo chuť se zabývat ořezáváním fotek a řešením pixelů. Vaše podnikání je o něčem jiném. Proto nabízíme službu správy obsahu. Vy nám pošlete fotky tak, jak jste je vyfotili (třeba přes Úschovnu nebo WhatsApp), a my se postaráme o zbytek. Vybereme ty nejlepší, upravíme barvy, ořízneme na správný formát, zmenšíme datovou velikost, doplníme SEO popisky a vložíme na správné místo na webu.

Můžeme se také domluvit na pravidelné aktualizaci. Například jednou měsíčně projdeme váš web a navrhneme vizuální oživení. Nebo pro vás zajistíme profesionálního fotografa, který nafotí zásobu kvalitních fotek na rok dopředu. Možností je mnoho. Cílem je, aby váš web vypadal profesionálně za všech okolností.

Nástroje pro laiky: Canva a ti druzí

Pokud se do toho chcete pustit sami, doporučujeme využívat uživatelsky přívětivé grafické nástroje. Naprostou jedničkou je dnes Canva. Je to online nástroj, který nabízí tisíce šablon pro sociální sítě i weby. I ve verzi zdarma toho umí hodně. Můžete v ní snadno oříznout fotku, přidat text, upravit jas nebo vytvořit koláž. Výsledek si stáhnete v optimalizované kvalitě.

Používání takových nástrojů vám dává svobodu. Nemusíte se učit složitý Photoshop. Stačí pár kliknutí a máte grafiku, která vypadá jako od profesionála. A tu pak snadno vložíte na svůj web. Rádi vás zaškolíme v základech práce s těmito nástroji, abyste byli soběstační a mohli reagovat na potřeby trhu okamžitě.

Nebojte se experimentovat (s mírou)

Web má jednu obrovskou výhodu oproti tištěnému katalogu. Dá se měnit. Pokud vyměníte obrázek a zjistíte, že to není ono, prostě ho vyměníte zpátky. Můžete testovat, co na vaše zákazníky funguje lépe. Zaujme je spíše fotka usměvavého člověka, nebo detail produktu? Díky snadné výměně obrázků můžete provádět jednoduché A/B testování a zjišťovat, jak vizuál ovlivňuje chování návštěvníků.

Nebojte se svůj web oživit. Statický web je mrtvý web. Ukažte, že se u vás pořád něco děje. Že máte nové produkty, nové kolegy, nové reference. Fotografie jsou tím nejjednodušším způsobem, jak komunikovat novinky. S naším nastavením a vaší kreativitou (nebo naší pomocí) bude váš web vždy atraktivní a aktuální.

Investice do školení se vyplatí

Součástí předání webu by vždy mělo být zaškolení. Nechceme vám jen předat klíče a utéct. Ukážeme vám, jak administrace funguje. Natočíme vám třeba i krátké videonávody přímo pro váš web, ke kterým se můžete kdykoliv vrátit. „Jak změnit banner“, „Jak přidat fotku do galerie“. Díky tomu ztratíte ostych a získáte kontrolu nad svou online prezentací.

Být nezávislý v běžných úkonech je osvobozující. Nemusíte čekat dny, než agentura vymění jednu fotku. Uděláte to sami za pět minut u ranní kávy. A pro ty složitější věci? Pro ty jsme tu stále my, připraveni vám pomoci.