Images HTML ou images de fond CSS : quand utiliser chacune | We.Inc
Choisissez entre <img> et background-image, rédigez le texte alt, évitez les décalages de mise en page, construisez srcset et sizes, chargez en différé et servez du WebP ou de l'AVIF avec <picture>.
Images HTML et images de fond CSS
Utilisez un <img> quand l'image est du contenu : une photo de produit, un graphique, un portrait. Donnez-lui un texte alt, une largeur et une hauteur. Utilisez un background-image CSS quand l'image est une décoration derrière du texte. Ajoutez srcset et sizes pour que les téléphones téléchargent des fichiers plus légers, et loading="lazy" pour les images situées sous le premier écran, jamais pour le hero.
<img> ou background-image ?
Question
<img>
L'image porte-t-elle du sens ?
Oui, avec un texte alt
Non, simple décoration
Les moteurs de recherche doivent-ils l'indexer ?
Oui
Rarement prise en compte
Fichiers responsive
srcset et sizes
image-set() ou media queries
Chargement différé
loading="lazy"
Nécessite un script
Recadrer pour remplir un cadre
object-fit: cover
background-size: cover
Imprimée par défaut
Oui
Généralement non
Un tableau de décision, un générateur de srcset qui montre quel fichier un téléphone ou un portable téléchargerait, et des exemples modifiables de chaque modèle : texte alt, dimensions fixes, chargement différé, image hero rapide, recadrage avec object-fit à côté de background-size, formats modernes avec <picture>, et images de fond responsive avec image-set().
Commencez par le tableau de décision pour choisir entre un <img> et une image de fond CSS.
Si vous utilisez <img>, saisissez les largeurs de vos images dans le générateur de srcset et choisissez la mise en page. Copiez la balise générée.
Déplacez les curseurs de largeur d'écran et de densité de pixels pour voir quel fichier le navigateur choisirait pour chaque appareil.
Copiez tout autre modèle dont vous avez besoin dans les exemples, qui s'affichent tous en direct à côté de leur code.
Définissez toujours les attributs width et height à la taille réelle de l'image en pixels. Le CSS peut toujours la redimensionner ; les attributs permettent au navigateur de réserver le bon espace avant l'arrivée du fichier.
Marquez la plus grande image du premier écran avec fetchpriority="high" et laissez-la en chargement immédiat. Charger cette image en différé retarde le plus grand affichage de la page.
Laissez alt vide (alt="") sur les images purement décoratives pour que les lecteurs d'écran les ignorent, plutôt que d'omettre alt, ce qui pousse certains lecteurs à annoncer le nom du fichier.
Exportez les photos en deux ou trois largeurs, par exemple 480, 960 et 1600 pixels. Davantage de tailles aide rarement et ralentit les builds.
Questions fréquentes
background-image est-il mauvais pour le SEO ?
Les moteurs de recherche indexent les images présentes dans des éléments <img> bien plus fiablement que celles définies en CSS. Si vous voulez qu'une image apparaisse dans la recherche d'images ou décrive votre contenu, placez-la dans un <img> avec un bon texte alt. Les fonds décoratifs ne perdent rien à être en CSS.
Que doit dire le texte alt ?
Dites ce que l'image montre d'important dans ce contexte, en une courte phrase. Pour une photo de produit, ce peut être le produit et sa couleur ; pour un graphique, la conclusion principale. Évitez les formules comme image de. Si l'image est un lien, décrivez où mène le lien.
Quelle est la différence entre srcset avec w et avec x ?
Les descripteurs de largeur (480w, 960w) indiquent la largeur réelle de chaque fichier et laissent le navigateur choisir à l'aide de l'attribut sizes et de la densité de pixels de l'écran. Les descripteurs de densité (1x, 2x) conviennent aux images toujours affichées à une seule taille fixe, comme un logo.
Dois-je encore utiliser loading="lazy" si j'utilise un framework ?
Le chargement différé natif fonctionne dans tous les navigateurs majeurs actuels, un simple attribut suffit donc pour la plupart des images. Les composants d'image des frameworks l'ajoutent souvent pour vous ; vérifiez qu'ils ne chargent pas aussi l'image hero en différé.
Ai-je besoin à la fois du WebP et de l'AVIF ?
Pas toujours. Les deux formats sont pris en charge par les navigateurs majeurs actuels. L'AVIF est souvent plus léger pour les photos mais plus lent à encoder. Un élément <picture> avec une source AVIF, une source WebP et un JPEG de repli couvre tout le monde, mais le WebP seul avec un JPEG de repli est un choix plus simple et raisonnable.
Contenu ou décoration
La question qui tranche la plupart des choix d'images est de savoir si un visiteur perdrait une information si l'image ne se chargeait pas. Une photo d'équipe sur une page à propos, une capture d'écran dans un tutoriel et une photo de produit dans une boutique portent toutes du sens, elles ont donc leur place dans le HTML avec un texte alt.
Une texture floue derrière un titre, un motif dans un pied de page ou une photo qui ne sert qu'à créer une ambiance peuvent vivre dans le CSS. Cela garde le HTML propre et vous permet de changer d'image selon la taille d'écran sans toucher au balisage. Si du texte est posé dessus, assurez-vous qu'il reste lisible quand l'image manque en définissant aussi une couleur de fond.
Comment le navigateur choisit dans srcset
Avec des descripteurs de largeur, le navigateur lit d'abord sizes pour savoir à quelle largeur l'image sera affichée, par exemple 100vw sur téléphone et 50vw sur les écrans plus larges. Il multiplie cette valeur par le ratio de pixels de l'appareil et choisit le plus petit fichier au moins aussi large. Les navigateurs peuvent aussi choisir un fichier plus petit sur une connexion lente ou un plus grand déjà en cache.
Bien régler sizes compte davantage qu'ajouter des largeurs. Si sizes indique 100vw alors que l'image ne remplit qu'un tiers de l'écran sur ordinateur, le navigateur télécharge un fichier trois fois trop large.
Décalage de mise en page et image hero
Quand une image sans dimensions se charge, tout ce qui se trouve en dessous saute vers le bas. Les attributs width et height permettent au navigateur de calculer le ratio d'aspect à l'avance, ce qui supprime ce saut et améliore le Cumulative Layout Shift.
L'image hero est généralement l'élément Largest Contentful Paint. Gardez-la en chargement immédiat, donnez-lui fetchpriority="high", servez-la depuis votre propre domaine ou un hébergeur d'images rapide, et évitez de la cacher derrière un script qui la définit plus tard.
Un <img> complet
alt, width, height et chargement différé
Les attributs donnent la taille réelle ; le CSS la rend fluide. Grâce à width et height, l'espace est réservé avant le chargement du fichier. Les images de démo sont de petits SVG intégrés.
L'image hero : chargement immédiat et priorité haute
Utilisez ceci sur la seule grande image en haut de la page. Tout ce qui se trouve sous le premier écran reçoit loading="lazy" à la place.
Règles du texte alt
Texte alt selon le type d'image
Image
Photo de produit
Décrivez l'article et le détail qui compte : Table d'appoint en chêne avec deux tiroirs
Graphique ou schéma
Énoncez la conclusion : Les ventes ont doublé entre mars et juin
Image qui est un lien
Nommez la destination : Accueil
Motif ou séparateur décoratif
Vide : alt=""
Photo avec la même légende à côté
Vide, ou une courte étiquette, pour qu'elle ne soit pas lue deux fois
Texte à l'intérieur d'une image
Le même texte
object-fit: cover à côté de background-size: cover
Les deux recadrent une image pour remplir un cadre sans la déformer. object-position et background-position choisissent quelle partie reste visible.
Le même recadrage, de deux façons
À gauche, un <img> avec object-fit ; à droite, une div avec une image de fond. Elles se ressemblent ; seule celle de gauche a un texte alt et le chargement différé.
Images de fond CSS
Un fond derrière du texte, avec une couleur de repli
Le dégradé sombre superposé garde le texte blanc lisible sur n'importe quelle photo, et la couleur de fond s'affiche si l'image ne se charge pas.
Fonds responsive avec image-set()
image-set() laisse le navigateur choisir selon la densité de pixels ou le type de fichier. Gardez d'abord une ligne url() simple pour les anciens navigateurs.
WebP et AVIF avec <picture>
Formats modernes avec un JPEG de repli
Le navigateur utilise la première <source> dont il prend en charge le type. Le <img> à l'intérieur porte le texte alt, la taille et le fichier de repli, et c'est l'élément que vous stylez.
Pleine largeur sur tous les écrans
Pleine largeur sur téléphone, moitié à partir de 768px
Grille de cartes : 1, 2 ou 3 colonnes
Colonne de contenu limitée à 720px
Générateur de srcset et sizes
Largeurs exportées (px)
Chemin du fichier sans la largeur
Extension
À quelle largeur l'image est-elle affichée ?
Saisissez au moins une largeur.
Copier
Quel fichier un appareil téléchargerait-il ?
Petit téléphone
Grand téléphone
Tablette
Portable
Portable Retina
Largeur d'écran : {vw}px
Densité de pixels : {dpr}x
L'image est affichée sur {slot}px de large, le navigateur a donc besoin d'environ {px} pixels physiques et téléchargerait normalement
rien pour l'instant
(le plus grand fichier, plus petit que l'idéal : pensez à en exporter un plus large)
Les navigateurs peuvent choisir un fichier plus petit sur une connexion lente ou un plus grand déjà en cache ; ceci montre le choix habituel.