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
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:
| Esquema | 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.
| Peça Web | 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 esquema, as imagens na peça Web Notícias podem ser 4:3, 16:9 ou 21:9. Segue-se um exemplo de imagens num esquema de Carrossel e História superior: 
|
| Área de título da página | As imagens têm melhor aspeto quando são horizontais ou têm uma proporção igual ou superior a 16:9 e quando têm, pelo menos, 1 MB de tamanho. Além disso, certifique-se de que define um ponto focal para manter a parte mais importante da imagem à vista, especialmente quando a imagem é utilizada em miniaturas, esquemas de notícias e resultados da pesquisa. Exemplo (imagem original 16:9) com ponto focal definido no altifalante: 
|
| Miniatura da página | As miniaturas das páginas são apresentadas em locais como resultados de pesquisa, resultados de conteúdo realçado, publicações de notícias e muito mais. Por predefinição, a miniatura provém da área de título da página ou da peça Web que está na primeira ordem na página (como no canto superior esquerdo de um esquema de página). Pode substituir a predefinição e alterar a miniatura da página. Quando o fizer, é melhor utilizar uma imagem com uma proporção de 16:9. Exemplo (imagem original 16:9): 
|
| Peça Web Ligações Rápidas | A peça Web Ligações Rápidas tem seis esquemas diferentes. Aqui estão as proporções predefinidas:
|
Sugestão
Quando adiciona uma imagem a uma área de título de página ou à peça Web Destaque, também é melhor definir o ponto focal na área da imagem que pretende apresentar sempre. Para saber mais sobre como definir um ponto focal para estes dois cenários, consulte Utilizar a peça Web Destaque e Criar e utilizar páginas modernas num site SharePoint.
Recomendações de imagens de cabeçalhos de sites
Além das páginas, poderá adicionar logótipos ou imagens personalizados num esquema expandido. Aqui estão recomendações de tamanho para esses elementos.
| Elemento | Descrição | Recomendação Largura x Altura em pixéis |
|---|---|---|
| Logótipo do site | Logótipo 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 ligados a grupos) |
| Miniatura do logótipo do site | Uma miniatura de logótipo quadrado que é utilizada se não for carregado um logótipo do site ou em locais onde é necessário um formato quadrado. Este elemento é obrigatório. |
64 x 64 Formato: PNG, JPEG, SVG (SVG não é permitido em sites ligados a grupos) |
| Logótipo do site com esquema expandido | O esquema de cabeçalho expandido tem uma largura expandida do logótipo do site. | 300 x 64 Formato: JPEG, PNG, SVG |
| Imagem de fundo de Esquema Expandido | Uma nova imagem de fundo que pode ser utilizada com o cabeçalho expandido. | 2560 x 164 Formato: JPEG, PNG |