Une carte de test gratuite au format 16:9 et 9:16 pour détecter les problèmes de rapport d'aspect et de recadrage sur les services OTT

Chaque plateforme OTT cache quelque part le même petit défaut discret : une image qui est presque parfaite.

Une affiche qui est un peu trop large, de quelques pour cent. Une bannière principale dont les bords sont coupés à l'écran d'un téléviseur. Une vignette qui s'affiche correctement sur un ordinateur portable, mais qui semble légèrement décalée sur un téléphone. Personne ne signale le problème, car personne ne peut mettre le doigt sur ce qui ne va pas : ça a juste l'air un peu bizarre.

La solution, ce n'est pas d'avoir un meilleur œil. C'est une image de test qui ne peut pas mentir.

Les défauts liés au format d’image passent inaperçus parce que la photographie les masque. Si l’on étire une photo de paysage de 4 %, le spectateur ne s’en rendra pas compte. En revanche, si l’on étire un visage, un logo ou un cercle de 4 %, tout le monde le remarquera.

C'est justement le principe même d'une carte de test. On place dans le cadre des formes dont la justesse est évidente, de sorte qu'un rendu erroné se remarque immédiatement au lieu de passer inaperçu.

Nous en avons créé un pour nos propres tests d'assurance qualité et nous le proposons gratuitement, car toutes les équipes de streaming en ont besoin et la plupart finissent par dessiner quelque chose de bien pire un vendredi après-midi.

Tout ce qui s'y trouve est un piège délibérément conçu pour un bug spécifique :

• Un cercle inscrit dans un carré, touchant ce dernier au niveau des quatre points verts. Un cercle n'est parfaitement rond que dans un seul rapport de largeur-hauteur. Si l'on rétrécit le cadre, il devient ovale et s'éloigne de deux des points.

• Des diagonales formant exactement un angle de 45 degrés. Tout changement d'échelle non uniforme modifie cet angle, et l'étiquette imprimée ne correspond plus à la ligne qu'elle désigne.

• Un damier composé de carrés parfaits. Les carrés se transforment en rectangles dès que les proportions ne sont plus respectées.

• Une ligne fine le long du bord réel, des crochets d'angle sur les pixels d'angle et quatre étiquettes « EDGE ». Si l'un de ces éléments manque, cela signifie que l'image est rognée.

• Une règle de 0 à 100 % sur les quatre côtés. Si elle commence après 0 ou s'arrête avant 100, il s'agit d'un recadrage ou d'un zoom.

Pas de mesure, pas de superposition, pas de fichier de référence. Si le cercle est bien rond et que vous pouvez distinguer les quatre bords, le rendu est correct.

Voici la même image sous quatre formes différentes. Seule la première s'affiche correctement.

Il convient de distinguer ces deux types de défaillances, car leurs causes et leurs solutions sont différentes.

Écrasé ou étiré Cela signifie que quelque chose a forcé l'image à s'insérer dans un espace dont la forme ne correspondait pas : une largeur et une hauteur fixes définies en CSS, ou un mode de mise à l'échelle qui remplit l'espace plutôt que d'ajuster l'image. Le cercle se transforme alors en ovale.

Recadré ou agrandi Cela signifie que le rapport a été conservé, mais que l'image a dépassé les limites de son cadre. Remarquez que le cercle reste parfaitement rond dans l'exemple recadré. C'est là que réside le piège : le recadrage ne déforme rien, il se contente simplement de supprimer discrètement les bords. Sans repères de bord, vous ne vous en rendriez jamais compte.

Le format 16:9 s'impose généralement, car tout est conçu pour lui. C'est en format vertical que les éléments visuels posent problème : Reels, Shorts, visuels phares pour mobile, écrans de verrouillage des téléphones. C'est pourquoi la carte est également disponible au format 9:16.

Un élément au format 9:16 inséré dans un emplacement 16:9 en mode « remplissage » perd environ un tiers de sa hauteur. La carte le montre clairement en une seconde, sans laisser place au débat.

Utilisation libre, aucune mention de la source requise. Formats PNG, dimensions exactes en pixels, versions claire et foncée :

• 16:9 (format paysage), 1920 x 1080 - clair et foncé

• 9 h 16, format portrait, 1 080 x 1 920 - clair et foncé

• Fiches de référence sur les modes de défaillance pour les deux ratios

Format 16:9 (1920 x 1080) · 16:9 sombre · 9 h 16, luminosité (1 080 x 1 920) · 9 h 16, il fait nuit

Pour le test lui-même, utilisez le format PNG plutôt que JPEG. La compression JPEG peut atténuer suffisamment la ligne de contour de deux pixels pour qu'elle semble disparaître aux petites tailles, ce qui vous amènerait à chercher un bug de recadrage qui n'existe pas.

• Intégrez-le dans le flux de production réel, pas sur un ordinateur de bureau. Téléchargez-le en tant qu'élément graphique sur un titre de test afin qu'il passe par votre outil de redimensionnement, les transformations de votre CDN et la mise en page de votre application : c'est là que se trouve le bug.

• Testez-la sur de vrais appareils. Une application TV, un téléphone, une tablette et le lecteur Web présenteront chacun des dysfonctionnements différents.

• Prenez une photo ou faites une capture d'écran du résultat, puis comparez-le à la liste de contrôle imprimée sur la fiche.

• Conservez le titre du test tel quel. Il servira de « canari de régression » permanent : la prochaine fois que quelqu’un modifiera un mode d’échelle, vous le remarquerez immédiatement.

Vodlix est une plateforme OTT en marque blanche, ce qui signifie que toutes les images qui y figurent appartiennent à des tiers : les affiches de nos clients, leur identité visuelle, leurs vignettes. Une erreur de géométrie n'est pas un simple problème esthétique : cela revient à endommager leurs créations graphiques.

Cette fiche fait donc partie de notre propre processus d'assurance qualité. Nous la publions car ce problème ne nous est pas propre.