As páginas modernas e as peças Web foram concebidas para serem totalmente reativas em todos os dispositivos, o que significa que as imagens utilizadas em peças Web serão dimensionadas de forma diferente dependendo do local onde são apresentadas, do esquema utilizado e do dispositivo no qual estão a ser visualizadas. Por exemplo, as páginas modernas são concebidas para terem um aspeto fantástico em dispositivos móveis e o dimensionamento automático de imagens ajuda a criar essa experiência apelativa.
Que tamanhos de imagem funcionam melhor?
Devido ao design de página responsivo, não há uma altura ou largura específica em pixels que garantirá que uma imagem manterá uma forma específica em todos os dispositivos e layouts. As imagens são redimensionadas e cortadas automaticamente para mostrar o melhor resultado possível em vários dispositivos e esquemas. No entanto, existem algumas diretrizes que podem ajudá-lo a garantir que as suas imagens tenham um aspeto fantástico nas suas páginas.
Encontrar os melhores tamanhos de imagem para a sua página depende destes fatores:
- Proporção: a relação entre a altura e a largura das imagens
- Esquema de colunas: o tipo e número de colunas na sua página
- Esquema da peça Web: o esquema escolhido para a peça Web na qual a imagem está a ser utilizada
Taxa de proporção
Uma proporção é a relação entre a largura e a altura das imagens. Normalmente, é expressa em dois números, como 3:2, 4:3 ou 16:9. A largura é sempre o primeiro número. Por exemplo, uma proporção de 16:9 pode ter 1600 píxeis de largura por 900 píxeis de altura. Ou pode ser 1920 x 1080, 1280 x 720, ou qualquer outra combinação de largura/altura que possa ser calculada como igual a 16:9. Pode encontrar calculadoras de proporção online e em algumas ferramentas de edição de fotografia para o ajudar a determinar a proporção das suas imagens.
Na maioria dos casos, as imagens em peças Web modernas funcionam melhor em esquemas e dispositivos quando têm uma proporção de 16:9 ou 4:3, dependendo do esquema.
Esquemas de colunas
Uma página pode ser estruturada com secções que incluem diferentes tipos de coluna e esquemas, tais como colunas de largura total, uma coluna, duas colunas, três colunas, um terço à esquerda e um terço à direita. Uma regra geral para imagens que devem preencher a largura de uma coluna é que elas sejam, pelo menos, tão largas quanto a coluna na qual são colocadas. Por exemplo, uma imagem numa peça Web Imagem numa coluna deve ter, pelo menos, 1204 píxeis de largura.
A seguir estão as diretrizes de largura para cada um dos layouts de coluna:
| Layout | Largura em píxeis |
|---|---|
| Coluna de largura total | 1920 |
| Uma coluna | 1204 |
| Duas colunas | 586 por coluna |
| Três colunas | 380 por coluna |
| Um terço da coluna da esquerda | 380 para coluna da esquerda; 792 para coluna da direita |
| Uma terceira coluna para a direita | 792 para coluna da esquerda; 380 para coluna da direita |
Devido à capacidade de resposta das páginas, as imagens em colunas de largura total serão sempre apresentadas à largura total do ecrã, com uma altura automática baseada no tamanho do ecrã.
A altura das imagens colocadas noutros esquemas de colunas dependerá da sua proporção. Seguem-se algumas diretrizes de altura/largura para proporções de 16:9 e 4:3 (arredondadas para cima/baixo para o píxel mais próximo). Isto é útil para manter as suas imagens a uma largura e altura adequadas para dispositivos móveis, por exemplo:
| PROPORÇÃO DIAGRAMAÇÃO |
16 x 9 Largura x Altura em pixéis |
4 x 3 Largura x Altura em pixéis |
|---|---|---|
| Uma coluna | 1204 x 677 | 1204 x 903 |
| Duas colunas | 586 x 330 | 586 x 439 |
| Três colunas | 380 x 214 | 380 x 285 |
| Um terço da coluna da esquerda | 380 x 446 para coluna da esquerda; 792 x 446 para coluna da direita | 380 x 594 para coluna da esquerda; 792 x 594 para coluna da direita |
| Uma terceira coluna para a direita | 792 x 446 para coluna da esquerda; 380 x 446 para coluna da direita | 792 x 594 para coluna da esquerda; 380 x 594 para a coluna da direita |
Esquemas de peças Web
Os esquemas nas peças Web que utiliza também irão afetar a forma como as suas imagens são dimensionadas. Os exemplos seguintes mostram diferentes peças Web e algumas das opções e proporções que pode utilizar.
| Web part | Relações de aspeto |
|---|---|
| Peça Web Destaque | As proporções seguintes para esquemas de Mosaicos e Camadas são:
|
| Peça Web Conteúdo Realçado | 16:9 é a proporção para esquemas Carrossel, Película de filme e Grelha. Eis um exemplo da proporção 16:9. A primeira imagem mostra o esquema Película de filme e a segunda mostra o esquema Grelha: 
|
| Peça Web Imagem | As imagens serão expandidas até à largura da secção que contém a peça Web. Eis um exemplo de uma imagem na peça Web Imagem que utilize a proporção 16:9. 
Também pode alterar a proporção ou o recorte à mão livre com a ferramenta de edição de Imagem ou utilizar as alças de redimensionamento para tornar a sua imagem maior ou menor. 
|
| Peça Web Galeria de imagens | As seguintes proporções podem ser utilizadas em diferentes esquemas:
|
| Peça Web Notícias | Dependendo do layout, as imagens na Web Part de Notícias podem ser 4:3, 16:9 ou 21:9. Aqui está um exemplo de imagens em uma história principal e um layout de carrossel: 
|
| Área de título da página | As imagens têm melhor aparência quando são paisagem ou 16:9 ou maior em proporção e quando têm pelo menos 1 MB de tamanho. Além disso, certifique-se de definir um ponto focal para manter a parte mais importante da imagem em exibição, especialmente quando a imagem for usada em miniaturas, layouts de notícias e resultados de pesquisa. Exemplo (imagem original 16:9) com o ponto focal definido no alto-falante: 
|
| Página em miniatura | As miniaturas da página são mostradas em locais como resultados de pesquisa, resultados de conteúdo destacados, postagens de notícias e muito mais. Por padrão, a miniatura vem da área do título da página ou da web part que está na primeira ordem na página (como no canto superior esquerdo de um layout de página). Você pode substituir o padrão e alterar a miniatura da página. Ao fazer isso, é melhor usar uma imagem com uma proporção de 16:9. Exemplo (imagem original 16:9): 
|
| Web Part de Links Rápidos | A Web Part de links rápidos tem seis layouts diferentes. Aqui estão as taxas de proporção predefinidas:
|
Dica
Ao adicionar uma imagem a uma área de título de página ou Web Part em destaque, também é melhor definir o ponto focal na área da imagem que você deseja sempre exibir. Para saber mais sobre como definir um ponto focal para esses dois cenários, consulte Usar a Web Part Hero e Criar e usar páginas modernas em um site do SharePoint.
Recomendações de imagem do cabeçalho do site
Além das páginas, talvez você queira adicionar logotipos ou imagens personalizados em um layout estendido. Aqui estão recomendações de tamanho para esses elementos.
| Elemento | Descrição | Recomendação Largura x Altura em pixels |
|---|---|---|
| Logotipo do Site | Logotipo maior que pode ser não quadrado e transparente, dependendo do design carregado. | 192 x 64 Formato: PNG, JPEG, SVG (SVG não é permitido em sites conectados ao grupo) |
| Miniatura do logotipo do site | Uma miniatura de logotipo quadrado que é usada se nenhum logotipo do site for carregado ou em locais em que um formato quadrado é necessário. Esse elemento é necessário. |
64 x 64 Formato: PNG, JPEG, SVG (SVG não é permitido em sites conectados ao grupo) |
| Logotipo do site de layout estendido | O layout de cabeçalho estendido tem uma largura de logotipo de site estendida. | 300 x 64 Formato: JPEG, PNG, SVG |
| Imagem de plano de fundo de Layout Estendido | Uma nova imagem de plano de fundo que pode ser usada com o cabeçalho estendido. | 2560 x 164 Formato: JPEG, PNG |