Guia de tamanho de fotos do Facebook | Novo layout do Facebook

Em meados de 2020, o Facebook começou a lançar um novo layout de desktop para seu site. É mais limpo, com mais espaço em branco e mais próximo da versão móvel. Mas também é bastante diferente. Portanto, esta é uma versão revisada do meu guia não oficial de tamanho de imagem do Facebook para dar conta do layout mais recente, que eles estão chamando de Novo Facebook (a versão antiga está sendo chamada de Facebook Clássico) .1

Inicialmente, este novo O layout é uma atualização opcional e você pode voltar para o layout Clássico do Facebook no Novo Facebook. Mas, eventualmente, será implementado para todos. Se acontecer de você ainda usar o layout antigo (ou Facebook clássico, como eles o chamam), você pode encontrar a versão anterior do guia de tamanhos do Facebook aqui.

Durante o lançamento, alguns usuários verão sua página com o novo layout e alguns com o layout antigo. Mas se você estiver enviando novo conteúdo, provavelmente faz mais sentido otimizá-lo para o novo layout.

As imagens são uma parte importante do uso do Facebook, mas se você veio nesta página, você sem dúvida descobriu por si mesmo que descobrir quais tamanhos de imagem usar no Facebook não é tão fácil quanto poderia ser. Envolve algumas discussões para obter os resultados desejados. Cada tipo de imagem em um página, perfil e linha do tempo têm seu próprio tamanho e peculiaridades. E o Facebook nunca foi muito bom em tornar suas páginas de ajuda fáceis de encontrar.

Manter as coisas ainda mais frustrantes e interessantes é que no Facebook muda as coisas de vez em quando, geralmente sem qualquer aviso. Às vezes, é um pequeno ajuste incremental. Às vezes, é uma revisão completa (como quando os cronogramas foram introduzidos e novamente quando foram alterados de duas colunas para uma coluna). Portanto, é sempre um alvo em movimento. E sempre parece haver um novo sistema ao virar da esquina.

Quer você esteja usando páginas do Facebook para marketing de mídia social ou simplesmente tentando postar fotos para amigos e familiares, aqui está minha versão 2020 do guia não oficial para os tamanhos das fotos do Facebook nas várias partes do site.

Este é um esforço preliminar para desconstruir os tamanhos de exibição conforme a atualização está sendo lançada. Vou tentar atualizá-lo conforme algumas das especificações se tornam mais claras. Se você encontrar um comportamento de exibição diferente, avise-me para que eu possa investigar e atualizar conforme necessário.

Tamanho da foto da capa do Facebook

Recomendação: use uma imagem com pelo menos 940 pixels de largura por 352 pixels de altura. Mas se você quiser uma qualidade melhor, use uma imagem que tenha pelo menos 1.800 pixels por 704 pixels.

A foto da capa do Facebook é o grande espaço de imagem panorâmica no topo da linha do tempo. Às vezes também é chamado de imagem de banner ou foto de cabeçalho.

Sua exibição é responsiva. Dito de outra forma, o tamanho em que é exibido varia de acordo com o tamanho da janela do navegador ou da tela do dispositivo. Você pode ver esse efeito se alterar o tamanho da janela do seu navegador enquanto visualiza a página.

Com o layout anterior, tentar descobrir o que seria exibido corretamente na foto de capa do Facebook era um pouco complicado, porque nem todas as partes da imagem seriam exibidas em todos os tamanhos. Havia zonas de segurança e faixas sendo cortadas na tela do desktop.

A nova versão simplificou as coisas. A imagem inteira é exibida e redimensionada de uma maneira muito mais simples.

Dito isso, há algumas coisas a serem observadas.

Em primeiro lugar, eles voltaram a ter um estreito faixa de sombreamento graduado na parte inferior. É uma sobreposição, o que significa que fica em uma camada no topo da sua imagem. Portanto, você não vai querer incluir nenhum texto ou detalhe importante nessa faixa inferior.

