Jak správně vyplnit atributy obrázku při jeho vložení do článku

31. 10. 2016

Zjistili jsme, že mnozí z vás by ocenili vysvětlení všech základních atributů a pojmů, které je třeba vyplnit při vkládání obrázku do stránky. Připravili jsme pro vás tento článek, kde vysvětlíme jednotlivá pole a ukážeme vám i jejich vyplněnení na konkrétním příkladu. 

Přidání obrázku do článku

Tento formulář se vám zobrazí při přidávání obrázku do stránky přes ikonku Vložit/upravit obrázek.

Pro snadnější pochopení problematiky si vše objasníme na jednoduchém příkladu. Máme obrázek supermarketu v Brně, který je součástí článku o loupežném přepadení v tomto supermarketu. Nyní si ukážeme, jak správně vyplnit jednotlivá pole při vložení tohoto obrázku do článku.

Záložka „obecné“

URL obrázku

Jde o relativní adresu obrázku (relativní adresy se na rozdíl od těch absolutních používají u odkazů v rámci našeho webu a neobsahují začátek typický pro absolutní adresy https://...). V administraci je možné si obrázky vybrat přes ikonku složky vpravo. V případě, že byste chtěli někdy URL vypsat sami bez použití vyhledání obrázku ve složkách, existují v nové administraci dvě cesty k nalezení jeho url adresy: 

• Při úpravě obrázku (v sekci Obrázky a fotogalerie) v části SEO.

  

• Nebo ve fotogalerii, kde kliknete na ikonku lupy u obrázku (Zobrazit) a tento obrázek se otevře v novém okně. Z adresního řádku si poté zkopírujete adresu obrázku.

  

Takto zíkaná URL adresa obrázku se doplní za /obrazek/velikost-obrazku/.

Popis a titulek obrázku

Popis obrázku neboli alt (alternate text) – tento text by měl obsahovat informaci, co je na obrázku vidět (např. supermarket v Brně).

Jde o zástupný text, který se zobrazuje, než se obrázek načte. Není tedy na první pohled na webu viditelný. Má zásadní význam pro uživatele s vypnutými obrázky, pro alternativní média (indexovací roboty, hlasové výstupy, textové prohlížeče) a zejména pro zrakově postižené osoby.

Může se stát, že je na webu obrázek, který například tvoří pouze pozadí webu nebo plní jinou čistě designovou funkci. V takovém případě by obrázek neměl být vůbec obsažen v HTML, ale CSS. A pokud ho tam z nějakého důvodu máme, ponecháme alt prázdný.

Popis obrázku (alt) je důležitý i pro Google. Pokud chce porozumět, co je na obrázku, zaměřuje se právě na tento alt text. Z toho vyplývá, že i z pohledu SEO optimalizace je důležité tyto popisy vyplňovat.

Titulek obrázku neboli title – titulek by měl zachycovat vztah obrázku k obsahu daného článku či obsahu, u kterého je uveden (např. Loupež v místním supermarketu).

Titulek se zobrazí po najetí myši na obrázek. Na rozdíl od popisu ho není nutné vyplňovat.

Je špatně, když se popis a titulek obrázku shodují?

Z technického hlediska je zápis kódu validní, ale jinak se výrazně nedoporučuje, aby se tyto atributy shodovaly. Mají jiný význam v obsahu, a tak není důvod, aby se shodovaly. Navíc se tím duplikuje obsah. 

Rozměry obrázku

Rozměrům obrázku se věnuje článek na našem blogu Obrázky v inPage - velikost a použití nejen s novým WYSIWYG editorem.

Záložka „Pokročilé“

V této záložce můžete nastavit vybrané vlastnosti obrázku, které byste jinak museli psát jako kód do vlastního stylu CSS.

Vertikální mezera (margin-top a margin-bottom) – mezera nad a pod obrázkem, která vertikálně odděluje obrázek od dalších prvků (rozměr je měřen od rámečku k dalšímu prvku, kterým je např. i okraj stránky)

Horizontální mezera (margin-right a margin-left) – mezera vpravo a vlevo od obrázku, která horizontálně odděluje obrázek od dalších prvků (rozměr je měřen od rámečku k dalšímu prvku, kterým je např. i okraj stránky)

Rámeček (border-width) – jde o šířku okraje obrázku (rámečku)

Údaje lze zadávat buď v px (není nutné vyplňovat jednotku, px jsou nastaveny automaticky), nebo v dalších délkových jednotkách CSS (např. %).  

Po vyplnění hodnot mezer či rámečku se na základě vložených údajů zobrazí CSS zápis v poli Styl. Pokud máte zkušenosti s CSS, můžete si do tohoto pole vepsat jakýkoliv CSS kód použitelný pro daný obrázek.

Hodnoty jednotlivých mezer (margin) se v poli Styl zobrazí souhrnně a to v pořadí ve směru hodinových ručiček: mezera nad 20% (margin-top) mezera vpravo 50px (margin-right) mezera pod 20% (margin-bottom) mezera vlevo 50px (margin-left).