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

Tamanho de imagens para destaques

Neste artigo, você encontrará as dimensões ideais para as imagens dos destaques da sua intranet. Aprenda a escolher os tamanhos corretos para garantir que seus destaques 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.

Tamanhos recomendados de imagens para webpart de destaques

1. Layout dos destaques no HyWork

Na intranet, o administrador pode definir até 4 itens para os destaques. O layout da webpart se ajusta automaticamente de acordo com o número de itens definidos, seguindo as seguintes proporções:

  • 4 itens: As imagens são exibidas na proporção 4:3.
  • 3 itens: Duas imagens utilizam a proporção 4:3 e uma imagem utiliza a proporção 3:4.

  • 2 itens: Todas as imagens são exibidas na proporção 3:4.

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

Recomendação para imagens com conteúdo nas extremidades:

Layout de coluna Tamanho da imagem Área segura de conteúdo para atender desktop e mobile
4 itens (4:3) 480 x 368 px 440 x 328 - 20px de distância das bordas
3 itens (4:3 e 3:4) 480 x 368 (4:3) e 562 x 728 (3:4) 440 x 328 (4:3) e 241 x 324 (3:4) - 20px de distância das bordas
2 itens (3:4) 562 x 728 280 x 364 - 20px de distância das bordas

Recomendação para imagens com ícones:

Layout de coluna Tamanho da imagem Tamanho recomendado do ícone
4 itens (4:3) 480 x 368 px Mínimo 100 x 100px
3 itens (4:3 e 3:4) 480 x 368 (4:3) e 562x728 (9:16) Mínimo 100 x 100 px 
2 itens (3:4) 562 x 728 Mínimo 100x 100 px 

Exemplo de imagens utilizando ícones com 100px:

Caso o administrador de conteúdo deseje destacar o conteúdo tanto no desktop quanto no mobile, recomendamos o uso de imagens com ícones consistentes, seguindo o formato indicado acima. Isso garante que o conteúdo se destaque, independentemente da resolução de tela.

3. Recomendações para manter a qualidade da imagem

  • Proporções corretas: Certifique-se de que a imagem tenha uma proporção adequada para o layout onde será utilizada.
  • 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.