Tamanhos de imagem social, e o único enquadramento que sobrevive em todo o lado

As plataformas cortam, não acrescentam barras

Um leitor de vídeo que recebe a forma errada põe-lhe barras pretas à volta. Um feed social não, porque as barras parecem um erro numa coluna que rola e desperdiçam o mais escasso do ecrã. Preenche o espaço em vez disso, o que significa que parte da sua imagem não é mostrada. Onde cai o corte depende da plataforma: umas cortam a partir do centro, outras puxam para cima assumindo que é lá que estão as caras, outras usam um modelo de saliência. Não controla qual, e não devia desenhar contra nenhuma em particular.

É esse o argumento a favor de uma área segura. Se o seu sujeito — uma cara, um título, um logótipo, um preço — estiver dentro da região que sobrevive a todos os cortes que a imagem encontrará, a escolha da plataforma deixa de importar. Falta saber que tamanho tem essa região, e acontece que tem uma resposta suficientemente limpa para se memorizar.

A área segura é a proporção mais estreita a dividir pela mais larga

Escreva a proporção da origem como largura sobre altura e chame-lhe r. Um espaço alvo de proporção t corta-a. Se t for mais largo do que r, o corte guarda toda a largura e toma uma faixa horizontal da altura; a fração vertical que sobrevive é r a dividir por t. Se t for mais estreito do que r, o corte guarda toda a altura e toma uma faixa vertical da largura; a fração horizontal que sobrevive é t a dividir por r. Ao longo de todo um conjunto de alvos, só os extremos prendem: na horizontal limita-o o alvo mais estreito, na vertical o mais largo.

Assim, a fração de largura que sobrevive é o alvo mais estreito a dividir por r, e a fração de altura que sobrevive é r a dividir pelo alvo mais largo — cada uma com teto em um, já que um corte não pode mostrar mais do que a imagem inteira. Multiplique-as para a área e o r cancela-se exatamente: a área segura é a proporção alvo mais estreita a dividir pela mais larga, e não depende de todo da forma da origem, desde que esta se situe entre os dois extremos. É esse o resultado que vale a pena levar, e não está publicado em lado nenhum.

Ponha-lhe números. Um conjunto realista, para uma marca que publica em formato de vídeo vertical, feed em retrato, quadrado, vídeo panorâmico e pré-visualização de ligação, vai de 9:16 no extremo estreito a 1,91:1 no largo. Isso é 0,5625 a dividir por 1,91, ou seja 29,45 %. Menos de três píxeis em cada dez do que desenhou têm garantia de ser vistos. Retire o formato de vídeo vertical e o intervalo passa a 4:5 até 1,91:1, dando 41,88 %. Desenhe só para quadrado e pré-visualizações de ligação e obtém 52,36 %. No sentido inverso, use uma origem de cinema 2,35:1, mais larga do que todos os alvos, e cai para 23,94 %; um banner 3:1 cai para 18,75 %.

O mesmo resultado em píxeis

Numa tela quadrada de 1080 píxeis de lado, a caixa segura para todo o intervalo 9:16 a 1,91:1 mede 608 por 565 píxeis — 29,45 % da área, exatamente como diz a fórmula. Numa tela em retrato 4:5 de 1080 por 1350 mede 759 por 565. Numa tela de pré-visualização de ligação de 1200 por 628 mede 353 por 628. Numa tela vertical de 1080 por 1920 mede 1080 por 565. Quatro telas diferentes, quatro caixas diferentes, e os mesmos 29,45 % de cada vez.

O 565 recorrente não é coincidência. A altura segura é a largura da tela a dividir pela proporção alvo mais larga, e 1080 a dividir por 1,91 dá 565,4. Tudo o que quiser ver sobreviver a um corte de 1,91:1 tem de viver numa faixa horizontal de 565 píxeis de altura, faça o que fizer de resto. Do mesmo modo, a largura segura é a altura da tela multiplicada pela proporção alvo mais estreita, e é por isso que a tela vertical não perde nada na horizontal.

