Quelle est la différence entre insérer une image avec la balise <img> et définir un fond via CSS?

La balise <img> est utilisée pour insérer une image en tant que contenu séparé sur la page. C'est un élément sémantique que les navigateurs et les moteurs de recherche reconnaissent comme une image. Elle supporte l'attribut alt, ce qui est important pour le SEO et l'accessibilité.

L'utilisation d'une image de fond via CSS (background-image) est destinée à des fins décoratives : les images de fond ne sont pas considérées comme du contenu de la page et ne sont pas indexées en tant qu'éléments séparés. Elles ne supportent pas de texte alternatif et n'affectent pas directement le SEO.

Principales différences :

• <img> ajoute l'image au flux du document, influence la mise en page et est interactif.
• L'image de fond via CSS n'affecte pas la structure du document et sert à la décoration.

Exemple :

<img src="logo.png" alt="Logo de l'entreprise">

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

Du point de vue des performances, <img> permet au navigateur de mieux gérer le chargement et la mise en cache, tandis que les images de fond peuvent être chargées uniquement si nécessaire (par exemple, lors de l'affichage de l'élément).