Guia atualizado sobre tamanhos de banner, cabeçalho e foto do Twitter

O Twitter, como a maioria dos sites, muda de tempos em tempos. Uma coisa que o Twitter faz alterações é o layout, tanto de maneiras muito importantes quanto de maneiras muito menores. Algumas mudanças são importantes, como transformar favoritos em curtidas. Outras mudanças são mais sutis, como elas cortam imagens e assim por diante.

A partir da data de publicação deste artigo, as informações abaixo devem ser precisas. Avisarei aqui – alterando este parágrafo – se atualizar o post.

A imagem do cabeçalho

Sua imagem de cabeçalho no Twitter é como um outdoor gigante que só é visto algumas vezes. Qualquer pessoa que navegue em seu próprio feed do Twitter não o verá; eles precisam visitar sua página de perfil para vê-la.

O Twitter recomenda que você carregue uma imagem muito ampla para ser seu cabeçalho. Suas dimensões pretendidas são 1500 x 500 ; 1.500 pixels de largura por 500 pixels de altura. Simples, fácil, fim da história, certo?

Bem, é se você for como The Onion e usar apenas uma imagem de um artigo popular recente como o banner principal. Não há necessidade de ser complexo com um layout; basta cortar uma imagem no tamanho certo e enviá-la. Desde que pareça bom, é bom usar.

No entanto, se você for como algumas empresas, talvez queira algo um pouco mais otimizado. Geralmente, é uma boa ideia usar seu banner superior como um apelo à ação. Há muitos problemas, no entanto.

Em primeiro lugar, o tamanho do banner superior não é 1.500 por 500. Na verdade, é mais como 1.263 por 421, se você estiver usando um monitor widescreen típico. Isso representa uma calha vertical e horizontal, que pode ser usada em algumas resoluções. Se você inspecionar o elemento de fundo e visualizar a imagem de um determinado banner, normalmente verá pelo menos um pouco mais verticalmente na parte superior e inferior da imagem.

Você pode ver como o Twitter ajusta dinamicamente a imagem se você clicar e arrastar um navegador para redimensioná-la. Você pode ver como, em diferentes resoluções, a imagem aumentará ou diminuirá ligeiramente o zoom; isso está ajustando usando o espaço disponível para ele. Depois de encolher o suficiente, você obterá uma barra de rolagem.

Então você tem que considerar o celular . Ao usar o aplicativo do Twitter, a mesma imagem aparece nas mesmas dimensões, reduzida. O que isso significa é que, se você quiser usar algum tipo de chamada para ação no texto do seu banner, não poderá tornar o texto tão pequeno que fique ilegível.

Se você está colocando uma chamada para ação em seu banner superior, você precisa fazer duas coisas. Primeiro, evite a parte superior e inferior absolutas da imagem. Parte desse espaço é ocupado pelas calhas para dar espaço à imagem para ampliar e ajustar.

Em segundo lugar, evite o canto inferior esquerdo a cerca de um terço do caminho da esquerda. Há uma seção que é coberta pela sua imagem de perfil e pela borda fina ao redor dela. Qualquer texto ou call to action que você colocar nessa seção ficará oculto atrás da sua foto de perfil.

Protip: use uma imagem muito maior! O Twitter recomenda um mínimo de 1500×500. Você não está limitado a isso! Muitas vezes, eu me vejo carregando imagens de 1920 × 1080 e brincando com zoom, posicionamento horizontal e vertical e corte para posicioná-lo exatamente onde eu quero.

Uma coisa que você pode fazer é criar seu banner e expandir a tela em todas as direções em algumas centenas de pixels. Quando você for fazer o upload da imagem, poderá posicioná-la cuidadosamente exatamente da maneira que deseja que ela apareça.

Fotos do perfil

