Comment éviter les à-coups de la molette et les fréquences d’images irrégulières dans un enregistrement de défilement

Pourquoi l’enregistrement d’écran d’un site qui défile saccade, tremble ou perd des images, et la solution à chaque cause : la molette, l’enregistreur, l’écran et la page elle-même.

Aviral LakhanpaulMis à jour le 30 octobre 20264 min de lecture

La réponse courte

Un enregistrement de défilement saccadé a généralement l’une de ces cinq causes : une molette crantée qui fait avancer la page par paliers, un enregistreur qui écrit une fréquence d’images variable, une fréquence d’images trop basse pour un mouvement continu, un écran qui se rafraîchit à une autre fréquence que l’enregistrement, et une page trop lourde pour suivre. Faites défiler avec un script plutôt qu’avec la molette, enregistrez à 60 fps constants et préchargez la page. Ou générez la vidéo à partir de l’URL : chaque image y est calculée, aucune ne peut être perdue.

Trouvez d’abord la cause

Symptômes d’un enregistrement de défilement saccadé et leurs causes
Ce que vous voyez	Cause probable
La page avance par à-coups, avec de minuscules pauses entre eux	Une molette crantée, que le navigateur lisse un cran à la fois
La vitesse monte et retombe, jamais stable	Un geste rapide sur le trackpad, puis son inertie
Fluide à l’écran, saccadé dans le fichier ou le logiciel de montage	Un enregistrement à fréquence d’images variable
Un tremblement régulier, rythmé, sur les défilements rapides	Trop peu d’images par seconde, ou un décalage avec la fréquence de l’écran
Se fige un instant, puis saute en avant	La page ou la machine perd des images : images différées, scripts lourds, encodeur à la peine

1. La molette avance par paliers

Une molette de souris classique avance cran par cran, et chaque cran demande à la page de se déplacer d’une distance fixe. Les navigateurs lissent chaque palier avec une courte animation : un mouvement continu de la molette devient ainsi une suite de petites accélérations suivies d’arrêts. À l’écran, l’œil s’en accommode. Dans une vidéo lue sur un grand écran, cela se voit comme une saccade.

La meilleure solution : n’utilisez pas la molette. Laissez un script faire défiler la page à une vitesse fixe ; le guide du défilement automatique en propose un à copier.
Si vous devez faire défiler à la main : une molette à rotation libre ou un trackpad glissé lentement et régulièrement vaut mieux qu’une molette crantée, mais aucune main ne garde la même vitesse pendant vingt secondes.

2. L’enregistreur écrit une fréquence d’images variable

Beaucoup d’enregistreurs intégrés, dont la barre de capture d’écran de macOS et QuickTime, n’écrivent une image que lorsque quelque chose change à l’écran. Cela économise de la place, mais l’écart entre les images varie, et les logiciels de montage comme certains lecteurs le gèrent mal : des images sont dupliquées ou supprimées pour tenir dans une timeline fixe, et le défilement tremble.

Enregistrez avec un outil qui écrit une fréquence d’images constante, comme OBS Studio, réglé sur 60 fps.
Si vous avez déjà un fichier à fréquence variable, convertissez-le en fréquence constante avant le montage. L’option « Constant Framerate » de HandBrake s’en charge.

3. Trop peu d’images pour un mouvement continu

Un défilement déplace chaque pixel à chaque image. À 30 fps, chaque image saute deux fois plus loin qu’à 60, et sur les pages chargées en texte, l’œil voit les sauts. 24 fps, c’est la cadence du cinéma, et elle lui convient ; pour une page qui défile, quelle que soit la vitesse, c’est la moins fluide des trois.

Enregistrez et exportez à 60 fps quand le mouvement est l’essentiel. Ne descendez à 30 que pour alléger les fichiers, et ralentissez alors le défilement. La plupart des outils plafonnent le GIF à une cadence basse : gardez les défilements en GIF courts et doux.

4. L’écran et l’enregistrement ne sont pas synchronisés

Si votre écran se rafraîchit à 120 ou 144 Hz et que vous enregistrez à 60 fps, l’enregistreur garde environ une image sur deux, et sur un écran à fréquence variable, même pas de façon régulière. Régler l’écran sur 60 Hz pendant l’enregistrement donne à l’enregistreur une correspondance image pour image. Sur un Mac doté de ProMotion, ce réglage se trouve dans Moniteurs, Taux de rafraîchissement.

5. La page ne suit pas

Les images chargées à la demande sont décodées au moment où elles entrent dans le champ, et ce travail fait perdre des images. Faites défiler jusqu’en bas puis remontez avant d’enregistrer, pour que tout soit chargé.
Les pages avec de lourds scripts liés au défilement, des vidéos en fond ou des effets WebGL sollicitent fortement la machine. Fermez les autres applications et les autres onglets.
Enregistrer et encoder en même temps dispute le processeur à la page. Utilisez l’encodeur matériel de l’enregistreur s’il en a un.

La solution qui règle les cinq

Toutes les causes ci-dessus viennent de la capture d’un mouvement en temps réel sur un vrai écran. Un moteur de rendu ne fait ni l’un ni l’autre. Website Scroll Video lit la page une fois, attend les images et les polices, puis calcule où la page doit se trouver à chaque image et la dessine. Pas de molette qui avance par paliers, pas de fréquence d’écran à faire correspondre, pas d’échéance qu’une image pourrait manquer : la vidéo tient 24, 30 ou 60 fps fixes, quelles que soient la longueur et la lourdeur de la page.

Essayez avec votre propre site

Collez un lien et prévisualisez le défilement gratuitement. 51 crédits offerts à l’inscription, sans carte bancaire, et aucun filigrane sur ce que vous exportez.

Vos questions,
nos réponses

En bref, ce que l’on demande ensuite.

Contact

Pourquoi mon enregistrement d’écran d’un défilement est-il saccadé ?

En général parce qu’une molette fait avancer la page cran par cran, ou que l’enregistreur écrit une fréquence d’images variable. Faites défiler avec un script et enregistrez à 60 fps constants, ou générez la vidéo à partir de l’URL au lieu de l’enregistrer.

30 fps suffisent-ils pour une vidéo de défilement de site web ?

Oui pour les défilements lents et les petits fichiers. Pour tout ce qui va plus vite, 60 fps est nettement plus fluide, parce que chaque image déplace la page deux fois moins loin.

Comment corriger un enregistrement à fréquence d’images variable ?

Réencodez-le en fréquence constante avant le montage, par exemple avec le réglage Constant Framerate de HandBrake, ou réenregistrez avec un outil comme OBS qui écrit une fréquence constante.

Moins de temps à filmer. Plus de temps à créer.

Automatisez vos enregistrements de sites avec un mouvement personnalisable, des réglages intelligents et des options d’export pensées pour les créateurs d’aujourd’hui.

Essayer maintenant