VKT Toolkit · 11 septembre 2026 · 9 min de lectureComment capturer une page défilante dans Chrome — Quand le chargement différé et le défilement infini cassent tout
Vous appuyez sur le bouton de capture. L'outil défile vers le bas, capture quelques viewports et les assemble. Le résultat : le tiers supérieur est correct, le milieu est des rectangles blancs vides là où les images devraient être, et la moitié manque entièrement parce que la page continuait à charger du nouveau contenu pendant que l'outil défilait. Cela vous dit quelque chose ?
Les pages web modernes ne sont pas des documents statiques. Elles chargent les images au défilement (chargement différé), ajoutent du nouveau contenu en bas (défilement infini), fixent les en-têtes et barres de navigation au viewport (position: fixed), et parfois bloquent le clic droit ou la sélection entièrement. Un outil de capture qui défile aveuglément et saisit des pixels échouera sur ces pages. Ce guide explique pourquoi ça échoue et comment capturer correctement ces pages.
Pourquoi les outils de capture classiques échouent sur les pages modernes
Il y a trois problèmes distincts, et la plupart des outils n'en résolvent qu'un seul :
| Problème | Ce qui se passe | Quelles pages |
|---|---|---|
| Chargement différé | Les images et le contenu sous le viewport ne sont pas encore chargés. La capture saisit des espaces réservés vides ou des rectangles blancs. | La plupart des sites web modernes — sites d'actualités, e-commerce, blogs, documentation |
| Défilement infini | Pendant que l'outil défile, la page continue d'ajouter du contenu. La capture n'atteint jamais le « bas » parce qu'il n'y en a pas — ou saisit un instantané en cours de chargement avec des cartes à moitié rendues. | Twitter, Instagram, Reddit, Pinterest, la plupart des flux sociaux |
| Éléments fixes | Les en-têtes fixes, barres de navigation, widgets de chat et bannières de cookies se superposent au contenu dans chaque tranche de viewport, créant des doublons disgracieux dans l'image assemblée finale. | Presque tous les sites modernes |
Un outil qui se contente de défiler et de saisir des pixels produira une image avec des sections vides, des en-têtes dupliqués et du contenu manquant. La solution nécessite que l'outil interagisse activement avec la page — déclencher les chargements différés, attendre le rendu du contenu et gérer les éléments fixes.
L'approche correcte : Défiler, attendre, capturer
Un outil de capture défilante correct ne se contente pas de défiler et de saisir des pixels. Il suit une boucle en trois étapes pour chaque hauteur de viewport de la page :
- Défiler vers la section suivante ;
- Attendre que le navigateur ait fini de charger — images, polices, contenu dynamique. Un bon outil surveille que le réseau se stabilise et que la mise en page se fige avant de capturer ;
- Capturer cette tranche de viewport, puis passer à la suivante.
Après que toutes les tranches ont été capturées, l'outil les assemble en une seule image, supprimant les zones qui se chevauchent (comme l'en-tête sticky qui apparaît dans chaque tranche) et dédoublonnant les éléments fixes.
C'est exactement ce que fait VKT PageShot. Sa capture pleine page défile progressivement, attend que le contenu à chargement différé se rende dans chaque section et assemble le résultat en une image nette et complète — pas de rectangles vides, pas d'en-têtes dupliqués.
Comment capturer une page à chargement différé (étape par étape)
Scénario : Vous voulez capturer un catalogue produit entier, un article d'actualités ou une page de documentation qui charge des images au défilement.
- Ouvrez la page et attendez que le contenu initial au-dessus de la ligne de pliage se charge entièrement (images, polices, mise en page) ;
- Cliquez sur l'icône PageShot dans votre barre d'outils ;
- Sélectionnez « Pleine page » comme mode de capture ;
- PageShot défile automatiquement. À chaque hauteur de viewport, il s'arrête et attend que les images à chargement différé finissent de s'afficher avant de capturer cette tranche. Vous pouvez suivre l'indicateur de progression ;
- Une fois terminé, l'image pleine page s'ouvre dans l'éditeur d'aperçu de PageShot. Chaque image, chaque section — capturée comme si toute la page était imprimée sur une seule longue feuille ;
- Sauvegardez en PNG, JPG, ou copiez dans le presse-papiers. Ou exportez en PDF pour l'archivage.
C'est tout. Pas de défilement manuel, pas de rectangles vides, pas d'assemblage à la main.
Comment capturer une page à défilement infini (Twitter, Instagram, Reddit)
Les pages à défilement infini n'ont pas de fin naturelle — la page continue de charger du contenu quand vous approchez du bas. Cela signifie que vous devez décider à l'avance combien vous voulez capturer, puis le précharger.
La stratégie :
- Défilez d'abord manuellement. Chargez autant de contenu que vous voulez capturer. Pour un fil Twitter, défilez jusqu'au dernier tweet souhaité. Pour une section de commentaires Reddit, défilez jusqu'aux commentaires qui vous intéressent. Chaque défilement déclenche le chargement de plus de contenu ;
- Arrêtez de défiler et attendez quelques secondes que le dernier lot de contenu finisse de s'afficher ;
- Utilisez maintenant la capture pleine page de PageShot. Elle capturera tout ce qui a été chargé — du haut de la page jusqu'où vous avez arrêté de défiler. Puisque le contenu est déjà chargé, il n'y a rien à charger en différé et rien à manquer ;
- Sauvegardez ou exportez.
Nuance importante : les pages à défilement infini peuvent être extrêmement longues une fois beaucoup de contenu chargé. Un fil Twitter avec 200 tweets peut facilement faire plus de 50 000 pixels de haut. PageShot gère très bien les très longues pages, mais le fichier image résultant sera volumineux (5–15 Mo). Si vous n'avez besoin que d'une section, utilisez plutôt le mode Zone visible ou Sélection.
Comment capturer les pages avec en-têtes sticky (sans doublons)
Presque tous les sites web modernes ont une barre de navigation sticky — l'en-tête qui reste en haut de l'écran pendant le défilement. Quand un outil de capture saisit des tranches de viewport et les assemble, cet en-tête apparaît dans chaque tranche, résultant en une image finale avec la même barre de navigation répétée tous les 800 pixels.
La solution : un algorithme d'assemblage intelligent détecte les éléments en position: fixed ou position: sticky et ne les conserve qu'une seule fois — dans la première tranche de viewport. Chaque tranche suivante a la zone sticky supprimée avant l'assemblage.
PageShot fait cela automatiquement. Pas besoin de configurer quoi que ce soit. L'en-tête sticky apparaît une fois en haut de l'image finale, et chaque autre section ne montre que le contenu défilable en dessous.
Si vous utilisez un autre outil qui ne gère pas les éléments sticky, vous avez deux solutions de contournement :
- Substitution CSS : Ouvrez DevTools (F12), trouvez l'élément sticky et définissez
position: static !important;dans le panneau Styles. Cela force l'en-tête à défiler normalement. Puis prenez votre capture. N'oubliez pas d'annuler le changement après ; - Imprimer en PDF :
Ctrl+P→ Enregistrer en PDF. La mise en page d'impression supprime généralement les éléments sticky. Puis convertissez le PDF en image si nécessaire.
Comment capturer les pages qui bloquent les captures
Certains sites — notamment les plateformes de streaming, les portails d'examens en ligne et le contenu protégé par DRM — tentent de bloquer les captures. L'approche dépend du type de blocage utilisé :
- Blocage du clic droit / menu contextuel : Cela ne bloque pas réellement les captures. Utilisez l'icône de l'extension dans votre barre d'outils, pas le menu contextuel. PageShot capture via le bouton de la barre d'outils et les raccourcis clavier, contournant entièrement les blocages de menu contextuel ;
- Écouteurs d'événements JavaScript : Certains sites écoutent les événements clavier (Print Screen, Ctrl+Shift+S) et les suppriment. PageShot utilise les API Chrome
activeTabettabs, qui opèrent à un niveau que le JavaScript de la page ne peut pas intercepter ; - DRM / Encrypted Media Extensions : Les services de streaming (Netflix, Disney+) utilisent un DRM au niveau matériel. Les captures de contenu vidéo protégé par DRM apparaîtront sous forme d'un rectangle noir. C'est une restriction au niveau du navigateur qu'aucune extension ne peut contourner — et tenter de le faire pourrait violer les conditions d'utilisation du site.
Pour les deux premiers cas, PageShot fonctionne sans configuration spéciale. Pour le contenu DRM, aucun outil de capture n'aidera — c'est voulu.
Capturer de longues pages sur mobile (via Chrome desktop)
Si vous devez capturer la version mobile d'un site web — la mise en page responsive que les téléphones voient — vous pouvez la simuler dans les DevTools de Chrome sur ordinateur :
- Appuyez sur
F12pour ouvrir DevTools ; - Cliquez sur le bouton Toggle Device Toolbar (icône téléphone, ou
Ctrl+Shift+M) ; - Sélectionnez un appareil mobile dans le menu déroulant (par ex. iPhone 14 Pro, Pixel 7) ;
- Naviguez vers votre page. La mise en page mobile se chargera ;
- Utilisez la capture pleine page de PageShot normalement. Elle capturera la mise en page responsive mobile.
C'est utile pour archiver des mises en page spécifiques au mobile, tester le design responsive ou capturer du contenu qui s'affiche différemment sur les téléphones.
Comparaison : 4 façons de capturer une page défilante
| Méthode | Gère le chargement différé | Gère le défilement infini | Supprime les en-têtes sticky | Sauvegarde en PDF | Coût |
|---|---|---|---|---|---|
| VKT PageShot | ✓ attend chaque section | ✓ capture tout le contenu chargé | ✓ automatique | ✓ intégré | Gratuit |
| Chrome DevTools | Partiel — peut manquer le contenu différé | ✗ ne capture que le premier chargement | ✗ duplique les en-têtes | ✗ PNG uniquement | Gratuit (intégré) |
| Imprimer en PDF (Ctrl+P) | ✓ le navigateur rend tout | ✗ contenu chargé uniquement | ✓ supprimé à l'impression | ✓ natif | Gratuit (intégré) |
| GoFullPage | ✓ attend le chargement | ✓ capture le contenu chargé | ✓ gère les éléments sticky | ✓ export | Gratuit ; Premium variable |
Chaque méthode a son utilité. DevTools est rapide pour une saisie ponctuelle. Imprimer en PDF est le plus simple quand vous avez besoin d'un PDF. GoFullPage est une alternative solide. Et PageShot combine défilement-attente-capture, suppression des en-têtes sticky, annotation et export PDF dans un seul outil.
Dépannage : Problèmes courants de capture défilante
Des rectangles vides là où les images devraient être
L'outil de capture a défilé avant que les images ne se chargent. Solution : utilisez un outil qui attend chaque section (PageShot fait cela). Si vous utilisez DevTools, essayez de défiler manuellement jusqu'en bas d'abord pour tout précharger, puis capturez.
La capture s'arrête trop tôt — le bas de la page manque
L'outil pense avoir atteint le bas, mais la page a encore du contenu. Cela arrive souvent avec les pages qui utilisent overflow: hidden sur le body mais défilent sur un conteneur enfant. PageShot détecte l'élément réellement défilable, pas seulement le body.
En-têtes et barres de navigation dupliqués
L'outil ne supprime pas les éléments sticky/fixed pendant l'assemblage. Utilisez PageShot (suppression sticky automatique) ou définissez manuellement l'élément sticky en position: static dans DevTools avant la capture.
La page charge du nouveau contenu en cours de capture, créant une incohérence
Certaines pages dynamiques (tableaux de bord en direct, flux en temps réel) changent de contenu pendant la capture. Solution : mettez en pause tout rafraîchissement automatique ou mise à jour en temps réel avant la capture, ou utilisez une capture à viewport unique au lieu de la pleine page.
PageShot est gratuit — capture pleine page, zone visible, sélection, annotation, flou mosaïque et export PDF. Sans filigrane, sans upload, 100% local. Installez depuis le Chrome Web Store ou Edge Add-ons.
Questions fréquentes
Pourquoi ma capture pleine page a-t-elle des sections vides ?
Les sections vides sont causées par le chargement différé — la page ne charge les images et le contenu que lorsqu'ils entrent dans le viewport. Si l'outil de capture défile trop vite ou ne déclenche pas l'observateur de chargement différé, le contenu ne s'affiche jamais. PageShot résout ce problème en défilant progressivement, en attendant que chaque section se charge avant de capturer.
Puis-je capturer une page à défilement infini comme Twitter ou Instagram ?
Oui, avec une nuance : les pages à défilement infini n'ont pas de fin naturelle, vous devez donc décider combien capturer. Faites d'abord défiler manuellement pour charger le contenu souhaité, puis utilisez la capture pleine page de PageShot. Elle capturera tout ce qui a été chargé — pas seulement ce qui est visible à l'écran.
Une capture défilante capturera-t-elle les vidéos intégrées et les animations ?
La capture saisit l'état visuel actuel de chaque section. Les vidéos intégrées apparaîtront sous forme d'une seule image (l'affiche ou la position de lecture actuelle). Les animations CSS seront figées dans l'état où elles se trouvent au moment de la capture de cette section. Les éléments interactifs comme les carrousels afficheront la diapositive actuellement active.
Y a-t-il une limite de taille pour les captures pleine page ?
Chrome impose une limite de taille de canevas d'environ 16 384 pixels dans chaque dimension. Pour les pages extrêmement longues (des dizaines de milliers de pixels), certains outils tronquent ou divisent la sortie. PageShot gère cela en divisant automatiquement en plusieurs images lorsque la page dépasse la limite, sans rien perdre.
En résumé
Les pages web modernes ne sont pas statiques — elles chargent au défilement, ajoutent du contenu à la demande et fixent des éléments au viewport. Un outil de capture qui les traite comme des documents statiques produira des images cassées. La solution est un outil qui défile avec patience : attendre chaque section, gérer les éléments sticky et assembler proprement. C'est ce que fait PageShot, et il le fait gratuitement.
Plus de guides dans le blog VKT ; questions à [email protected].