Dimensionamento de imagem e escala em páginas modernas do SharePoint

Dimensionamento de imagem e escala em páginas modernas do SharePoint

As páginas modernas e as peças web são projetadas para serem totalmente responsivas entre os dispositivos, o que significa que as imagens utilizadas nas partes web vão escalar de forma diferente dependendo do local onde são mostradas, qual o layout utilizado e do dispositivo em que estão a ser visualizadas. Por exemplo, as páginas modernas são projetadas para ficar bem em dispositivos móveis, e a escala automática de imagem ajuda a criar essa experiência atraente.

Exemplos de páginas em todos os dispositivos

Que tamanhos de imagem funcionam melhor?

Devido ao design de página responsiva, não existe 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 através de uma variedade de dispositivos e layouts. No entanto, existem algumas diretrizes que podem ajudá-lo a garantir que as suas imagens ficam bem nas suas páginas.

Encontrar os melhores tamanhos de imagem para a sua página depende destes fatores:

  • Relação de aspeto:a relação entre a altura e a largura das imagens

  • Layout da coluna:o tipo e o número de colunas na sua página

  • Layout da peça web: o layout que escolhe para a parte web em que a imagem está sendo usada

Proporção

Uma relação de aspeto é a relação entre a largura e a altura das imagens. Geralmente é expresso como dois números, tais como 3:2, 4:3 ou 16:9. A largura é sempre o primeiro número. Como exemplo, uma razão de 16:9 pode ser de 1600 pixels de largura por 900 pixels de altura. Ou, pode ser 1920 x 1080, 1280 x 720, ou quaisquer outras combinações de largura/altura que possam ser calculadas como iguais a 16:9. Pode encontrar calculadoras de rácio de aspeto online e em algumas ferramentas de edição de fotos para ajudá-lo a determinar os rácios de aspeto das suas imagens. 

Exemplos de rácios de aspeto de 16:9 e 4:3.

Na maioria dos casos, as imagens em partes web modernas funcionam melhor entre layouts e dispositivos quando têm uma relação de aspeto de 16:9 ou 4:3, dependendo do layout.

Layouts de colunas

Uma página pode ser definida com secções que incluem diferentes tipos de colunas e layouts, tais como colunas de largura total, uma coluna, duas colunas, três colunas, um terço à esquerda e um terço direito. Uma regra geral para as imagens que se espera que preencham a largura de uma coluna é que elas são pelo menos tão largas como a coluna em que são colocadas. Por exemplo, uma imagem numa imagem web numa coluna deve ter pelo menos 1204 pixels de largura. Seguem-se as diretrizes de largura para cada um dos layouts da coluna:

Esquema

Largura em pixels

Coluna de largura total

1920

Uma coluna

1204

Duas colunas

586 por coluna

Três colunas

380 por coluna

Coluna esquerda de um terço

380 para coluna esquerda; 792 para coluna direita

Coluna direita de um terço

792 para coluna esquerda; 380 para coluna direita

Devido à natureza responsiva das páginas, as imagens em colunas de largura total serão sempre exibidas a toda a largura do ecrã com uma altura automática baseada no tamanho do ecrã.

A altura das imagens colocadas dentro de outros layouts de colunas dependerá da sua relação de aspeto. Aqui estão as diretrizes de altura/largura para os rácios de aspeto 16:9 e 4:3 (arredondado/baixo para o pixel mais próximo). Isto é útil para manter as suas imagens a uma largura e altura que escala adequadamente para dispositivos móveis, por exemplo.

RELAÇÃO DE ASPETO

16 x 9

4 x 3

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 esquerda de um terço

380 x 446 para coluna esquerda; 792 x 446 para coluna direita

380 x 594 para coluna esquerda; 792 x 594 para coluna direita

Coluna direita de um terço

792 x 446 para coluna esquerda; 380 x 446 para coluna direita

792 x 594 para coluna esquerda; 380 x 594 para coluna direita

Layouts de partes web

Os layouts nas partes web que utiliza também afetarão a forma como as suas imagens se escalam. Os exemplos seguintes mostram diferentes partes web e seus layouts dentro de uma coluna, e os rácios de aspeto que são usados em cada uma.

Considere esta imagem que tem uma relação de aspeto original de 16:9:

Exemplo de imagem 16_9

Seguem-se exemplos desta imagem mostrada num layout de página de uma coluna, em diferentes partes web e layouts.

Parte da web do herói