Sua foto de perfil hoje em dia é um círculo . Aqui, o Twitter recomenda uma imagem quadrada de 400×400 pixels. Sua tela será um círculo de aproximadamente 400 pixels, mas, novamente, você poderá ajustar a imagem ao carregá-la. Uma imagem de 400×400 pixels ou uma imagem de 2000×2000 pixels obtêm as mesmas opções de zoom.

Quando você carrega uma imagem para ser sua imagem de perfil, você pode ampliá-la e reduzi-la, e você pode deslizá-la horizontalmente e verticalmente se você tiver ampliado o suficiente para não cortar a borda. Você está limitado às bordas da sua imagem, e é por isso que o Twitter recomenda uma de tamanho suficiente.

O zoom não é ilimitado. Você pode ampliar uma imagem apenas se NÃO for uma imagem quadrada. Você pode diminuir um pouco o zoom até que vertical ou horizontal seja o espaço mínimo disponível. Nas poucas imagens que encontrei que podem fazê-lo, é cerca de 80% de zoom. Enquanto isso, você pode ampliar cerca de 150% ou mais, talvez até 200% em uma imagem perfeitamente quadrada, para obter o posicionamento exato desejado.

A razão pela qual o Twitter quer uma imagem quadrada de 400 pixels é para que eles tenham um redimensionamento mínimo para fazer. Uma imagem excepcionalmente grande precisaria ser reduzida quando carregada, o que resulta em uma imagem desfocada. Uma imagem excepcionalmente pequena será muito pixelizada e será rejeitada.

Nesse caso, minha dica de cima não é realmente aplicável. Em vez disso, eu tenho um diferente.

Protip: Faça sua imagem um pouco maior do que o necessário. Faça a imagem do seu logotipo, de ponta a ponta, com 400 pixels e, em seguida, adicione uma medianiz de cerca de 50 pixels em cada lado, mantendo-a quadrada. Dessa forma, ao fazer upload da imagem, você pode ampliá-la o suficiente para dar espaço suficiente nas bordas para ficar bem com a borda, mas sem realmente estender a mão para tocá-la. O pequeno ajuste fino pode valer a pena.

Dimensões da postagem de imagem

Quando você publica imagens em seu feed, ele é recolhido para caber no formato de postagem. Às vezes, isso significa que corta a parte superior e inferior da imagem. Se você postar várias imagens, acaba vendo uma ocupando dois terços do espaço e mais duas ou três dividindo o restante do espaço. As postagens do Twitter individualmente só podem ter até quatro imagens.

Quando uma foto faz parte de uma postagem e está anexada a um link, essa foto tem 440×220 pixels. É amplamente horizontal e não se expande quando clicado; o clique leva você para a postagem. Você pode, como antes, aumentar a escala, mas será cortado e você não terá a opção de ajustá-lo.

Quando você simplesmente carrega quatro imagens, elas são exibidas na ordem em que você as carrega. A primeira imagem é a imagem principal, e as restantes uma, duas ou três são dadas seções do espaço restante. Se você enviar apenas duas imagens, elas dividirão o mesmo espaço de 440×220 em dois quadrados de 220×220.

Uma única imagem terá um espaço máximo de 440×440. Se a imagem em si for menor horizontalmente, ela será ligeiramente cortada na parte superior e inferior. Se a imagem for menor verticalmente, ela será exibida no formato letterbox, a menos que seja muito larga, caso em que será cortada.

O upload de três imagens colocará uma imagem como um quadrado ocupando os dois terços esquerdos da imagem, com os dois restantes como quadrados empilhados verticalmente à direita dela. O upload de quatro imagens é o mesmo, exceto que mais área é fornecida à imagem principal para permitir uma pilha vertical de quadrados mais alta para as outras três imagens.

Tudo isso é complicado, mas na prática significa apenas “carregar imagens quadradas sempre que possível”. O Twitter tentará exibir o máximo possível da imagem dentro do quadrado. Se alguma imagem for cortada – principalmente para imagens verticais mais longas – o usuário terá que tocar ou clicar nela para ver a coisa completa.