Em segundo lugar, é pegar a cor dos pixels externos da imagem e usá-los para criar uma seção de cor sombreada no espaço em branco seção atrás da imagem. Aqui está um exemplo do que quero dizer, com ele pegando o vermelho da borda externa da imagem e aplicando-o na seção branca atrás. (Recortei a foto do perfil aqui para simplificar as coisas.) Marcas com uma paleta de cores específica farão uma observação especial para incluir as cores desejadas na borda da imagem.

Em terceiro lugar, o cantos inferiores ficam ligeiramente arredondados (ou raio de borda, para ser técnico). Não é muito agressivo, portanto, é improvável que cause problemas para muitos usuários.Mas se você estiver usando uma linha de traço em torno de sua imagem ou outro enquadramento detalhado, isso pode causar problemas. Ela é aplicada automaticamente e não há como desativá-la.

Em quarto lugar, a foto do perfil voltou a se sobrepor à foto da capa. Embora seja apenas sutil nesta versão, e apenas uma fatia obscurece a foto da capa.

Alterando sua foto de capa do Facebook

Se você acabou de configurar um novo perfil ou página do Facebook e ainda não tem uma foto de capa, basta clicar no botão “Adicionar uma capa” na parte superior da página onde a foto de capa irá.

Depois de adicionar sua foto, você pode substituí-la facilmente. Quando você estiver conectado à sua conta e visualizando a sua página, clique no botão Edit no canto inferior direito.

Clicar nele abre um drop -menu inferior a partir do qual você pode escolher a origem da nova foto. Este também é o mesmo menu a ser usado se você quiser remover ou reposicionar uma foto existente ou usar uma capa de vídeo ou capa de apresentação de slides.

Capa Tipos de fotos: imagens únicas

Em termos de tipos de imagens, os panoramas são ideais. Recortes simples também funcionam, embora a eficácia obviamente vá variar de acordo com o que é a imagem. E não há nada que impeça você de montar mult iple fotos em uma colagem em seu software de imagem, salvando-as como um único arquivo de imagem e fazendo o upload. Como estes, por exemplo:

Apresentações de slides: várias imagens

Até recentemente, só era possível escolher uma foto para atuar como sua foto de capa estática. Mas um novo recurso foi adicionado: apresentações de slides. Agora você pode selecionar até 5 fotos que giram. Acesse este recurso por meio do mesmo menu que permite adicionar ou alterar a foto da capa (ou seja, o ícone da câmera no canto superior esquerdo da seção da imagem da capa).

Ao criar uma apresentação de slides, você recebe o opção para selecionar até 5 imagens que serão usadas. Use a tira de filme na parte superior para escolher as imagens existentes ou fazer upload de novas. Você pode clicar na miniatura e obter uma visualização de como ela ficará no espaço maior abaixo das miniaturas. Você pode clicar e arrastar nessa seção para reposicionar a imagem na janela de visualização.

Você também pode ter uma versão gerada dinamicamente que permite ao Facebook escolher as fotos com base no que está tendo um bom desempenho e com base na atividade em sua página . Você pode ativar ou desativar esse recurso usando o botão no canto superior direito da tela de edição da apresentação de slides.

Se você estiver usando a capa da apresentação de slides, seus visitantes podem navegar pela apresentação usando as setas de cada lado (o layout anterior tinha indicadores de posição na parte inferior, mas eles desapareceram na nova versão).

Existem algumas coisas que eu acho estranhas na forma como as apresentações de slides são exibidas para os visitantes. A primeira é que a apresentação de slides não avança automaticamente. Portanto, para ver mais de uma imagem na apresentação de slides, seus visitantes deverão saber como avançar manualmente usando os botões de seta ao lado da imagem. Suspeito que apenas uma porcentagem muito pequena o fará. A segunda coisa é que se você desativa a opção de escolha das imagens pelo Facebook, ele exibe as imagens na mesma ordem todas as vezes ao invés de aleatoriamente. O resultado de ambas as coisas é que, pelo menos na forma como está implementado atualmente, a grande maioria dos visitantes de sua página provavelmente verá apenas a primeira imagem. A terceira estranheza – pelo menos para mim – é acomodar o novo destaque de cor sombreada na seção de fundo. Como isso é desenhado a partir da imagem de perfil exibida, muda junto com a imagem de perfil. Isso não é necessariamente uma coisa ruim, mas é algo que vale a pena conhecer.

