Toda plataforma OTT tem, em algum lugar, o mesmo bug discreto: uma imagem que está quase certa.
Um pôster que está alguns por cento mais largo do que deveria. Um banner principal cujas bordas ficam cortadas na tela da TV. Uma miniatura que parece boa no laptop, mas um pouco errada no celular. Ninguém abre um ticket, porque ninguém consegue apontar exatamente o que está errado — só parece um pouco estranho.
A solução não é ter um olho mais apurado. É uma imagem de teste que não pode mentir.
Por que “parece estar tudo certo” não é um teste
Os erros de proporção passam despercebidos porque a fotografia os oculta. Se você esticar uma imagem panorâmica em 4%, o observador não percebe. Mas se esticar um rosto, um logotipo ou um círculo em 4%, todos percebem.
Essa é a ideia por trás de um cartão de teste. Você coloca formas no quadro cuja correção é óbvia, de modo que uma renderização incorreta se destaque, em vez de ficar oculta.
O cartão de teste Vodlix
Criamos um para nosso próprio controle de qualidade e estamos distribuindo de graça, porque toda equipe de streaming precisa dele e a maioria acaba desenhando algo ainda pior numa tarde de sexta-feira.
Tudo o que está nele é uma armadilha deliberada para um bug específico:
Um círculo inscrito em um quadrado, tocando-o nos quatro pontos verdes. Um círculo só fica redondo em uma única proporção. Ao comprimir o quadro, ele se torna oval e se afasta de dois dos pontos.
Diagonais exatamente a 45 graus. Qualquer alteração não uniforme na escala altera o ângulo, e a etiqueta impressa deixa de coincidir com a linha para a qual aponta.
Um tabuleiro de xadrez formado por quadrados perfeitos. Os quadrados se transformam em retângulos no momento em que a proporção se altera.
Uma linha fina ao longo da borda verdadeira, colchetes nos pixels dos cantos e quatro rótulos “EDGE”. Se algum deles estiver faltando, o quadro está sendo cortado.
Uma régua de 0 a 100% ao longo dos quatro lados. Se começar depois de 0 ou parar antes de 100, significa que se trata de um recorte ou de um zoom.
Sem medição, sem sobreposição, sem arquivo de referência. Se o círculo for redondo e você conseguir identificar todas as quatro arestas, a renderização está correta.
Como é, na verdade, uma renderização com erros
Aqui está a mesma imagem em quatro versões. Apenas a primeira está sendo exibida corretamente.
Vale a pena distinguir essas duas falhas, pois elas têm causas e soluções diferentes.
Aplastado ou esticado significa que algo forçou a imagem a se encaixar em um espaço com formato incorreto — uma largura e altura fixas no CSS ou um modo de escala que preenche em vez de ajustar. O círculo se transforma em um oval.
Recortada ou ampliada significa que a proporção foi mantida, mas o quadro ultrapassou os limites do seu contêiner. Observe que o círculo permanece perfeitamente redondo no exemplo recortado. Essa é a armadilha: o recorte não distorce nada, apenas remove discretamente as bordas. Sem os marcadores de borda, você nunca perceberia.
O modo retrato é mais importante do que o modo paisagem
A proporção 16:9 geralmente se mantém, porque tudo é desenvolvido para ela. É na vertical que os recursos apresentam problemas — Reels, Shorts, imagens principais para dispositivos móveis, telas de bloqueio de celular. Por isso, o cartão também vem na proporção 9:16.
Um recurso de 9:16 inserido em um espaço de 16:9 no modo de preenchimento perde cerca de um terço de sua altura. O cartão deixa isso claro em um segundo, sem deixar margem para discussões.
Baixar
Uso gratuito, sem necessidade de atribuição. PNG, dimensões exatas em pixels, versões clara e escura:
16:9 (horizontal), 1920 x 1080 – claro e escuro
9:16 retrato, 1080 x 1920 – claro e escuro
Folhas de referência sobre modos de falha para ambos os índices
Formato 16:9 (1920 x 1080) · 16:9 escuro · 9:16 luz (1080 x 1920) · 9h16, escuro
Use PNG em vez de JPEG para o próprio teste. A compressão JPEG pode suavizar a linha fina de dois pixels na borda a ponto de ela parecer ausente em tamanhos pequenos, o que faria com que você ficasse procurando um erro de recorte que não existe.
Como usá-lo corretamente
Coloque o arquivo no fluxo de trabalho real, não na área de trabalho. Faça o upload como imagem em um título de teste para que ele passe pelo seu redimensionador, pelas transformações do CDN e pelo layout do aplicativo — é aí que está o bug.
Teste em dispositivos reais. Um aplicativo de TV, um celular, um tablet e o player da web apresentarão falhas diferentes.
Tire uma foto ou faça uma captura de tela do resultado e compare-o com a lista de verificação impressa no cartão.
Deixe o título do teste como está. Ele se torna um indicador permanente de regressão — da próxima vez que alguém alterar um modo de escala, você perceberá imediatamente.
Por que isso é importante para nós
A Vodlix é uma plataforma OTT de marca branca, o que significa que todas as imagens nela contidas pertencem a terceiros — os pôsteres dos nossos clientes, suas marcas e suas miniaturas. Errar na geometria não é um problema estético; é nós danificarmos o material gráfico deles.
Portanto, o cartão faz parte do nosso próprio controle de qualidade. Estamos divulgando-o porque o problema não é exclusivo da nossa empresa.
