Care este diferența dintre inserarea unei imagini folosind eticheta <img> și setarea unui fundal prin CSS?

Eticheta <img> este utilizată pentru a insera o imagine ca conținut separat pe pagină. Este un element semantic semnificativ, recunoscut de browsere și motoarele de căutare ca o imagine. Suportă atributul alt, ceea ce este important pentru SEO și accesibilitate.

Setarea unui fundal prin CSS (background-image) este folosită în scopuri decorative: imaginile de fundal nu sunt considerate conținut al paginii și nu sunt indexate ca elemente separate. Nu suportă text alternativ și nu influențează direct SEO.

Diferențele principale:

• <img> adaugă imaginea în fluxul documentului, influențează aspectul și este interactiv.
• Imaginea de fundal prin CSS nu afectează structura documentului și servește pentru decorare.

Exemplu:

<img src="logo.png" alt="Logo companie">

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

Din punct de vedere al performanței, <img> permite browserului să gestioneze mai bine încărcarea și caching-ul, în timp ce imaginile de fundal pot fi încărcate doar dacă este necesar (de exemplu, la afișarea elementului).