Dicas para usar imagens no Twitter

Primeiro, sua foto de perfil. 99% das vezes, sua foto de perfil deve ser uma foto sua ou do seu logotipo. Sei que muitos artistas optam por usar uma peça de sua arte, ou um autorretrato artístico, como foto de perfil; isso está perfeitamente bem também.

Em geral, você deve evitar outras formas de foto de perfil. Deixar sua foto de perfil em branco resultará em uma silhueta de perfil vazia básica, o que provavelmente deixará você com menos confiança do que com uma conta preenchida.

Não recomendo usar sua foto de perfil como um apelo à ação. Em quase todos os modos de exibição, é simplesmente muito pequeno. Nada que você colocar nesse espaço será realmente visível.

Quanto à sua imagem de banner principal , é um ótimo lugar para mostrar o que você faz. Um banco pode ter uma cena de um caixa e um cliente feliz. Um fotógrafo pode mostrar uma foto que tirou de uma paisagem brilhante. Um artista pode mostrar uma peça maior que produziu recentemente.

As empresas locais geralmente acham que vale a pena tirar uma foto de sua localização, o que pode ajudar os usuários a encontrá-los se estiverem escondidos ou em um prédio comum.

Outras marcas, principalmente as digitais, podem utilizar o banner de perfil como uma espécie de outdoor publicitário. Coloque uma frase de chamariz maior baseada em texto, com ilustrações, semelhantes a um infográfico ou uma página de destino, nesse espaço. Você pode exibir uma capa de livro ou uma série de capas de ebooks que você produziu, por exemplo.

Outras empresas podem fazer algo que corresponda às tendências atuais. O Hubspot tem um grande banner do orgulho em sua assinatura laranja, enquanto a foto do perfil é o arco-íris da bandeira do orgulho.

Sarah McBride, autora e secretária de imprensa da campanha de direitos humanos, usa o banner de seu perfil para promover seu livro. É uma imagem grande e simples com um apelo à ação e uma imagem da capa do livro, e tem um desempenho excelente.

Ao postar uma imagem como parte de um tweet, lembre-se de que uma única imagem funciona melhor no formato letterbox. Você pode criar uma imagem e usá-la para expandir seu espaço de texto. Use um CTA suave e uma descrição em seus 280 caracteres e use a imagem como espaço para um pouco mais de texto. Lembre-se, o Twitter não é o Facebook e você não receberá uma postagem rejeitada por ter muito texto nela.

Lembre-se de que, se você quiser fazer upload de várias imagens ao mesmo tempo, estará limitado a quatro no máximo. Uma ou duas de cada vez lhes dá visibilidade igual, mas três ou quatro significa que da segunda à quarta imagens serão amassadas e terão menos espaço. Você pode acabar com algo como este post recente sobre um novo jogo da Nintendo, onde a terceira e quarta imagens são colagens que encolhem até quase incompreensíveis.

Caso contrário, a maioria dos usos de imagens no Twitter se resume ao uso de Cartões do Twitter. Felizmente, tenho dois bons recursos para você. O primeiro é este post sobre como instalar cartões do Twitter em seu site. No entanto, existem vários estilos diferentes de cartão do Twitter, e aprender tudo sobre eles pode ser complicado. É por isso que temos o melhor guia para cartões do Twitter.

Além de tudo isso, não posso dar nenhuma dica de imagem do Twitter além das habituais. Faça imagens de alta qualidade, evite cobri-las com tanto texto que elas percam qualquer imagem e certifique-se de que elas se destaquem do pântano que é o perfil usual do Twitter. Você pode considerar usar gifs ou vídeos sempre que possível, para adicionar movimento e destacar sua postagem.

Certificar-me-ei de atualizar este post se notar que o Twitter está mudando seu comportamento ou seus tamanhos novamente. Verifique novamente se você acha que algo está acontecendo e deixe um comentário se eu ainda não notei!