As seguintes relações de aspeto para os layouts de azulejos e camadas são:

  • Azulejos: a altura da parte web é dimensionada para seguir uma relação de aspeto de 8:3, e imagens dentro da escala da parte web para uma relação de aspeto de 4:3.

  • Camadas: Uma camada individual escala para uma relação de aspeto de 8:3, e imagens dentro de cada escala de camada para uma relação de aspeto perto de 16:9.

  • Em dispositivos móveis, um layout de carrossel é usado às 16:9.

Aqui está um exemplo de uma imagem mostrada no layout Layers (topo) e layout tiles (em baixo)

Exemplo de imagens de parte da web hero em layouts de camadas e azulejos

Parte web de conteúdo destacado

16:9 é a relação de aspeto para os layouts de Carrossel, Filmstrip e Cards.

Aqui está um exemplo de uma imagem mostrada no layout filmstrip (topo) e no layout de cartões (em baixo).

Exemplos de imagem de parte web de conteúdo destacado

Parte web de imagem

As imagens expandir-se-ão para a largura da secção que contém a parte web. Tem a opção de alterar a relação de aspeto ou a cultura em liberdade utilizando a barra de ferramentas Image, ou utilizar as pegas de redimensionamento para tornar a sua imagem maior ou menor.

Aqui está um exemplo mostrando marcas de cultura de imagem (linhas azuis) em 4:3

Imagem mostrando marcas de colheita em 4:3

Imagem Galeria web parte

As seguintes relações de aspeto são utilizadas em diferentes layouts:

  • O layout dos tijolos respeita a relação de aspeto de todas as imagens mostradas: 16:9, 1:1, 4:3, e assim por diante. 

  • Azulejos, Cartões: 4:3

Aqui está um exemplo de uma imagem mostrada no layout tiles (topo) e layout de tijolos (em baixo)

Exemplo de layouts de azulejos e tijolos para a parte web da galeria de imagem

Parte da web de notícias -

Dependendo do layout, as imagens na parte da web do News podem ser 4:3, 16:9 ou 21:9. Aqui está um exemplo de imagens em uma história de topo e um layout carrossel.

Notícias layouts exemplos de imagem

Área do título da página

As imagens ficam melhor quando são paisagísticas ou 16:9 ou maior estoiros na relação de aspeto, 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 à vista, especialmente quando a imagem é usada em miniaturas, layouts de notícias e resultados de pesquisa.

Exemplo (imagem original 16:9) com ponto focal definido no altifalante.

Exemplo de uma imagem de 16:9 na área do título da página.

Miniatura de página

As miniaturas de página são mostradas em locais como resultados de pesquisa, resultados de conteúdo destacados, publicações de notícias e muito mais. Por padrão, a miniatura vem da área do título da página ou da parte web que está na primeira ordem na página (como por exemplo, a parte superior esquerda de um layout de página). Pode anular o padrão e alterar a miniatura da página. Quando o faz, é melhor usar uma imagem com uma relação de aspeto de 16:9.

Exemplo (imagem original 16:9)

Exemplo da imagem da miniatura da página na parte web do conteúdo destacado

Parte web de Links Rápidos 

A parte web de links rápidos tem seis layouts diferentes. Aqui estão as relações de aspeto recomendadas:

  • Tira de filme, grelha, botão: 16:9

  • Compacto, Lista, Azulejos: 1:1, 4:3

Aqui está um exemplo de uma imagem mostrada em um layout compacto (topo) e um layout filmstrip (em baixo)

Exemplos de imagens nos layouts quick links

Sugestões: 

  • Quando adiciona uma imagem a uma área de título de página ou a uma peça web de herói, também é melhor definir o ponto focal na área da imagem que pretende sempre exibir. Para saber mais sobre a definição de um ponto focal para estes dois cenários, consulte Alterar o ponto focal de uma imagem na parte web do Herói e personalizar a área do título numa página.

  • Ponto focal

Nota:  Esta página foi traduzida automaticamente e pode conter erros gramaticais ou imprecisões. O nosso objetivo é que estes conteúdos lhe sejam úteis. Pode indicar-nos se estas informações foram úteis? Eis o artigo em inglês para sua referência.​

Aumente os seus conhecimentos do Office
Explore as formações
Seja o primeiro a obter novas funcionalidades
Adira ao Office Insider

As informações foram úteis?

Obrigado pelos seus comentários!

Obrigado pelo seu feedback! Parece que poderá ser benéfico reencaminhá-lo para um dos nossos agentes de suporte do Office.

×