L’essentiel en bref
- L’arrière-plan d’en-tête est l’image, le dégradé ou la vidéo derrière la première section d’une page web, et c’est souvent l’élément qui décide de la rapidité ressentie de la page.
- Les dégradés en CSS pur n’ajoutent presque rien au téléchargement et s’adaptent parfaitement à tous les écrans, ce qui en fait l’arrière-plan d’en-tête le plus rapide.
- Un en-tête en image doit partir d’un master de 1920 sur 1080, utiliser des formats modernes comme AVIF ou WebP et des tailles adaptatives, et ne jamais être chargé en différé.
- Un en-tête vidéo a besoin d’une image poster, d’une lecture automatique muette dans la page et d’une alternative fixe pour les personnes qui préfèrent moins d’animations.
- Quel que soit le fond, le titre a besoin d’une zone calme et bien contrastée sur toutes les tailles d’écran.
Sur cette page
Un arrière-plan d’en-tête (ou fond de section hero) est le dégradé, l’image ou la vidéo derrière la première section d’une page web. Il donne le ton de tout le site, et comme c’est le plus grand élément visible à l’ouverture de la page, il décide souvent de la rapidité ressentie. L’option la plus rapide est un dégradé en CSS pur, qui se télécharge sous forme de quelques lignes de texte et reste net à toutes les tailles. Les images et la vidéo peuvent paraître plus riches, mais demandent de soigner les tailles, les formats et le chargement, comme expliqué ci-dessous.
Ce guide compare les trois approches, puis traite les tailles, les recadrages adaptatifs, le code et le contraste du titre. Pour le détail des performances, lisez les performances des dégradés CSS et les vidéos en arrière-plan de site.
CSS, image ou vidéo : choisir un arrière-plan d’en-tête
| Approche | Poids à télécharger | Rendu | Idéal pour |
|---|---|---|---|
| Dégradé CSS | Presque rien : fait partie de votre feuille de style | Couleur lisse, lueurs, maillages doux | Sites rapides, pages produit, marques fondées sur la couleur |
| Image (AVIF, WebP, JPEG) | Modéré : selon la taille et le format | Tout : texture, photographie, grain | Matières riches, photos, visuels complexes |
| Vidéo | Lourd : en général le plus gros fichier de la page | Mouvement, profondeur, atmosphère | Lancements et marques où le mouvement est l’essentiel |
| WebGL ou canvas | Script plus coût de rendu | Couleur vivante et interactive | Pages vitrines disposant du budget de performance nécessaire |
L’en-tête contient en général le Largest Contentful Paint de la page, le moment où le contenu principal apparaît. web.dev considère un LCP de 2,5 secondes ou moins comme bon. Une image ou une vidéo d’en-tête lourde est la raison la plus fréquente pour laquelle une page manque cet objectif : l’option la plus légère qui obtient le rendu voulu est presque toujours la bonne.
Construire un en-tête en dégradé CSS
Superposer deux ou trois dégradés mène étonnamment loin : un dégradé linéaire de base pour la direction générale, puis des lueurs radiales douces pour la lumière. Faites le fondu en OKLCH pour garder des couleurs vives. Le résultat s’affiche instantanément et n’a jamais besoin d’un fichier plus lourd pour les grands écrans.
.hero {
min-height: min(92svh, 900px);
display: grid;
place-items: center;
padding: clamp(4rem, 10vw, 8rem) 1.5rem;
color: #fbf8ff;
background-color: #1b1240; /* fallback while gradients paint */
background-image:
radial-gradient(ellipse 60% 50% at 78% 18%, oklch(0.72 0.19 350 / 0.75), transparent 70%),
radial-gradient(ellipse 55% 45% at 15% 85%, oklch(0.62 0.17 250 / 0.7), transparent 70%),
linear-gradient(160deg in oklch, #1b1240, #3a1d78 55%, #120c2c);
}
.hero h1 {
max-width: 16ch;
font-size: clamp(2.75rem, 6vw, 5.5rem);
line-height: 1.04;
text-align: center;
text-wrap: balance;
}radial-gradient(ellipse 60% 50% at 78% 18%, #e0629a 0%, #6b2f9a 45%, #1b1240 100%)Pour éviter qu’un en-tête CSS ressemble à un préréglage générique, ajoutez de la texture. Une fine couche de bruit SVG sur le dégradé masque les bandes sur les grands écrans et donne à la couleur un aspect de matière ; la texture de bruit en CSS montre comment faire. Pour une couleur plus riche à plusieurs points, les dégradés maillés en CSS superposent davantage de lueurs.
Taille et formats d’une image d’en-tête
Si l’en-tête a besoin d’une image, créez un master de 1920 sur 1080 et exportez des versions plus petites pour les petits écrans. Servez des formats modernes : AVIF et WebP sont en général bien plus légers que le JPEG à qualité visuelle égale, avec le JPEG en secours. Chargez l’en-tête immédiatement et indiquez au navigateur qu’il est important.
<picture>
<source type="image/avif"
srcset="/hero-960.avif 960w, /hero-1440.avif 1440w, /hero-1920.avif 1920w"
sizes="100vw">
<source type="image/webp"
srcset="/hero-960.webp 960w, /hero-1440.webp 1440w, /hero-1920.webp 1920w"
sizes="100vw">
<img src="/hero-1920.jpg"
alt=""
width="1920" height="1080"
fetchpriority="high"
decoding="async"
class="hero-bg">
</picture>fetchpriority="high" et pas de loading="lazy". Le texte alternatif vide la signale comme décorative.Recadrages adaptatifs pour un arrière-plan d’en-tête
Sur un téléphone, un en-tête en 16:9 devient une tranche haute et étroite. Avec object-fit: cover, le navigateur recadre par défaut depuis le centre, ce qui peut couper la partie importante. Réglez object-position pour garder la zone principale, ou servez un recadrage séparé, plus haut, pour les petits écrans grâce à un attribut media sur un source.
Ordinateur 16:9
1920 × 1080
Tablette, environ 4:3
1600 × 1200
Téléphone, vertical
1080 × 1920
C’est là que les dégradés CSS brillent : les lueurs sont positionnées en pourcentages et suivent la forme. Vous pouvez aussi changer les positions à un point de rupture, par exemple déplacer la lueur principale du coin supérieur droit sur ordinateur vers le haut au centre sur téléphone, là où le titre s’empile.
Le contraste du titre sur un arrière-plan d’en-tête
À éviter
- Un titre qui traverse la lueur la plus claire
- Un contraste vérifié uniquement sur ordinateur
- Un voile sombre sur toute l’image pour sauver le texte
- Un texte peu contrasté sur un dégradé de ton moyen
À faire
- Des lueurs placées loin du titre
- Un contraste vérifié à chaque point de rupture
- Un voile doux seulement là où sont les mots
- Un fond nettement sombre ou nettement clair derrière le texte
Vérifiez le contraste au point le plus clair derrière le titre, pas en moyenne, et visez au moins 4,5:1 pour le texte plus petit et 3:1 pour les grands titres. Du texte sur un dégradé détaille la méthode, et texte sur une image couvre les en-têtes photo.
Si vous concevez l’en-tête dans Gradiently, un Mark se dessine en direct en 1920 sur 1080 ou à toute taille personnalisée et place sa zone la plus calme derrière vos mots. Exportez en PNG ou JPEG jusqu’à trois fois la taille de la création pour des images nettes sur les écrans haute densité, ou une boucle de 5 à 30 secondes pour un en-tête vidéo. Gardez le même style pour votre image Open Graph, afin que les liens partagés ressemblent à la page.
Les questions qu’on nous pose
Quelle taille pour une image d’arrière-plan d’en-tête ?
Créez un master de 1920 sur 1080 et servez des versions plus petites aux petits écrans avec srcset. Utilisez AVIF ou WebP avec un JPEG de secours.
Un dégradé CSS est-il plus rapide qu’une image d’en-tête ?
Oui. Un dégradé CSS tient en quelques lignes dans votre feuille de style, sans rien de plus à télécharger, et reste net à toutes les tailles. Images et vidéos ajoutent des fichiers qui doivent se charger avant que l’en-tête paraisse terminé.
Faut-il charger l’image d’en-tête en différé ?
Non. L’en-tête est visible dès l’ouverture de la page : le charger en différé ne fait que le retarder. Chargez-le immédiatement, ajoutez fetchpriority="high" et indiquez sa largeur et sa hauteur.
Comment garder lisible le titre d’un en-tête ?
Éloignez les zones lumineuses des mots, n’utilisez un voile doux que derrière le titre si nécessaire, et vérifiez le contraste à chaque taille d’écran.
Écrit par Gradiently
L’équipe derrière Gradiently, un outil de création construit autour des Marks : des dégradés vivants qui donnent à tout ce que vous créez votre propre signature.
Voir notre profil
