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

Proporções e tamanhos para webpart de imagens do SharePoint

Este documento tem como objetivo recomendar proporções e tamanhos para webparts nativas do SharePoint, garantindo que as imagens sejam exibidas corretamente em diversos dispositivos. As recomendações apresentadas aqui foram baseadas na documentação oficial da Microsoft e em testes realizados na nossa intranet, testando diferentes cenários para identificar o que funciona melhor até chegarmos a uma conclusão. Reforçamos que este documento é apenas uma recomendação, e o cliente pode adaptar as imagens ao formato que melhor se adequar à sua intranet.

1- Webpart Hero 

A webpart Hero se comporta melhor, na proporção de 4x3. Essa proporção é retangular, sendo mais próxima de um quadrado do que outras proporções comuns, como 16:9.  
 
Tamanhos comuns para proporção 4x3 na webpart Hero: 

  • 800x600 
  • 1600 x 1200 

Testes realizados na intranet da HyWork: 
 
Identificamos que o tamanho de 800x600 se adequa melhor a webpart deixando os elementos mais visíveis.  

Mesmo utilizando a proporção correta, é importante que as bordas tenham um respiro, visto que dependendo da tela do usuário a webpart pode ficar no formato mais retangular. Isso acontece para telas maiores acima de 21 polegadas. 

Para o tamanho de 800x600 indicamos uma área de conteúdo até 579 x 350. Essa área mantém o conteúdo visível em todos os tamanhos de tela e layouts de colunas do sharepoint.

Caso prefira, você pode reduzir ainda mais a área de conteúdo para garantir que o conteúdo não seja cortado nas extremidades da imagem.



2- Webpart Imagem 

A webpart de imagem do SharePoint é destinada exclusivamente para exibir imagens, diferente da webpart Hero, que é específica para destacar links. Com isso, ela só recebe as imagens de upload do computador ou links de imagens que estão dentro do sharepoint do cliente. 

Essa webpart também se comporta melhor na proporção de 4x3, seguindo as recomendações de tamanho da webpart Hero. 

3- Miniatura webpart de Conteúdos Realçados. 

Essa webpart exibe miniaturas de páginas criadas no SharePoint, utilizando a imagem definida como banner da página. 

Essas páginas devem receber o banner na proporção de 16x9, visto que ela tem o formato retangular. 

Tamanhos comuns para proporção 16x9 na webpart de conteúdos realçados. 

  • 1920 x 1080 px 
  • 1600 x 900 px 
  • 1366 x 768 px 
  • 1280 x 720 px 

Testes realizados na intranet da HyWork: 

Identificamos que o tamanho de 1280 x 720 se adequa melhor a webpart deixando os elementos mais visíveis. 
Ainda assim, é importante que as imagens tenham um respiro de até 20% em relação à área de conteúdo, para garantir que a webpart não corte nas laterais em telas menores. 

4- Banners páginas internas  

Conforme os conteúdos realçados recebem as imagens inseridas no banner das páginas internas, a proporção se mantém em 16:9, resultando em uma imagem mais retangular. 

Tamanhos comuns para proporção 16x9 nos banners das páginas internas. 

  • 1920 x 1080 px 
  • 1600 x 900 px 
  • 1366 x 768 px 
  • 1280 x 720 px  

Identificamos que os tamanhos 1280x 720 se adequa melhor a diferentes tamanhos de tela, porém o cliente deve se atentar ao conteúdo da imagem, visto que para o desktop será preciso posicionar o conteúdo utilizando a funcionalidade de ponto focal do sharepoint. 

Caso o cliente prefira exibir o conteúdo completo da imagem no banner, é necessário definir a área de conteúdo da imagem, com uma altura máxima de 170px. Isso garante que o conteúdo fique completamente visível no banner. 

No entanto, ao definir a área de conteúdo para o banner no desktop, infelizmente, no mobile o conteúdo pode não ser 100% visível, especialmente se houver texto ou ícones na imagem. Por esse motivo, recomendamos que o cliente utilize uma imagem completa de ponta a ponta com a proporção 16:9, e definir no desktop, o ponto focal da imagem, garantindo que no mobile, a imagem fique completa e com as informações visíveis. 

5- Qualidade das imagens 

É perceptível que ao realizar o upload de uma imagem no sharepoint, ele comprime a imagem para se adequar a webpart escolhida, e por isso a qualidade da imagem pode reduzir um pouco. 

6- 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