HTML element <img> je nepárový tag, který se používá k vložení obrázku do HTML stránky. Tento element má několik klíčových atributů, které upravují jeho funkčnost a vzhled.

Základní syntaxe

<img src="cesta_k_obrazku" alt="alternativní popis">

Zdroj obrázku

Vlastnost src určuje zdroj obrázku. Vždy potřebujeme kompletní adresu s koncovkou souboru.

1. Absolutní cesta: Pokud obrázek je na serveru nebo jinde na internetu.
   Zdroj na internetu: Odkazujeme na URL adresu obrázku (např. http://…), která obvykle končí příponou souboru (.jpg, .png, apod.).
   Absolutní cesta v počítači se obvykle v HTML nepoužívá, protože se při přesunu na jiné místo „rozbije“, ale můžeme se s ní setkat v jiných programech např. v Illustratoru. Pak by byla celá cesta včetně názvu disku a všech složek vedoucích k obrázku.
   
2. Relativní cesta: Odkazujeme na obrázek uložený ve stejné složce nebo v podřízených složkách vůči HTML souboru. Tuto cestu ke zdroji používáme nejčastěji.
   • Ve stejné složce: <img src="obrazek.jpg">
   • V podřízené složce: <img src="obrazky/obrazek.jpg">
   • V nadřazené složce: <img src="../obrazek.jpg">

Další atributy elementu img

• width a height (velikost obrázku)
  Definují šířku a výšku obrázku.
  Hodnoty mohou být v:
  • Pixelech: <img src="obrazek.jpg" width="200" height="100">
  • Procentech: <img src="obrazek.jpg" width="20%" height="20%">
  • Jednotkách CSS (např. vw, vh):
    • vw: Šířka jako procento velikosti okna prohlížeče.
    • vh: Výška jako procento velikosti okna prohlížeče.

Pozor: Nastavením velikosti neupravujeme skutečný obrázek, pouze jeho rámec (kontejner)

• alt (alternativní text)
  Text, který popisuje obsah obrázku:
  • Zobrazuje se, pokud obrázek nejde zobrazit, nebo pokud je zobrazovaný na zařízeních zpracovávajících jen text
  • Slouží i při vyhledávání obrázků.
  • Pomáhá při optimalizaci vyhledávání webu (SEO)
    <img src="obrazek.jpg" alt="Fotka autora">
    
• title název – nápověda k obrázku
  Zobrazuje název nebo nápovědu při najetí myší na obrázek.
  <img src="obrazek.jpg" title="Název">
  
• border rámeček kolem obrázku
  Určuje tloušťku rámečku (v pixelech).Barva rámečku je černá nebo modrá (pokud je obrázek odkazem).
  <img src="obrazek.jpg" border="2">
• style inline styl obrázku
  • používá se pro individuální úpravy obrázku pomocí CSS
  • můžeme do něj vložit jakékoliv CSS vlasnosti (např. margin, align apod.)
    <img src="obrazek.jpg" style="margin:10px; border:1px solid black;">

Další poznámky

• Obrázky by měly být optimalizovány pro web, aby se zmenšila jejich velikost a zlepšila rychlost načítání stránky.
• Atribut alt je velmi důležitý pro přístupnost a SEO.