Jaký je rozdíl mezi vložením obrázku pomocí tagu <img> a nastavením pozadí přes CSS?

Značka <img> se používá k vložení obrázku jako samostatného obsahu na stránku. Je to významný sémantický prvek, který prohlížeče a vyhledávače rozpoznávají jako obrázek. Podporuje atribut alt, což je důležité pro SEO a přístupnost.

Nastavení pozadí pomocí CSS (background-image) je určeno pro dekorativní účely: pozadí obrázky nejsou považovány za obsah stránky a nejsou indexovány jako samostatné prvky. Nepodporují alternativní text a přímo neovlivňují SEO.

Hlavní rozdíly:

• <img> přidává obrázek do toku dokumentu, ovlivňuje rozložení a je interaktivní.
• Pozadí pomocí CSS neovlivňuje strukturu dokumentu a slouží k dekoraci.

Příklad:

<img src="logo.png" alt="Logo společnosti">

<div style="background-image: url('pattern.png'); width: 200px; height: 200px;"></div>

Z pohledu výkonu umožňuje <img> prohlížeči lépe řídit načítání a cachování, zatímco pozadí obrázky mohou být načteny pouze podle potřeby (například při zobrazení prvku).