Le fond, c’est la vidéo qui tourne derrière le titre de votre page d’accueil : la première chose qu’on voit, avant d’avoir lu un mot. Dans l’atelier, il ne sort pas d’une banque d’images que d’autres sites utilisent déjà. Vous décrivez la scène, un fournil, une salle, un atelier, et l’atelier la tourne pour vous. Elle est créée d’après votre description : elle ressemble à votre lieu sans en être une prise de vue.
Ces cinq fonds ont été tournés par l’atelier pour de vrais métiers, et sont montrés sans retouche.
Décrire la scène
Une bonne description tient en trois ou quatre phrases, et répond à quatre questions.
- Où sommes-nous ? Le lieu, la matière, l’époque : « un fournil en pierre, avant l’aube », plutôt que « une boulangerie ».
- Quelle lumière ? Chaude ou froide, rasante ou franche, une seule source ou plusieurs. C’est elle qui donne l’ambiance, bien plus que le décor.
- Qu’est-ce qui bouge ? Une seule chose, lentement : la porte du four qui s’ouvre, la vapeur, une main qui farine le plan de travail. Un fond qui bouge partout fatigue l’œil et se bat avec le titre.
- Où se pose le titre ? Gardez une zone calme, souvent à gauche ou en bas, là où le texte viendra se poser.
Deux pièges à éviter : demander du texte dans l’image (les modèles vidéo l’écrivent mal, et le vrai titre est posé par-dessus de toute façon), et des visages en gros plan, qui attirent tout le regard et vieillissent vite.
Cinq façons de faire bouger le fond
- Vidéo en boucle : la vidéo tourne pendant que les sections montent au défilement. Simple et robuste, c’est le choix par défaut.
- Vidéo de hero : elle n’existe que sur le premier écran, puis laisse la place à la page. Le meilleur rapport entre l’effet et le risque.
- Vidéo au défilement : les images avancent avec la molette ou le doigt, comme un film qu’on déroule. La plus spectaculaire, et la plus lourde.
- Séquence : le fond change de scène à mesure qu’on descend.
- Révélateur : deux images superposées, et la souris perce celle du dessus. Au doigt, sur un téléphone, l’image du dessous reste simplement à l’écran.
Sans vidéo, la bibliothèque propose aussi une image fixe et une bande d’images qui glisse toute seule.
Ce que ça coûte
Le fond fait partie du prix de votre site : il ne se facture pas comme une vidéo à part. Son rendu, plus ou moins fin, et sa façon de bouger font varier ce prix ; vous le voyez avant de lancer le tournage, et un tournage qui échoue vous est rendu.
Un site entier, avec ses textes, son fond et quatre images, revient à 31 à 70 $, du rendu le plus sobre au plus spectaculaire. Il n’y a pas d’abonnement. Pour chiffrer le vôtre, le calculateur donne le total.
Un fond qui ne ralentit pas la page
Une vidéo mal préparée peut peser des dizaines de mégaoctets et retarder tout le reste. Avant d’être posé sur votre page, chaque fond est retravaillé :
- réencodé en H.264, à 1 920 pixels de large : plus large, il pèserait deux fois plus sans rien gagner à l’œil ;
- sans piste son, parce qu’un fond n’en a pas besoin, et que les navigateurs ne lancent d’eux-mêmes, en règle générale, qu’une vidéo muette : Chrome l’autorise toujours, et Safari sur iPhone dès qu’elle est muette ou sans son ;
- préparé pour la lecture immédiate : le début du fichier suffit pour démarrer, sans attendre la fin du téléchargement ;
- accompagné de son affiche, une image tirée du film qui s’affiche tout de suite, le temps que la vidéo arrive.
L’affiche compte aussi pour la vitesse que Google mesure. Pour une vidéo, le Largest Contentful Paint, le temps d’affichage du plus grand élément de l’écran, retient le plus tôt des deux moments : l’affiche chargée, ou la première image du film. Il est jugé bon sous 2,5 secondes.
La vidéo au défilement est découpée en images WebP plutôt que lue comme une vidéo : c’est ce qui la garde fluide, dans un sens comme dans l’autre.
Enfin, si le visiteur a demandé à son système de réduire les animations (un réglage de Windows, d’iOS et d’Android, que les navigateurs transmettent aux pages), la vidéo s’efface et l’affiche reste : la page est complète, et calme.