Um corolário elegante: a proporção da própria caixa segura é o alvo mais estreito vezes o mais largo, a dividir pela proporção da origem. Iguale-o a um e obtém uma zona segura quadrada exatamente quando a origem está na média geométrica dos dois extremos — a raiz de 0,5625 vezes 1,91, ou seja 1,0365 para 1, essencialmente um quadrado. Por isso, se quiser a maior zona segura quadrada no leque mais amplo de colocações, desenhe numa tela ligeiramente mais larga do que alta.

Dimensão de carregamento, dimensão de exibição e o multiplicador retina

Três números diferentes chamam-se «o tamanho». A dimensão de carregamento é o que envia. A dimensão de exibição é quantos píxeis CSS de largura tem o espaço no ecrã de quem lê. A razão de píxeis do dispositivo multiplica a segunda para dar o número de píxeis reais de que o ecrã dispõe. Um espaço de 360 píxeis CSS de largura precisa de 720 píxeis de dispositivo num ecrã de duas vezes e de 1080 num de três vezes — que é exatamente porque 1080 reaparece nas recomendações e porque enviar menos produz algo visivelmente mole num telemóvel moderno.

As dimensões publicadas que existem vale a pena conhecê-las e datá-las. A documentação de partilha da Meta recomenda imagens de pelo menos 1200 por 630 píxeis para dispositivos de alta resolução, dá 200 por 200 como dimensão mínima permitida, pede que se fique o mais perto possível de uma proporção de 1,91:1 para a imagem não ser cortada no feed, e limita o ficheiro a 8 MB. A ajuda do Instagram documenta que uma foto entre 320 e 1080 píxeis de largura mantém a resolução original desde que a proporção esteja entre 1,91:1 e 4:5. Ambas estão em vigor à data de escrita e ambas mudarão; as proporções que contêm são a parte duradoura.

A compressão, e o que faz ao texto dentro de uma imagem

Cada plataforma volta a codificar o que carrega, com uma definição de qualidade que não publica e que muda sem avisar. A compressão com perdas é mais dura precisamente com o conteúdo que os marketeers põem nas imagens: arestas nítidas entre duas chapadas de cor, que é o que a tipografia é. Uma fotografia perde detalhe para o qual nunca olhava; uma legenda ganha um halo que se vê.

O passo de redimensionamento agrava tudo, e esta parte é aritmética e não intuição. Desenhe uma legenda de 48 píxeis numa tela de 1080 de largura e chega a 48 píxeis. Desenhe a mesma legenda de 48 píxeis numa tela de 1440 e, depois de reduzir para 1080, chega a 36. Numa tela de 2160 chega a 24 — metade do tamanho que desenhou, e o tamanho a que uma espessura fina deixa de ser legível num telemóvel segurado com o braço esticado. Trabalhar maior por segurança é exatamente o contrário de seguro se a plataforma normalizar a largura.

A pré-visualização de ligação é outra proporção ainda

O próprio protocolo Open Graph define as propriedades — og:image, og:image:width, og:image:height, og:image:type, og:image:alt — e não especifica dimensão em píxeis alguma. A forma 1,91:1 que hoje todos os geradores de pré-visualização usam veio das recomendações de partilha do Facebook, que aconselham ficar o mais perto possível dessa proporção e usar pelo menos 1200 por 630 píxeis. Todo o resto herdou-a porque alinhar-se com a plataforma dominante era mais fácil do que negociar.

Para o cálculo da área segura, a pré-visualização de ligação conta mais do que a sua quota de tráfego sugere, porque a 1,91:1 é a proporção mais larga da maioria dos conjuntos, e é a proporção mais larga que fixa a altura da caixa segura. Retire-a e todo o cálculo melhora: um conjunto que vai de 4:5 a 16:9 tem uma área segura de 45,00 % em vez de 41,88 %, unicamente porque 16:9 é mais estreito do que 1,91:1. Se a sua imagem de pré-visualização for produzida à parte da sua imagem social — e devia, porque uma é um cartão e a outra uma publicação — pode retirar o 1,91:1 do conjunto que a imagem social tem de sobreviver, e essa decisão sozinha vale mais do que qualquer quantidade de enquadramento cuidadoso.

