Capture d'écran Retina, et pourquoi le texte d'un enregistrement devient flou

Une page web est mise en page en pixels CSS ; l'écran la dessine en pixels physiques. Le rapport entre les deux s'appelle le device pixel ratio : 1 sur un écran classique, 2 sur ce qu'Apple appelle Retina et le web HiDPI, 3 sur beaucoup de téléphones. À un rapport de 2, une page de 1280 pixels de large est dessinée avec 2560 pixels physiques : chaque lettre dispose de quatre fois plus de pixels pour dessiner sa forme.

Une capture Retina conserve ces pixels. Une capture au rapport 1 de la même page en jette les trois quarts, et aucune étape ultérieure ne les rendra. Tout est là : la netteté se décide à la capture, pas à l'export.

Si le format lui-même est nouveau pour vous, notre fiche qu'est-ce qu'un screencast pose les bases avant les pixels.

Nous avons traqué le texte flou dans beaucoup de rendus. Voici les causes trouvées, et ce que fait notre chaîne pour chacune.

La cinquième ligne surprend. Nous l'avons mesurée sur de vrais sites marketing : mis en page sur toute la largeur de 1920 pixels, un texte courant de 14 pixels occupait 1,3 % de la hauteur de l'image ; mis en page à 1280 pixels puis agrandi, le même texte en occupait 1,94 %, moitié plus grand, sans toucher au design desktop de la page. Un texte net mais trop petit reste illisible.

Chaque scène filmée produit deux choses, et elles ne sont pas interchangeables.

Un clip vidéo. Le navigateur enregistre la scène en direct : le curseur qui glisse, le clic, le défilement, la page qui répond. Cet enregistrement se fait à la taille de la fenêtre, 1280 pixels de large pour un film 16:9 et 414 pour un film 9:16. Nous avons essayé de demander à l'enregistreur la taille complète du film : il ne livre pas l'image Retina, il place la page dans un cadre plus grand avec des bandes. Comparé à la page telle qu'affichée, enregistrer à la taille de la fenêtre puis agrandir donne un SSIM de 0,93 ; enregistrer à la taille du film, 0,65 (0,89 contre 0,61 en vertical). Le clip est donc enregistré à la taille de la fenêtre et agrandi une seule fois, soigneusement, en 1920×1080 ou 1080×1920.

Une image Retina fixe. À la fin de l'action, curseur masqué, nous prenons une capture à pleine densité : 2× sur ordinateur, soit 2560 pixels de large avant de redescendre à 1920, et 3× dans la fenêtre de téléphone. Pour une scène de défilement, c'est la page entière. Cette image sert de vignette à la scène, de fond flouté derrière les scènes animées suivantes, et d'image de secours si le clip ne peut pas être découpé proprement. Comme elle contient plus de pixels que le cadre n'en montre, la caméra peut zoomer dedans sans perdre en netteté.

Les règles de caméra sont les mêmes pour les deux. Dans un film desktop, une scène qui vise une carte ou un bouton cadre dessus, jusqu'à environ 1,9× pour un élément de cette taille, puis reste immobile ; une section pleine largeur n'est pas zoomée, puisqu'elle remplit déjà le cadre. Un film vertical n'est jamais zoomé : la mise en page mobile occupe déjà toute la largeur, et un zoom la rognerait. Le détail des formats est dans notre guide du rapport d'aspect.

Certaines pages pardonnent un enregistrement mou : un titre de 60 pixels se lit à n'importe quelle qualité. HIBIKISHOP PC, non. C'est une base de prix de photocartes K-pop, et sa page est une grille de petites cartes avec, pour chacune, un groupe, un membre, un album et un prix de marché. Notre film de 44 secondes, en 16:9, s'ouvre sur « Still losing track of your K-Pop photocard prices? » puis enchaîne sur la recherche parmi 16 238 cartes par groupe, membre ou album, l'évolution quotidienne des prix tirés de Pocamarket, et une carte qui a pris 486 %.

Chacune de ces affirmations est un chiffre imprimé en petit sur la page. C'est exactement le cas pour lequel la capture Retina existe : si le spectateur ne peut pas lire la carte sous la narration, la narration lui demande de la croire sur parole. Deux choix portent une page comme celle-ci. La fenêtre de 1280 pixels fait arriver le texte de la grille plus grand à l'image qu'une mise en page pleine largeur. Et quand une scène vise une carte plutôt que toute la grille, la caméra a la place de cadrer dessus et de tenir, si bien que le prix se lit sur un téléphone.

Si vous filmez une page de ce type, visez à chaque scène une carte, une ligne ou un filtre, pas la grille entière. Une grille filmée de loin est une texture ; une carte filmée de près est un fait.

Si vous enregistrez votre écran vous-même, les mêmes règles s'appliquent.

Ou passez l'enregistrement : collez l'URL et nous filmons la page avec ces réglages déjà appliqués, en 10 minutes environ (voir transformer un site en vidéo). La capture Retina n'est pas une option payante : c'est ainsi que chaque film est fait, y compris le premier film gratuit de chaque site ; les formules sont sur la page tarifs. Les compromis de chaque méthode sont détaillés dans screencast automatisé ou manuel et dans PageToVid face aux enregistreurs d'écran.