V dalším pokračování webových stránek pro zelenáče se podíváme na obrázky na webu a poodhalím vám další smutnou praktiku běžných tvůrců internetových stránek. Naučím vás, jak toto tajemství odhalit.
Každý tvůrce webových stránek, pokud má všech pět pohromadě, vám řekne, že je nejlepší mít na svém webu co možná nejvíce originálního fotografického či obrázkového materiálu. Takový vizuální obsah vítězí na plné čáře nad vším „vypůjčeným“ z internetu nebo dokonce zakoupeného z fotobank. Vždy, když pracuji na nějakém projektu, se nerad uchyluji ke stahování obrázkové vaty z internetu. Na obranu všech tvůrců internetových stránek musím přiznat, že někdy nám kvůli chabému zadání a nedostatku materiálů nic jiného nezbývá.
Proč jsou obrázky na webových stránkách důležité? Obrázky propůjčují vašemu webu tvář. Fotografie mohou být součástí designu vašich stránek. Důležitým stavebním kamenem. Zároveň poskytují návštěvníkovi vizuální přehled o vašich službách. Když opomineme tato fakta, dostaneme se k důležité součásti každého obrázku nahraného na váš web. Atribut alt – alternativní název.
V minulém článku jsme si popisovali internet jako obchodní centrum, kde nám jednotlivé obchůdky zastupovaly různé webové stránky. Možná si vzpomenete na agenty Chrome, Edge, Firefox, Safari a další, kteří probíhají obchodním centrem ve snaze nalézt vše, pro co je koncoví uživatelé poslali. Obrázky si představme jako plakáty rozlepené po celém obchodním centru ve snaze nalákat do vašeho obchodu co nejvíce zákazníků. Vizuální kvalitou plakátu se v našem příkladu zabývat nemusíme, neboť agentům je vizuál naprosto ukradený. Čeho si však velice pozorně všímají, jsou víše zmíněné alternativní názvy. Představme si je jako štítky na plakátech nesoucí název vašeho obchodu, jeho adresu a krátký popis vašeho zboží. Každý plakát umístěný v obchodním centru by ho měl nést, respektive mít ho vyplněný, protože internetové prohlížeče se dívají jenom na ně. Plakát bez štítku se stává naprosto zbytečným.
Obrázky neobsahující atribut alt jsou bezejmenným mrtvým obsahem. Vašim stránkám ve skutečnosti ani trochu nepomáhají. Kdybych byl preciznější v naší metafoře, takovéto obrázky bez alt atributu jsou jako plakáty umístěné jenom ve vašem obchodu. Na zákazníka působí až v momentě, kdy už ve vašem obchodě je. Přidáním atributu alt vyšlete plakáty do celého obchodního centra dělat vám reklamu.
A nyní se dostávám k hořkému tajemství tvůrců webových stránek. Vyplňovat alternativních názvů znamená věnovat se každému použitému obrázku zvlášť. To samozřejmě stojí čas a čas jsou v jejich branži peníze. Ti lepší tvůrci internetových stránek poskytující webové stránky s administračním systémem na míru vám majitelům webových stránek umožní atribut alt vyplňovat. Nicméně vás za ručičku nepovedou a neprozradí, kde to v administraci naleznete. Někteří tvůrci vám tuto možnost nedají. Obecně ale stále platí, co oči nevidí, to srdce nebolí. A o alternativním názvu se jednoduše mlčí.
Kdysi byl atribut alt vnímán jako nápis, který se zobrazil, než se obrázek na stránce plně načetl. Nyní se stává důležitým štítkem označující vaše fotografie a pomáhá zviditelňovat vaše webové stránky na internetu.
Chcete zjistit, jak si váš web stojí? Jestli vaše obrázky na webových stránkách nesou alternativní název a jak zní? Poradím vám ve dvou krocích, jak to zjistit:
První krok je velice snadný. Zadejte si do Google vyhledávače klíčová slova vaší firmy nebo ještě lépe její název. Vyberte možnost „obrázky“ a jednoduše hledejte, jestli narazíte na povědomý obsah z vašich stránek. Pokud ano, obrázky na vašem webu alt atribut nesou. Pokud vaše obrázky v Googlu nevidíte, něco je špatně.
Druhým krokem je použít vývojářský nástroj v našem oblíbeném Google Chromu. Najděte stránku, kde se nachází obrázek, u kterého chcete prozkoumat, jestli obsahuje atribut alt a jak zní. Klikněte pravým tlačítkem myši a zvolte možnost prozkoumat. Lze využít i klávesovou zkratku ctrl + shift + I. Zobrazí se vám vývojářské rozhraní. Ujistěte se, že máte zapnutou záložku „Elements“, a v levém honím rohu klikněte na první ikonku nesoucí nápovědu: „Select an element in the page to inspect it“ a nástroj kliknutím aktivujte (obrázek 1). Nyní klikněte na obrázek na stránce, jehož alt atribut hledáme. Ve vývojářském rozhraní se vám objeví a označí obrázek v jeho html podobě (vše, co se nachází mezi značkami <img …>). V tomto prostoru naleznete i alternativní název: alt=“…“ (obrázek 2). Pokud tento atribut není u vašeho obrázku vyplněný nebo dokonce zcela chybí, je na čase přemýšlet o tom, komu, proč a za co posíláte peníze.
P.S.: Ano, přiznávám, první krok je naprosto zbytečný a druhý bohatě stačí, ale nechtěl jsem vás připravit o zábavnou hru „najdi své obrázky“.
A doporučení závěrem?
Chystáte nějaký projekt, otevíráte restauraci, obchůdek, kavárnu? Budete potřebovat webové stránky? Vlastníte fotoaparát či lepší mobilní telefon? Foťte, foťte, foťte. Byť byste neměli k dispozici profesionálního fotografa či grafika. Chtějte po svých webmasterech správně vyplněný atribut alt. Jednodušší způsob, jak se na internetu více zviditelnit, snad ani není. A nebo se obraťte na někoho, kdo tomu rozumí, kdo vás nebude tahat za nos.