Tamanho de imagens para webpart de banners internos - HyWork
Descubra as especificações recomendadas para o tamanho de imagens utilizadas nas webparts de banners internos da HyWork. Este guia aborda dimensões ideais para diferentes dispositivos, formatos de imagem suportados e dicas para garantir a melhor qualidade visual e desempenho na intranet.
1. Banner versão desktop
Upload Específico para Desktop
- Upload otimizado para imagens exclusivas de desktop
Possibilidade de Customização Avançada
- Ajuste de Imagem: Definir "Fit" ou "Fill" com cor de fundo para "Fit".
- Conteúdo: Alinhamento (direita, centro, esquerda), posicionamento (horizontal/vertical) e espaçamento interno.
- Texto: Configuração de tamanho, alinhamento, cor e estilo para títulos e descrições.
- Categoria: Personalizar cor do texto e fundo.
- Imagem: Adicionar bordas arredondadas para personalização.

Tamanhos recomendados para a webpart desktop
- 1800px de largura por 864px de altura.
Como a imagem se adapta às diferentes resoluções de tela?
-
A imagem que utilizamos nesse espaço, tem o tamanho de 1800 x 864 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:
- Vermelha Representa a área visível na resolução de 800px (tablets).
-
- Amarela: Mostra o conteúdo visível na resolução de 1336px (telas de laptops menores que o padrão).
- Azul: Indica a área visível na resolução de 1660px (telas de laptops comuns).
- Verde: Indica a área visível na resolução de 1920px (telas Full HD ou maiores).
Como interpretar as áreas coloridas?
Cada cor na imagem identifica o que será exibido em diferentes resoluções.
Layout do Banner no HyWork utilizando a mesma o mesmo tamanho de imagem
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 verde de 1800 x 384px para destacar o conteúdo.
- 1/3 à esquerda ou à direita (mais utilizado): Utilize a área visível verde de 1800 x 384px para destacar o conteúdo.
- Duas colunas: Utilize a área visível vermelha de 1800 x 844px para destacar o conteúdo.
- 3 colunas utilizando um espaço de 30%: Utilize a área visível vermelha de 1800 x 844px 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 | 1800x864 px | 1800 x 384px |
| 1/3 à esquerda ou à direita (mais utilizado): | 1800x864 px | 1800 x 384px |
| Duas colunas | 1800x864 px | 1800 x 844px |
| 1 coluna de 3 |
1800x864 px | 1800 x 844px |
Utilizando tamanhos específicos para cada opção de layout:
Você pode se adaptar melhor utilizando tamanhos específicos para cada opção de layout, mas ainda sim é importante que você se atente as proporções parecidas.
- Full: Proporção de 16:9.
- 1/3 à Esquerda ou Direita: Proporção de 16:9.
- Duas Colunas: Proporção de 16:9.
- 1 Coluna de 3: Proporção de 4:3.
O layout que utiliza 30% da seção ajusta automaticamente a altura da imagem enviada. Se você utilizar uma imagem com proporção 16:9, a altura será reduzida, enquanto uma imagem com proporção 4:3 resultará em uma altura maior.
Banner versão Mobile
Upload Específico para Mobile:
- Upload otimizado para imagens exclusivas de Mobile
Comportamentos da webpart:
- No mobile, as customizações feitas para o desktop não são aplicadas devido às limitações de espaço na tela.
- Nas páginas internas, as informações de texto serão exibidas abaixo da imagem.

- Na página inicial, apenas o título ficará dentro da imagem, funcionando como imagem e texto
[imagem em preparação]
2. Tamanho recomendado para imagens do mobile
- Temos uma largura mínima de 640 px, o que permite ao cliente fazer o upload de imagens com altura maior que a largura, e a imagem ocupará o espaço disponível na tela.