# Arrière-plan d’en-tête de site : des dégradés riches et rapides [Canonical HTML page](https://gradiently.design/fr/guide/website-hero-background) L’en-tête est l’endroit où un site fait sa première impression, et celui où il ralentit le plus souvent. Un en-tête en dégradé peut être à la fois l’élément le plus riche et le plus léger de la page, si on le construit bien. ## The short version - 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. 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](https://gradiently.design/fr/guide/css-gradient-performance) et [les vidéos en arrière-plan de site](https://gradiently.design/fr/guide/video-background-website). ## 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 | Commencez en haut et ne descendez que si la création a vraiment besoin de ce qu’apporte l’option suivante. 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](https://web.dev/articles/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. ```css .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; } ``` Un en-tête CSS en couches : deux lueurs sur un dégradé de base, avec une couleur unie de secours. Il pèse quelques centaines d’octets et remplit n’importe quel écran. Lueur d’en-tête, en une seule couche: `radial-gradient(ellipse 60% 50% at 78% 18%, #e0629a 0%, #6b2f9a 45%, #1b1240 100%)` La lueur rose et le fond violet profond du code ci-dessus, dessinés en un seul dégradé radial pour en montrer l’ambiance. 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](https://gradiently.design/fr/guide/css-noise-texture) montre comment faire. Pour une couleur plus riche à plusieurs points, [les dégradés maillés en CSS](https://gradiently.design/fr/guide/css-mesh-gradient) 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. ```html ``` Une image d’en-tête adaptative : les formats modernes d’abord, des dimensions explicites pour éviter les décalages de mise en page, `fetchpriority="high"` et pas de `loading="lazy"`. Le texte alternatif vide la signale comme décorative. > **Ne chargez jamais l’en-tête en différé** `loading="lazy"` retarde les images jusqu’à ce qu’elles approchent de la zone visible. L’en-tête s’y trouve déjà : le charger en différé ne fait que retarder l’apparition du contenu principal de la page. ## 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 Le même en-tête sous trois formes. Les dégradés s’adaptent d’eux-mêmes ; les images demandent un point focal choisi ou un recadrage séparé pour les téléphones. 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é](https://gradiently.design/fr/guide/text-on-gradient) détaille la méthode, et [texte sur une image](https://gradiently.design/fr/guide/text-over-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](https://gradiently.design/fr/guide/open-graph-image-size), afin que les liens partagés ressemblent à la page. ## FAQ ### 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.