Vídeos de capa

Agora você também pode usar arquivos de vídeo para sua área de banner. Eles devem ter entre 20 e 90 segundos e medir pelo menos 820 por 312 pixels. O tamanho recomendado é 820 por 462.

Se você está gravando um videoclipe para isso usando uma câmera que permite escolher a resolução do vídeo, o modo 720p seria um bom lugar para começar porque mede 1280 por 720, que confortavelmente tem resolução suficiente.

Eu tenho um guia mais detalhado sobre capas de vídeo do Facebook separadamente.

Foto do perfil do Facebook

Tenho uma postagem mais detalhada no tamanho da imagem do perfil do Facebook separadamente, mas aqui está a essência.

Tipo de exibição	Dimensões
Navegador para desktop / laptop	132 pixels
Smartphones	128 pixels
Feature Phones	36 pixels

A foto do perfil do Facebook agora na parte inferior esquerda da foto da capa, ligeiramente sobreposta à parte inferior da foto da capa. Ele foi reduzido ligeiramente em relação às versões anteriores, até um círculo de 132 pixels de diâmetro.

Tem uma linha branca fina ao redor que é aplicada automaticamente – você não pode removê-la ou controlá-la.

A boa notícia é que você não precisa fazer upload de uma circular imagem, algo que seria um pouco difícil de criar. Em vez disso, você pode fazer upload de qualquer imagem retangular ou quadrada regular. Seja qual for o formato da imagem que você enviar, ela será cortada em um círculo quando for exibida.

Tamanhos de exibição da imagem do perfil do Facebook

Navegador da web para desktop / laptop. Em uma visualização de página normal, como quando alguém está verificando seu perfil, ele é exibido no navegador da web de um desktop como um círculo com um diâmetro de 132 pixels.

Telefones. O tamanho da imagem do perfil exibida nos telefones celulares varia de acordo com o tipo de telefone. Em smartphones modernos, ele é exibido como um círculo com 128 pixels de diâmetro. Em telefones mais antigos, ela é exibida com 36 pixels de diâmetro.

Ao selecionar uma foto para adicionar uma imagem de perfil, você terá a opção de mover a área focal (presumindo que não seja quadrada), bem como aumentar e diminuir o zoom (desde que exceda a resolução mínima).

A imagem do perfil que aparece ao lado do seu nome em comentários e postagens na linha do tempo é a mesma imagem e ainda é um círculo, mas é redimensionada automaticamente para um diâmetro de 40 pixels.

Requisito de tamanho para imagem de perfil do Facebook

Por ser exibida tão pequena, é improvável que você tenha problemas com os tamanhos das imagens. Contanto que sua imagem tenha pelo menos 132 pixels em seu tamanho menor (que é bem pequeno), você deve estar pronto para ir.

Miniaturas de links compartilhados

As miniaturas de links compartilhados exibir em um navegador da web com 500 pixels de largura e 261 pixels de altura.

Por um tempo, foi possível escolher uma imagem de link compartilhado diferente, mas esse recurso foi removido. Por enquanto, pelo menos, há uma solução alternativa se você compartilhar os links usando um serviço de gerenciamento de mídia social como o Buffer, mas você não pode escolher uma imagem diferente para usar no Facebook.

Se você está compartilhando links de seu próprio site, é possível especificar qual imagem você deseja usar como miniatura da imagem, mas isso é algo que você precisará configurar em seu site e está além do escopo deste post. Mas se você está procurando quais termos usar o Google nisso, o que você está tentando fazer é definir a propriedade “og: image” nos metadados do Open Graph da página. Esta é a documentação do Facebook, e se você estiver usando um CMS como WordPress para o seu site, existem plug-ins que podem lidar com isso para você.

O que você ainda pode fazer é adicionar mais miniaturas além do original (não estão no lugar). Quando você vai compartilhar um link , use a seção inferior do pop-up para adicionar mais imagens. Mas você não pode mais desmarcar a imagem original como costumava fazer.

Fotos na linha do tempo

O o tamanho e os layouts das miniaturas na linha do tempo variam de acordo com quantas imagens você está compartilhando na mesma postagem, bem como a orientação que as imagens específicas têm.