Perguntas frequentes

Que percentagem da minha imagem está garantida visível?

A proporção mais estreita em que será mostrada, a dividir pela mais larga. É toda a resposta, e é independente da forma sobre a qual desenhou desde que essa forma caia entre as duas. De uma colocação vertical 9:16 até uma pré-visualização de ligação 1,91:1, é 29,45 %. De 4:5 a 1,91:1, 41,88 %. De quadrado a 1,91:1, 52,36 %. De 4:5 a 16:9, 45,00 %. Desenhe fora do intervalo e piora em vez de melhorar: uma origem de cinema 2,35:1 cai para 23,94 % e um banner 3:1 para 18,75 %.

Em que tela desenho se só quero fazer uma imagem?

Qualquer forma entre a colocação mais estreita e a mais larga dá a mesma área segura, por isso a escolha é sobre em que direção quer que corra a margem desperdiçada, não sobre quanto guarda. Se quiser que a zona segura seja ela própria quadrada, desenhe na média geométrica dos seus extremos: para um intervalo 9:16 a 1,91:1 isso é 1,0365 para 1, essencialmente uma tela quadrada, que dá uma caixa segura de 608 por 565 dentro de 1080 por 1080. Se a maioria das suas colocações for em retrato, uma tela 4:5 de 1080 por 1350 dá uma caixa segura mais larga, 759 por 565, nos mesmos 29,45 %. Apenas não saia do intervalo: mais largo do que a sua colocação mais larga ou mais estreito do que a mais estreita e perde área para nada.

Porque mudam constantemente as dimensões publicadas em píxeis?

Porque são consequência de uma decisão de produto, não de uma norma. Uma plataforma alarga a sua coluna de feed, acrescenta um formato, muda como trata um corte mais alto, ou aponta a uma nova densidade de ecrã, e todos os tamanhos recomendados a jusante mexem-se. É por isso que um artigo que fixa os números deste ano expira num ano, e é por isso que este é construído sobre proporções. As dimensões que vale a pena conhecer são as que uma plataforma documenta e data ela própria: a Meta pede atualmente pelo menos 1200 por 630 com um mínimo de 200 por 200, um teto de 8 MB e uma forma o mais próxima possível de 1,91:1, e o Instagram mantém atualmente a resolução original para larguras entre 320 e 1080 quando a proporção está entre 1,91:1 e 4:5. Verifique ambas antes de usar qualquer uma.

Devo carregar uma imagem maior do que a largura recomendada?

Só até ao ponto em que a plataforma deixa de manter a sua resolução, e nunca por causa do texto. Carregar acima da largura para a qual uma plataforma normaliza implica que ela reduza, e uma redução encolhe a tipografia em proporção exata: uma legenda de 48 píxeis desenhada numa tela de 1440 chega a 36 píxeis depois de redimensionar para 1080, e numa de 2160 chega a 24. Desenhe à largura que a plataforma preserva, dimensione a sua tipografia face a essa largura, e lembre-se de que a largura de exibição em píxeis CSS é ainda menor — um espaço de 360 pontos num ecrã de três vezes consome exatamente 1080 píxeis de dispositivo, daí que esse número reapareça.

Posso usar a mesma imagem para uma publicação social e uma pré-visualização de ligação?

Pode, e custa-lhe área real. A pré-visualização de ligação é a proporção mais larga da maioria dos conjuntos, a 1,91:1, e é a proporção mais larga que limita a altura da sua caixa segura — 1080 a dividir por 1,91 dá 565 píxeis, daí esse número recorrente. Retire a pré-visualização de ligação e um conjunto que vai de 4:5 a 16:9 tem uma área segura de 45,00 % em vez de 41,88 %; retire também o formato de vídeo vertical e de quadrado a 1,91:1 dá 52,36 %. Como um cartão de pré-visualização e uma publicação de feed têm funções diferentes de qualquer forma, produzi-los em separado costuma ser a melhor resposta, e melhora a geometria de graça.