Pular para o conteúdo
Nosso contato
  • Não há sugestões porque o campo de pesquisa está em branco.

Tamanho de imagens para banners

Neste artigo, você encontrará as dimensões ideais para as imagens dos banners da sua intranet. Aprenda a escolher os tamanhos corretos para garantir que seus banners sejam exibidos de forma otimizada, mantendo uma apresentação visual atraente em diferentes dispositivos. A configuração adequada das imagens é fundamental para uma comunicação eficaz e impactante.

1. Tamanho recomendado para o banner da página inicial:

  • 1200 px de largura por 576 px de altura.
Como a imagem se adapta às diferentes resoluções de tela?

  • A imagem que utilizamos na nossa webpart tem o tamanho de 1200 x 576 px. Para facilitar o entendimento, representamos na imagem abaixo, como o conteúdo será exibido em algumas principais resoluções de tela. Cada área visível é destacada por cores específicas:

    • Azul: Representa a área visível na resolução de 1366 px (telas de laptops comuns).
    • Rosa: Mostra o conteúdo visível na resolução de 800 px (tablets).
    • Vermelho: Indica a área visível na resolução de 1920 px (telas Full HD ou maiores).

Como interpretar as áreas coloridas?

Cada cor na imagem identifica o que será exibido em diferentes resoluções.

Resoluções 2

2. Layout do Banner no HyWork

No SharePoint, você pode personalizar a seção do banner com alguns tipos de colunas.

É importante lembrar que cada tipo de layout da coluna utiliza uma área específica da imagem. Por isso, o administrador de conteúdo deve definir o layout antecipadamente para compreender qual área da imagem será utilizada.

  • Full: Utilize a área visível vermelha de 1190 x 384px para destacar o conteúdo.
  • 1/3 à esquerda ou à direita (mais utilizado): Utilize a área visível vermelha de 1190 x 384px para destacar o conteúdo.
  • Duas colunas: Utilize a área visível azul de 1200 x 550px para destacar o conteúdo.

 

Guia de orientação para o usuário:

Layout de coluna Tamanho da imagem Tamanho da área de conteúdo
 Full 1200 x 576 px 1190 x 384 px
1/3 à esquerda ou à direita (mais utilizado): 1200 x 576 px 1190 x 384 px
 Duas colunas 1200 x 576 px 1200 x 550 px

 

3. Defina o ponto focal da imagem:

Para imagens que não foram criadas no Photoshop, agora o usuário pode definir o ponto focal, garantindo que o conteúdo principal da imagem permaneça visível na área desejada.
Confira o vídeo de demonstração:

 

Recomendações para manter a qualidade da imagem

  • Proporções corretas: Certifique-se de que a imagem tenha uma resolução adequada para o layout onde será utilizada.
    • Webparts no estilo banner: Utilize imagens com proporção de 16:9.
    • Webparts quadradas: Prefira imagens com proporção de 4:3.

  • Tamanho do Arquivo: Mantenha o tamanho do arquivo abaixo de 1 MB para carregamento rápido, mas evite compressão excessiva para não perder qualidade.

  • Imagens com texto: Para garantir a legibilidade, destaque o texto utilizando uma espessura de linha mais grossa, o que melhora a visibilidade dentro da imagem
  • Imagens com ícones: Utilize ícones vetorizados utilizando uma espessura de linha mais grossa, o que melhora a visibilidade dele dentro da imagem

Use nosso guia de proporções para auxiliar na criação da sua imagem. Baixe o arquivo abaixo:

Guia de proporção