Veja como várias combinações são exibidas. Todas as imagens têm um branco de 1pix traçar ao redor da borda.

Foto única na linha do tempo

Quando você carrega uma imagem na linha do tempo, uma miniatura é gerada automaticamente para caber dentro uma caixa com 500 px de largura e até 750 px de altura. Portanto, se você quiser usar o espaço máximo disponível, faça upload de uma imagem na orientação retrato (vertical) na proporção de 3: 2. Este é um exemplo de como usar o espaço máximo disponível:

Se você enviar uma imagem paisagem (horizontal), ela será dimensionada para 500px de largura e manterá sua forma. A área total da imagem aparece sem cortes.

Este é outro retângulo na orientação paisagem, mas tem uma proporção muito mais estreita, como um banner ou panorama. A largura é novamente 500px e a imagem é redimensionada para que toda a área da imagem apareça.

Se você enviar a mesma imagem girada 90 graus, para que seja alta em vez de larga, ela será cortada ao máximo área disponível de 500px por 750px.

E se você carregar um quadrado, a imagem inteira será exibida, com a largura de 500px.

Publicação de várias imagens de uma vez na linha do tempo de uma página

Você pode enviar várias fotos de uma vez para a linha do tempo. Como eles são exibidos depende de quantas imagens você está enviando e da orientação do que chamarei de imagem primária.

A imagem primária é o que estou chamando de aquela que é exibida primeiro no envio pop-up e também é exibido em tamanho maior em alguns dos layouts. Até onde eu sei, não há um nome oficial para isso, mas vou prosseguir e usar “imagem primária”. É a isso que me refiro na seção abaixo.

Além de exibir primeiro, a imagem primária tem outra função importante. Ela determina o layout que você obtém. Se você carregar 3 imagens com um primário quadrado imagem, você vai acabar com um layout diferente do que se carregasse 3 imagens com uma imagem primária retangular.

A maneira mais fácil de selecionar qual imagem serve como imagem principal é arrastá-la para a esquerda na caixa de diálogo de upload.

Aqui está um exemplo do que quero dizer. Neste, estou enviando duas imagens, um quadrado laranja e um retângulo vertical verde. Se o quadrado laranja estiver na primeira posição na caixa de diálogo de upload, como este:

ele posta assim:

Enviando exatamente as mesmas duas imagens, mas invertendo-as, para que o retângulo é o primeiro, como este:

é exibido assim:

O mesmo princípio se aplica se você estiver enviando duas, três ou quatro imagens – o layout sempre seguirá sua sugestão de a imagem primária.

2 imagens com imagem primária horizontal (paisagem)

A largura total passa a 500px. A imagem superior tem 250 pixels de altura; a parte inferior tem 249 px de altura. Há uma linha branca de 2 px entre eles.

2 imagens com imagem primária vertical (retrato)

2 imagens com imagem primária quadrada

3 imagens com imagem horizontal (paisagem ) Imagem primária

Como o layout segue a sugestão da imagem primária, você pode misturar e combinar as orientações das imagens não primárias – elas ainda serão exibidas da mesma forma.

3 imagens com imagem primária vertical (retrato)

3 imagens com imagem primária quadrada

4 imagens com imagem primária horizontal (paisagem)

Você pode misturar e correspondem às orientações das imagens não primárias – elas ainda serão exibidas da mesma forma.

4 imagens com uma imagem primária vertical (retrato)

4 imagens com uma imagem primária quadrada

5 ou mais imagens com uma imagem primária horizontal (retrato)

Ele exibirá as cinco primeiras imagens em uma espécie de padrão de mosaico, como este. Se você incluir mais de cinco imagens, obterá um pequeno botão sobreposto com símbolo para exibir os outros.

5 ou mais imagens com uma imagem primária quadrada ou vertical (retrato)

Você terá a mesma exibição, quer a imagem principal seja um quadrado ou um retângulo vertical.

Fotos de largura total na linha do tempo do Facebook

Sim, elas eram legais. A imagem se estendeu por ambas as colunas. Mas o Facebook acabou com eles em seu redesenho em meados de 2014. Suas atualizações agora só aparecem em uma única coluna e não há como tornar as fotos mais largas do que essa coluna.

