Smrt image replacementu?
Image replacement, neboli náhrada textu obrázkem, je metoda, kterou je možné relativně přístupně nahradit textový element (např. nadpis) obrázkem. Existuje mnoho technik image replacementu, nejpopulárnější z nich sepsal Dave Shea na svém Mezzoblue (Revised Image Replacement). Google a alty Dříve byl image replacement nutností především z pohledu SEO – optimalizace pro vyhledávače. Google totiž neindexoval alternativní texty k obrázkům, které […]
Image replacement, neboli náhrada textu obrázkem, je metoda, kterou je možné relativně přístupně nahradit textový element (např. nadpis) obrázkem. Existuje mnoho technik image replacementu, nejpopulárnější z nich sepsal Dave Shea na svém Mezzoblue (Revised Image Replacement).
Google a alty
Dříve byl image replacement nutností především z pohledu SEO – optimalizace pro vyhledávače. Google totiž neindexoval alternativní texty k obrázkům, které nebyly v odkazu. Přibližně před rokem se ovšem situace obrátila a Google už alty indexuje.
<div id=“logo“><img src=““ alt=“název“ /></div>
Velkou výhodou výše uvedené konstrukce je její přístupnost. Funguje při vypnutých obrázcích, indexují ji vyhledávače, čtou ji hlasové čtečky, zobrazuje se naprosto korektně v podstatě ve všech prohlížečích.
Design a obsah webu
Jenže doba si žádá víc – oddělení designu od obsahu. Pokud tedy budete na svém webu používat přepínač stylů či nebudete mít možnost měnit XHTML, ale jen kaskádové styly, pak si vkládání tagu img do stránky pořádně rozmyslete, protože nad těmito obrázky nebudete mít pomocí CSS zas tak velkou kontrolu (nějakou ano, ale ne úplnou).
Jak z toho ven?
Ideální náhrada textu obrázkem neexistuje. Ideálnímu řešení se docela blíží DIR a GIR, leč obě metody zaberou v kódu mnohem více místa než třeba Gilder/Levin Method, kterou používám na většině projektů (její nevýhodou je přebytečný SPAN).
Jestliže máte jistotu, že nebudete potřebovat měnit např. logotyp v hlavičce webu (nebo i celou hlavičku), klidně ho tam vložte jako obrázek bez použití jakékoliv náhradové techniky. Budete mít více muziky za podstatně méně času a napsaného kódu.
Komentáře
Já jsem třeba dodnes nepochopil onu snahu mít název webu jako nadpis H1. Nedejbože ještě jako text nahrazovaný obrázkem.
Pokud se jedná o blog tak by, podle mě, měl mít H1 název spotu. Logo nechť je obrázkem, pokud to má být obrázek a ne jen text.
[2] To, proč to někteří dělají je asi důsledkem rady Davida Špinara – Přeskočení navigace, pořadí obsahu a nadpisy
[1] A co když obrázek, kterým nahrazuješ ten nadpis je logo firmy? Mě uvedený článek dává odpověď na to, proč použít některý IR..
[3] Ono je OK i jinde. Jen si myslím, že se s názvem webu v H1 moc nadělá.
[4] V Davidově článku není ani slovo o nahrazování nadpisu H1 obrázkem. Stejně jako se v něm nepíše o tom, že název webu má být H1 nadpis.
Pokud uděláte logo webu klasicky tagem IMG a uvedete správný ALT, uděláte lépe.
[5] >Pokud uděláte logo webu klasicky tagem IMG a uvedete správný ALT, uděláte lépe.
však o tom spot pojednává ;)
[2] přesně tak. Dle mého za tím stojí neznalost angličtiny, kdy si webdesignéři pletou pojmy „heading“ (titulek) a „header“ (hlavička), tedy naprosto jiné věci.
[4] nenapadá mě jediný důvod, proč nějaký text nahrazovat logem firmy.
„nenapadá mě jediný důvod, proč nějaký text nahrazovat logem firmy.“
Protoze jde casto o totez jen v textove/graficke podobe (registrovat znamku si muzete taky v obou podobach, takze je tam analogie). Leo
[5] „V Davidově článku“ se to pravda nevyjadřuje tak konkrétně, nicméně přiloženým příkladem dává najevo, že název webu se do H1 nadpisu hodí.
A proč taky ne. H1 je hlavní nadpis. A když je web třeba prezentací firmy Zabloudil – cestovní kancelář, tak proč tento název do H1 nedát.
[5][8] A to se týká i nahrazování obrázkem. Když už jsem do H1 uvedl ten název firmy, a zároveň firma by se raději prezentovala svým logem, je na místě IR.
I tomu nahrazování obrázkem dává David Špinar na svém přístupném blogu příklad. Takže pokud Vás ještě nenapadá kde nahrazovat nějaký text logem firmy, bude záhodno si se jmenovaným nejspíš promluvit :))
;)
No a co k tomu všemu SEO? Myslím, že nic pro mít nebude. Firmy si často do svého názvu dávájí i svůj obor činnosti, a tím, že tento bude pořád hezky v H1, je pravděpodobné, že bude firma lépe nalezitelná.
OT: spatně se mi tady orientuje v komentářích, když hlavičky jsou pod příspěvkem
Právě možnost registrovat známku v obou podobách naznačuje, že se jedná o něco docela jiného. To je jako tvrdit, že fotografie člověka je totéž, jako jeho jméno.
Pokud budu chtít na webu uvést něčí foto, prostě je tam přes [img] vložím. Pokud bude součástí grafického stylu (např. podklad), vložím ji přes CSS. A pokud se budu o někom bavit, použiji jeho jméno. Jinak to snad ani nejde.
Takže na webu pristupnost.nawebu.cz je nahrazení hlavního nadpisu obrázkem špatně?
Když jsem se před devíti lety učil HTML, tak jsem si říkal, proč vůbec nějaký atribut IMG ALT existuje, když by značka IMG klidně mohla být párová a její vnitřek by byl textový popis. Přesně by to zapadalo do koncepce jazyka – alternativní popis je stejně povinný, prohlížeče bez znalosti značky IMG (to jsou svým způsobem dodnes vyhledávače) by si s tím transparentně poradily, psaní je s tím dokonce méně. Psát by se potom dalo [h1][img src="logo.gif"]Firma[/img][/h1]. Škoda, že to nenapadlo i lidi od W3C.
> Pokud tedy budete na svém webu používat přepínač stylů či nebudete mít možnost měnit XHTML, ale jen kaskádové styly…
Myslím, že pokud mohu měnit kaskádový styl (tedy obsah XHTML elementů LINK nebo STYLE), mohu stejně tak měnit i cestu k obrázkům (obsah XHTML elementů IMG). Technicky jde o totéž.
> Jak z toho ven? Ideální náhrada textu obrázkem neexistuje. Ideálnímu řešení se docela blíží DIR a GIR…
Ideálním řešením je text obrázkem nenahrazovat. K tomuto poznání je třeba přijít sám. To, že nadpis nebude vyveden přesně tím písmem, jaké jsme použili při návrhu webu ve Photoshopu, víme jen my. Nikdo jiný. Naopak všichni ostatní se mohou divit, proč je písmo rozmazané a bude jim to spíš na obtíž.