Aký je rozdiel medzi vložením obrázka pomocou tagu <img> a nastavením pozadia cez CSS?

Značka <img> saťahuje obrázok ako samostatný obsah na stránke. Je to významný sémantický prvok, ktorý prehliadače a vyhľadávače rozpoznávajú ako obrázok. Podporuje atribút alt, čo je dôležité pre SEO a prístupnosť.

Nastavenie pozadia pomocou CSS (background-image) je určené na dekoratívne účely: pozadie obrázky sa nepovažujú za obsah stránky a nie sú indexované ako samostatné prvky. Nepodporujú alternatívny text a priamo neovplyvňujú SEO.

Hlavné rozdiely:

• <img> pridáva obrázok do toku dokumentu, ovplyvňuje rozloženie a je interaktívny.
• Pozadie pomocou CSS neovplyvňuje štruktúru dokumentu a slúži na dekoráciu.

Príklad:

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

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

Z pohľadu výkonu umožňuje <img> prehliadaču lepšie riadiť načítanie a cacheovanie, zatiaľ čo pozadie obrázky môžu byť načítané iba podľa potreby (napríklad pri zobrazení prvku).