Background-image, srcset et vitesse site mobile

[mat321$]

hello,

Une petite question que je pose : j'utilise astroid framework ou il y a pas mal de modules intéressant.

Je m'apercois que souvent ces modules utilisent la propriété css background-image lorsque qu'il y a une image derriere le contenu (ou a cote parfois).
En regardant d'autres site sur wordpress, webflow, je m'apercois que c'est aussi le cas.

C'est pratique mais ca pose un pb : impossible d'utiliser la fonction srcset pour distribuer differentes taille d'image en fonction du support.
Sur ordi/ grand ecran c'est pas tres grave mais pour mobile ca ralentit pas mal les performances de chargement, de maniere assez importante parfois/

Je demandai deux choses :

1. Pk cette propriété est tant utilise connaissant ce pb qui me parait assez important vu l'importance de l'utilisation mobile de nos jours !
C'est byzarre qu'il n'y ai pas de solution native au language non ?

2. avez vous des solutions pour améliorer mis a part refaire certains modules soit memes en html direct sans cette propriete ?

Merci de vos retours !

[daneel]

Bonjour,

L'utilisation de background-image en CSS est effectivement très répandue, notamment dans les frameworks comme Astroid ou dans d'autres systèmes. Cette propriété permet d'ajouter une image en arrière-plan d'un élément, souvent à des fins esthétiques, comme un motif ou une illustration couvrant tout un bloc (par exemple, un en-tête incluant le menu et le titre d’un article).

Pourquoi background-image est-il autant utilisé malgré l'absence de srcset ?

L’intérêt principal de background-image réside dans sa flexibilité :

• Il permet d’ajouter des images en arrière-plan sans impacter la structure HTML.
• Il est utilisé pour des effets esthétiques avancés, comme le parallax, qui apporte une touche professionnelle.
• Avec les media queries, il est possible d'afficher une image différente selon la taille de l’écran (ex. : une image au format paysage sur desktop et une version portrait sur mobile).
• Il est très utilisé pour les bannières, où l’image en arrière-plan laisse place à un texte dynamique qui s’adapte au responsive.

Cependant, tu soulignes un point important : l’absence de srcset limite la capacité à charger des images optimisées pour chaque écran. Cela peut impacter les performances, surtout sur mobile.

Quelles solutions pour améliorer cela ?

Si le besoin est d'afficher une image de contenu plutôt qu'un simple fond décoratif, il est préférable d'utiliser une balise <img> avec srcset, qui adaptera l’image à la résolution de l’écran.
Donc d'intégrer l'image directement dans le module ou dans l'article....

1. Éviter d'utiliser background-image pour des images importantes : Si l’image a un rôle informatif (et non décoratif), il vaut mieux la placer directement dans le HTML avec <img>.
2. Utiliser des media queries : Même si srcset n’est pas disponible en CSS, il est possible de définir différentes images de fond en fonction des écrans via @media.

Astuce : optimiser avec du SVG

Pour ajouter un peu plus de dynamisme et optimiser les performances, l’utilisation de fichiers SVG en fond est une excellente alternative.

• Adaptabilité : Les SVG sont vectoriels, donc parfaitement scalables pour s’adapter aux différents écrans (desktop, tablette, smartphone).
• Optimisation du chargement : Leur poids est souvent bien plus faible qu’une image raster (JPG, PNG).
• Animations avancées : Il est possible d’animer un SVG avec CSS ou JavaScript pour des effets complexes.
• Définition optimale : Contrairement aux images bitmap, il n’y a aucune perte de qualité, quelle que soit la résolution de l’écran.

Par exemple sous Joomla, j’utilise des motifs SVG en background pour embellir des icônes Font Awesome ou encore des formes SVG en transition entre deux modules (comme un effet de vague).

En résumé et d'un avis personnel, il ne faut pas confondre images de fond et images de contenu.
Une image décorative peut utiliser background-image, tandis qu’une image destinée au contenu doit plutôt être intégrée en HTML avec srcset pour garantir un affichage optimisé et performant sur mobile.

[woluweb]

si tu ne veux pas les images en "background" tu peux utiliser CSS Grid (pour quand même pouvoir facilement superposer et mettre du texte "devant" l'image p ex).
vois l'exemple ici : https://codepen.io/woluweb/pen/jOYLrNb
et plus d'infos sur css grid ici : https://slides.woluweb.be/cssgrid/

[mat321$]

super merci. Oui j'avasi une ou deux solution pour moi meme en html mais quand j'utilise des modules préfabriqué je l'ai dans l'os !!

Merci pour ces retours intéressant !!

[daneel]

si tu ne veux pas les images en "background" tu peux utiliser CSS Grid (pour quand même pouvoir facilement superposer et mettre du texte "devant" l'image p ex).
vois l'exemple ici : https://codepen.io/woluweb/pen/jOYLrNb
et plus d'infos sur css grid ici : https://slides.woluweb.be/cssgrid/

woluweb C'est une utilisation intelligente de css grid ! Je conseille juste d'utiliser z-index avec parcimonie et préférer une hiérarchie CSS claire plutôt que des valeurs excessives. Chaque changement de z-index peut forcer le navigateur à recalculer la hiérarchie de rendu, surtout si l'élément est animé. Les éléments avec un z-index élevé sont souvent placés dans des couches de composition spécifiques, ce qui peut parfois entraîner des ralentissements et un impact sur la "paint phase".

Bref, c'est bien mais il ne faut pas en abuser.