Imagens do cabeçalho do evento

Não importa o formato da imagem que você carrega como imagem do cabeçalho para uma postagem de evento, ele será cortado em uma proporção de 16: 9. Para obter melhores resultados, envie uma imagem com 1920 x 1080 pixels. Mas algo a se observar é que na visualização do evento principal é bastante reduzido, então não use fontes que são muito pequenas (as pessoas podem clicar na imagem para abrir uma versão maior, mas nem todo mundo vai fazer que).

Quando é exibido na página principal do evento, é dimensionado para 500 por 262 pixels, assim:

Problemas de qualidade da imagem do Facebook

Algo a ser está ciente de que o Facebook compacta algumas imagens de forma bastante agressiva quando você as carrega e exibe.

Faz sentido – naturalmente, eles querem acelerar o carregamento da página e reduzir a largura de banda aplicando o máximo de compactação possível . Não sou o único a desejar que eles sejam menos agressivos com a compressão, mas o quão perceptível isso vai depender de coisas como a gama de cores em sua imagem e a quantidade de detalhes em sua foto.

Nos exemplos acima, a compressão JPG é muito mais perceptível na versão de montagem do que na versão da Sydney Harbour Bridge. Defino as configurações de qualidade e nitidez da mesma forma para cada um dos originais antes de serem carregados. Alguns usuários relataram que imagens com muitos vermelhos e laranjas parecem mostrar os efeitos da compressão mais do que imagens com azuis e verdes, mas isso depende da imagem real.

Também parece depender do que tipo de imagem que você está exibindo. As imagens da galeria de fotos parecem ter menos compactação aplicada na exibição do que os elementos de design, como a foto da capa e a foto do perfil.

Existem algumas coisas que você pode fazer ao preparar as imagens antes de enviar que podem ajudar a reduzir as chances de sua imagem vai ficar com uma aparência péssima.

Faça upload de imagens com 99 KB ou menos de tamanho. O Facebook deve deixar as imagens menos intocadas, o que dá a você controle sobre como a compactação é aplicada.

Faça upload de imagens que ainda não tenham muita compactação aplicada. Para JPGs, por exemplo, tente manter a configuração de qualidade em 80 ou mais – o Facebook vai compactá-la novamente de qualquer maneira. Se você estiver usando um software que leva em consideração o espaço de cor (como Lightroom ou Photoshop), use o espaço de cor sRGB. E carregar imagens que já foram redimensionadas para ficar perto ou no tamanho de exibição de destino e não excessivamente nítidas parece funcionar bem.

Se nada disso funcionar, dê uma olhada em minha postagem sobre como obter texto nítido nas imagens do Facebook.

Obtendo texto difuso, logotipos ou marcas d’água nas imagens?

Se você estiver incluindo um texto, um logotipo ou marca d’água e descobrir que está ficando confuso e confuso devido aos artefatos JPG, tenho uma postagem separada detalhando como corrigi-lo: Como obter texto nítido em imagens do Facebook.

Metadados de imagem no Facebook

Embora não seja especificamente relacionado a tamanhos de imagem, vale a pena saber que o Facebook remove todos os metadados de suas imagens. Isso inclui todo o GPS, tipo de câmera e outros dados que sua câmera possa incorporar, bem como palavras-chave ou informações de direitos autorais que você possa ter adicionado. (Uma exceção é se você estiver na Alemanha).

Folha de referências das fotos do Facebook

	Largura	Altura	Notas
Foto da capa / Apresentação de slides da capa	820px	360px
Foto do perfil no cabeçalho	172px	172px	Deve ter pelo menos 180px por 180px
Foto do perfil na linha do tempo	40px	40px	Mesma imagem da foto do perfil principal, reduzida automaticamente
Miniatura do link compartilhado	500px	261px	Apenas para miniaturas únicas. Várias miniaturas são cortadas.
Miniatura da foto da linha do tempo carregada	500px máx.	750px máx.	Ver exceções acima para várias imagens.
Imagem do cabeçalho do evento	500px	262px	proporção de 16: 9 só. Para obter melhores resultados, carregue a imagem de 1920 x 1080 px.