Todas las plataformas OTT tienen en algún lugar ese mismo fallo oculto: una imagen que está casi bien.
Un póster que es un poco más ancho de lo que debería, un porcentaje. Un banner principal cuyos bordes se recortan en la televisión. Una miniatura que se ve bien en un portátil, pero que en el móvil parece ligeramente desajustada. Nadie abre un ticket, porque nadie puede señalar exactamente qué es lo que falla: simplemente parece que algo no encaja del todo.
La solución no es tener mejor vista. Es una imagen de prueba que no puede mentir.
Por qué «parece que está bien» no es una prueba
Los errores relacionados con la relación de aspecto pasan desapercibidos porque la fotografía los oculta. Si se alarga una imagen panorámica un cuatro por ciento, el espectador no se da cuenta. Sin embargo, si se alarga un rostro, un logotipo o un círculo un cuatro por ciento, todo el mundo lo nota.
Esa es precisamente la idea en la que se basa una tarjeta de prueba. Se colocan figuras en el encuadre cuya corrección es evidente, de modo que cualquier error de visualización se pone de manifiesto en lugar de pasar desapercibido.
La tarjeta de prueba Vodlix
Hemos creado uno para nuestro propio control de calidad y lo regalamos, porque todos los equipos de streaming lo necesitan y la mayoría acaba dibujando algo aún peor un viernes por la tarde.
Todo lo que hay en él es una trampa deliberada para un error concreto:
Un círculo inscrito en un cuadrado, que toca los cuatro puntos verdes. Un círculo solo es redondo con una determinada relación de aspecto. Si se estira el marco, se convierte en un óvalo y se aleja de dos de los puntos.
Diagonales a exactamente 45 grados. Cualquier cambio de escala no uniforme modifica el ángulo, y la etiqueta impresa deja de coincidir con la línea a la que apunta.
Un tablero de ajedrez formado por cuadrados perfectos. Los cuadrados se convierten en rectángulos en cuanto la proporción se altera.
Una línea muy fina a lo largo del borde real, corchetes en las esquinas en los píxeles de las esquinas y cuatro etiquetas «EDGE». Si falta alguno de ellos, significa que se está recortando el fotograma.
Una regla del 0 al 100 % a lo largo de los cuatro lados. Si empieza después del 0 o termina antes del 100, se trata de un recorte o de un zoom.
Sin mediciones, sin superposición, sin archivo de referencia. Si el círculo es redondo y se pueden leer los cuatro bordes, el renderizado es correcto.
Así es como se ve realmente un render defectuoso
Aquí tienes la misma imagen en cuatro versiones. Solo la primera se muestra correctamente.
Conviene distinguir entre estos dos fallos, ya que tienen causas y soluciones diferentes.
Aplastado o estirado significa que algo ha forzado la imagen a encajar en un espacio con una forma incorrecta: un ancho y una altura fijos en CSS, o un modo de escalado que rellena en lugar de ajustar. El círculo se convierte en un óvalo.
Recortada o ampliada significa que se ha conservado la proporción, pero que el fotograma se ha salido de su marco. Fíjate en que el círculo sigue siendo perfectamente redondo en el ejemplo recortado. Ahí está el truco: el recorte no distorsiona nada, simplemente elimina discretamente los bordes. Sin los marcadores de bordes, nunca te darías cuenta.
El formato vertical es más importante que el horizontal
El formato 16:9 suele ser el que mejor funciona, porque todo está diseñado para él. Es en el formato vertical donde los recursos se ven afectados: Reels, Shorts, imágenes principales para móviles y pantallas de bloqueo de los teléfonos. Por eso, la tarjeta también está disponible en 9:16.
Un recurso de 9:16 insertado en un espacio de 16:9 con el modo de escala de relleno pierde aproximadamente un tercio de su altura. La tarjeta lo deja claro en un segundo, sin necesidad de discusiones.
Descargar
De uso libre, no es necesario citar la fuente. Formato PNG, dimensiones exactas en píxeles, versión clara y oscura:
16:9 horizontal, 1920 x 1080 - claro y oscuro
9:16, formato vertical, 1080 x 1920 - claro y oscuro
Fichas de referencia sobre los modos de fallo para ambos ratios
Formato 16:9 (1920 x 1080) · 16:9 oscuro · 9:16, luz (1080 x 1920) · 9:16, oscuro
Utiliza el formato PNG en lugar de JPEG para la propia prueba. La compresión JPEG puede suavizar tanto el borde de dos píxeles que parezca que no existe a tamaños reducidos, lo que te llevaría a buscar un error de recorte que no existe.
Cómo utilizarlo correctamente
Pásalo por el proceso real, no lo dejes en el escritorio. Súbelo como material gráfico en un título de prueba para que pase por tu herramienta de redimensionamiento, las transformaciones de tu CDN y el diseño de tu aplicación; ahí es donde se encuentra el error.
Pruébala en dispositivos reales. Una aplicación para televisión, un teléfono, una tableta y el reproductor web presentarán fallos distintos en cada caso.
Haz una foto o una captura de pantalla del resultado y compáralo con la lista de comprobación impresa en la tarjeta.
Deja el título de la prueba tal y como está. Se convertirá en un indicador permanente de regresión: la próxima vez que alguien modifique un modo de escala, lo verás de inmediato.
Por qué nos importa esto
Vodlix es una plataforma OTT de marca blanca, lo que significa que todas las imágenes que contiene pertenecen a terceros: los carteles de nuestros clientes, sus marcas y sus miniaturas. Cometer un error en la geometría no es un problema estético, sino que supone dañar sus diseños.
Así pues, la ficha forma parte de nuestro propio proceso de control de calidad. La publicamos porque el problema no es exclusivo de nuestra empresa.
