Páginas modernas e web parts são projetadas para serem totalmente responsivas entre dispositivos, o que significa que as imagens usadas em web parts serão dimensionadas de forma diferente, dependendo de onde elas são mostradas, qual layout é usado e o dispositivo no qual estão sendo exibidas. Por exemplo, páginas modernas são projetadas para ficar ótimas em dispositivos móveis, e o dimensionamento automático de imagens ajuda a criar essa experiência atraente.
Quais tamanhos de imagem funcionam melhor?
Devido ao design de página responsivo, não há uma altura ou largura específica em pixels que garanta que uma imagem mantenha uma forma específica entre dispositivos e layouts. As imagens são redimensionadas e cortadas automaticamente para mostrar o melhor resultado possível em uma variedade de dispositivos e layouts. No entanto, há algumas diretrizes que podem ajudá-lo a garantir que suas imagens fiquem ótimas em suas páginas.
Encontrar os melhores tamanhos de imagem para sua página depende desses fatores:
- Proporção: a relação entre altura e largura das imagens
- Layout da coluna: o tipo e o número de colunas em sua página
- Layout da Web Part: o layout escolhido para a Web Part na qual a imagem está sendo usada
Taxa de proporção
Uma proporção é a relação entre largura e altura das imagens. Geralmente é expresso como dois números, como 3:2, 4:3 ou 16:9. A largura é sempre o primeiro número. Como exemplo, uma proporção de 16:9 pode ser de 1600 pixels de largura em 900 pixels 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. Você pode encontrar calculadoras de proporção de aspectos online e em algumas ferramentas de edição de fotos para ajudá-lo a determinar as proporções de suas imagens.
Na maioria dos casos, as imagens em web parts modernas funcionam melhor entre layouts e dispositivos quando têm uma proporção de 16:9 ou 4:3, dependendo do layout.
Layouts de coluna
Uma página pode ser definida com seções que incluem diferentes tipos de coluna e layouts, como colunas de largura completa, 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 em uma web part de imagem em uma coluna deve ter pelo menos 1204 pixels de largura.
A seguir estão as diretrizes de largura para cada um dos layouts de coluna:
| Layout | Largura em pixels |
|---|---|
| Coluna de largura total | 1920 |
| Uma coluna | 1204 |
| Duas colunas | 586 por coluna |
| Três colunas | 380 por coluna |
| Coluna de um terço à esquerda | 380 para a coluna esquerda; 792 para coluna à direita |
| Uma coluna à direita de um terço | 792 para a coluna esquerda; 380 para coluna à direita |
Devido à natureza responsiva das páginas, as imagens em colunas de largura total sempre serão exibidas em largura total da tela com uma altura automática com base no tamanho da tela.
A altura das imagens colocadas em outros layouts de coluna dependerá da sua proporção. Aqui estão as diretrizes de altura/largura para as proporções de 16:9 e 4:3 (arredondadas para cima/para baixo para o pixel mais próximo). Isso é útil para manter suas imagens em uma largura e altura que é dimensionada adequadamente para dispositivos móveis, por exemplo:
| PROPORÇÃO LAYOUT |
16 x 9 Largura x Altura em pixels |
4 x 3 Largura x Altura em pixels |
|---|---|---|
| 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 |
| Coluna de um terço à esquerda | 380 x 446 para a coluna esquerda; 792 x 446 para coluna à direita | 380 x 594 para a coluna esquerda; 792 x 594 para coluna à direita |
| Uma coluna à direita de um terço | 792 x 446 para a coluna esquerda; 380 x 446 para coluna à direita | 792 x 594 para a coluna esquerda; 380 x 594 para coluna à direita |
Layouts da Web Part
Os layouts nas web parts que você usa também afetarão a escala de imagens. Os exemplos a seguir mostram diferentes web parts e algumas das opções e as proporções que você pode usar.
| Web Part do herói | As seguintes proporções para layouts de Blocos e Camadas são:
|
| Web Part de conteúdo realçado | 16:9 é a proporção para layouts de Carrossel, Filmstrip e Grade. Aqui está um exemplo da proporção 16:9. A primeira imagem mostra o layout filmstrip e a segunda mostra o layout da grade: 
|
| Web Part de imagem | As imagens serão expandidas para a largura da seção que contém a Web Part. Aqui está um exemplo de uma imagem na Web Part de imagem que usa a proporção 16:9. 
Você também tem a opção de alterar a proporção ou o corte livre usando a ferramenta de edição de imagem ou usar os identificadores de redimensionamento para tornar sua imagem maior ou menor. 
|
| Web Part da galeria de imagens | As seguintes proporções podem ser usadas em layouts diferentes:
|
| Web Part de notícias | Dependendo do layout, as imagens na Web Part do News podem ser 4:3, 16:9 ou 21:9. Aqui está um exemplo de imagens em uma história top e um layout do Carrossel: 
|
| Área de título da página | As imagens têm um aspeto melhor quando são paisagísticas ou 16:9 ou superiores na proporção 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 de pesquisa. Exemplo (imagem original 16:9) com ponto focal definido no altifalante: 
|
| Miniatura da página | As miniaturas de páginas são apresentadas em locais como resultados de pesquisa, resultados de conteúdo realçados, 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 (por exemplo, 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. Eis as proporções predefinidas:
|
Dica
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 do SharePoint.
Recomendações de imagem do cabeçalho do site
Além das páginas, poderá querer adicionar logótipos ou imagens personalizados num esquema expandido. Seguem-se recomendações de tamanho para esses elementos.
| Elemento | Descrição | Recomendação Largura x Altura em píxeis |
|---|---|---|
| Logotipo do Site | Logótipo maior que pode ser não quadrado e transparente consoante a estrutura carregada. | 192 x 64 Formato: PNG, JPEG, SVG (SVG não é permitido em sites ligados a grupos) |
| Miniatura do logótipo do site | Uma miniatura do logótipo quadrado que é utilizada se não for carregado nenhum logótipo do site ou em locais onde seja 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 de 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 esquema expandido | Uma nova imagem de fundo que pode ser utilizada com o cabeçalho expandido. | 2560 x 164 Formato: JPEG, PNG |