Optimiser les images de fond CSS responsives
Servez des images de fond CSS adaptées à chaque écran avec les requêtes média et image-set pour alléger vos pages et accélérer le chargement.
De nombreux sites chargent une seule image de fond, lourde et calibrée pour le bureau, qu’ils servent ensuite à tous les écrans. Sur un mobile, cette image est inutilement volumineuse : elle consomme de la bande passante, ralentit le chargement et se retrouve souvent étirée ou rognée. Les images de fond responsives consistent à envoyer une image dont la taille est limitée à ce qui est réellement nécessaire pour l’écran qui affiche la page, dans le prolongement des bonnes pratiques pour optimiser les images.
Pour le SEO, l’intérêt est concret. Une page plus légère se charge plus vite, économise les données de l’internaute et améliore les Core Web Vitals. Dans la démonstration de web.dev, l’arrière-plan servi sur mobile est 67 % plus léger que la version bureau : un gain immédiat sur la vitesse perçue et sur la consommation réseau.
Servir une seule image de fond lourde, calibrée pour le bureau, à tous les écrans, c’est une négligence que je croise encore très souvent. Sur mobile, ce visuel est inutilement volumineux, étiré ou rogné, et il consomme de la bande passante pour rien. Les requêtes média, ou plus simplement image-set, permettent d’envoyer la bonne taille à chaque écran sans effort démesuré.
Les limites d'une image de fond unique
Une feuille de style classique combine plusieurs propriétés pour qu’une image couvre l’écran quelle que soit sa taille. C’est une première étape vers un arrière-plan adaptatif, mais elle ne résout pas le poids du fichier : le même nombre d’octets est envoyé à tous les appareils. Comprendre le rôle de chaque propriété aide à choisir ce qu’il faut conserver et ce qu’il faut faire varier selon l’écran.
| Propriété | Valeur | Rôle |
|---|---|---|
background-position |
center center |
Centre l’image horizontalement et verticalement |
background-repeat |
no-repeat |
Affiche l’image une seule fois |
background-attachment |
fixed |
Empêche l’image de défiler avec le contenu |
background-size |
cover |
Redimensionne l’image pour couvrir le conteneur |
background-image |
url(…) |
Indique le fichier image à charger |
Servir la bonne image avec les requêtes média
Les requêtes média (règles @media) déclarent des styles qui ne s’appliquent que dans certaines conditions, par exemple sous une largeur d’écran donnée. La méthode consiste à retirer la déclaration background-image globale, puis à définir un point d’arrêt par gabarit d’écran. On s’appuie sur des largeurs courantes : jusqu’à 480 px pour le mobile, de 481 px à 1024 px pour la tablette, au-delà de 1025 px pour le bureau. Lorsque la condition d’un point d’arrêt est remplie, le navigateur charge uniquement l’image correspondante ; pour sécuriser le LCP, voyez aussi comment précharger les images responsives.
@media (max-width: 480px) {
body { background-image: url(images/background-mobile.jpg); }
}
@media (min-width: 481px) and (max-width: 1024px) {
body { background-image: url(images/background-tablet.jpg); }
}
@media (min-width: 1025px) {
body { background-image: url(images/background-desktop.jpg); }
}image-set, l'alternative plus concise
Une fonctionnalité CSS plus récente, image-set(), permet d’atteindre le même objectif avec moins de lignes : on déclare plusieurs sources et le navigateur retient la plus adaptée. Elle reste utile à connaître et à surveiller, car son adoption progresse. Les requêtes média conservent toutefois l’avantage d’être très largement prises en charge par l’ensemble des navigateurs, ce qui en fait la base la plus sûre aujourd’hui. Pour les visuels en balise img, voyez comment choisir la taille avec srcset.
body {
background-image: image-set(
url(images/background-mobile.jpg) 1x,
url(images/background-desktop.jpg) 2x
);
}Un élément doté d’une image de fond CSS peut être le candidat au Largest Contentful Paint. Or ces images ne sont pas détectées par le scanner de préchargement du navigateur : leur chargement démarre tard et le LCP peut s’en trouver retardé. Si possible, servez l’image principale dans une balise img avec srcset et sizes, que le scanner sait découvrir. Sinon, préchargez l’image responsive avec un link doté des attributs media, imagesrcset et imagesizes.
À faire
- préparer une version d’image par gabarit d’écran
- définir des points d’arrêt cohérents avec vos maquettes
- préférer une balise img avec srcset quand l’image est le candidat LCP
À éviter
- servir une seule image lourde à tous les appareils
- multiplier les préchargements inutiles sans condition media
- négliger la détectabilité de l’image de fond pour le LCP
Points clés à retenir
- Retirez la déclaration globale puis ciblez chaque écran avec @media
- Calibrez des points d'arrêt mobile, tablette et bureau
- Évaluez image-set pour un code plus concis
- Méfiez-vous du LCP : une image de fond n'est pas préchargée seule
- Préchargez l'image responsive ou passez par une balise img
Une image de fond adaptée à l’écran réduit le poids transféré et accélère l’affichage.
Quiz : testez vos connaissances
Quiz : testez vos connaissances
-
Quel est le principal défaut de servir une seule image de fond CSS lourde à tous les écrans ?
- Le même poids de fichier est envoyé à tous les appareils, gaspillant la bande passante sur mobile
- Les requêtes média deviennent impossibles à utiliser
- L'image de fond ne s'affiche jamais correctement sur les écrans de bureau
Avec une image de fond unique, le même nombre d’octets est envoyé à tous les appareils. Sur mobile, cela gaspille de la bande passante et ralentit le chargement.
-
Comment servir la bonne image de fond selon la taille de l'écran ?
- En appliquant loading=lazy directement sur la propriété background-image
- En utilisant des requêtes média (@media) ou la fonction image-set() pour proposer plusieurs sources
- En réduisant la qualité JPEG d'une seule image jusqu'à ce qu'elle convienne à tous
Les requêtes média (
@media) déclarent des styles conditionnels par gabarit d’écran, etimage-set()offre une alternative plus concise pour proposer plusieurs sources. -
Une image de fond CSS peut-elle pénaliser le LCP ?
- Oui, car les images de fond CSS ne sont pas détectées par le scanner de préchargement du navigateur
- Non, les images de fond CSS sont toujours ignorées dans le calcul du LCP
- Non, seules les balises img peuvent être candidates au LCP
Un élément doté d’une image de fond CSS peut être le candidat au LCP, mais ces images ne sont pas découvertes par le scanner de préchargement. Une balise
imgavecsrcsetest alors préférable.
À propos de l'auteur
Besoin d'un accompagnement SEO ?
Vous souhaitez identifier les images qui alourdissent vos pages et freinent votre LCP ?