Dimensionamento e dimensionamento de imagens em páginas modernas do SharePoint

Dimensionamento e dimensionamento de imagens em páginas modernas do SharePoint

Observação: Desejamos fornecer o conteúdo da Ajuda mais recente no seu idioma da forma mais rápida possível. Esta página foi traduzida de forma automatizada e pode conter imprecisões ou erros gramaticais. Nosso objetivo é que este conteúdo seja útil para você. No final da página, deixe sua opinião se estas informações foram úteis para você. Aqui está o artigo em inglês para facilitar a referência.

As páginas e Web Parts modernas são projetadas para serem totalmente responsivas em todos os dispositivos, o que significa que as imagens usadas em Web Parts são dimensionadas de forma diferente, dependendo de onde elas são mostradas, qual layout é usado e o dispositivo no qual elas estão sendo exibidas. Por exemplo, as páginas modernas são projetadas para serem incríveis em dispositivos móveis, e o dimensionamento automático de imagens ajuda a criar essa experiência de aparência.

Exemplos de páginas em dispositivos

Quais tamanhos de imagem funcionam melhor?

Devido ao design da 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 recortadas automaticamente para mostrar o melhor resultado possível em uma variedade de dispositivos e layouts. No enTanto, há algumas diretrizes que podem ajudar você a garantir que suas imagens fiquem ótimas nas suas páginas.

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

  • Taxade proporção: a relação entre a altura e a largura de imagens

  • Layout da coluna: o tipo e o número de colunas na 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 taxa de proporção é a relação entre a largura e a 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 ter 1600 pixels de largura por 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 para igual a 16:9. Você pode encontrar calculadoras de taxa de proporção online e em algumas ferramentas de edição de fotos para ajudá-lo a determinar as taxas de proporção de suas imagens. 

Exemplos de taxas de proporção de 16:9 e 4:3.

Na maioria dos casos, as imagens em Web Parts modernas funcionam melhor em layouts e dispositivos quando têm uma taxa de proporção de 16:9 ou 4:3, dependendo do layout.

Layouts de coluna

Uma página pode ser disposta com seções que incluem diferentes tipos e layouts de coluna, como colunas de largura total, uma coluna, duas colunas, três colunas, uma terceira-terceira colunas à esquerda e uma-terceira à direita. Uma regra geral para imagens esperadas para preencher a largura de uma coluna é que elas são pelo menos tão largos quanto a coluna na qual elas são colocadas. Por exemplo, uma imagem em uma Web Part de imagem em uma coluna deve ter pelo menos 1204 pixels de largura. Veja a seguir 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 um terço à esquerda

380 para a coluna esquerda; 792 para a coluna direita

Coluna um terço à direita

792 para a coluna esquerda; 380 para a coluna direita

Devido à boa natureza das páginas, as imagens em colunas de largura total sempre serão exibidas com a largura total da tela com uma altura automática com base no tamanho da tela.

A altura das imagens colocadas dentro de outros layouts de coluna dependerá da sua taxa de proporção. Aqui estão as diretrizes de altura/largura para 16:9 e 4:3 taxas de proporção (arredondadas para cima/para baixo até o pixel mais próximo). Isso é útil para manter suas imagens com largura e altura que são dimensionadas apropriadamente para dispositivos móveis, por exemplo.

TAXA DE PROPORÇÃO

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

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

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

Coluna um terço à direita

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

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

Layouts de Web Part

Os layouts nas Web Parts que você usa também afetarão a forma como as imagens são dimensionadas. Os exemplos a seguir mostram diferentes Web Parts e seus layouts dentro de uma coluna e as taxas de proporção que são usadas em cada uma.

Considere esta imagem que tem uma taxa de proporção original de 16:9:

Exemplo de imagem 16_9

Veja a seguir exemplos dessa imagem mostrada em um layout de página de uma coluna em diferentes Web Parts e layouts.

Web Part herói

As seguintes taxas de proporção para layouts de blocos e camadas são:

  • Blocos: a altura da Web Part é dimensionada para acompanhar uma taxa de proporção de 8:3 e as imagens dentro da Web Part são dimensionadas para uma taxa de proporção de 4:3.

  • Camadas: uma camada individual é dimensionada para uma taxa de proporção de 8:3 e as imagens dentro de cada escala de camada para uma taxa de proporção próxima a 16:9.

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

Aqui está um exemplo de uma imagem mostrada no layout de camadas (superior) e layout de blocos (abaixo)

Exemplo de imagens de Web Part do herói em camadas e layouts de blocos

Web Part de conteúdo reAlçado

16:9 é a taxa de proporção para os layouts do carrossel, do Diafilme e dos cartões.

Aqui está um exemplo de uma imagem mostrada no layout da película (superior) e no layout dos cartões (abaixo).

Exemplos de imagem de Web Part de conteúdo reAlçado

Web Part de imagem

As imagens se expandirão até a largura da seção que contém a Web Part. Você tem a opção de alterar a taxa de proporção ou o corte de graça usando a barra de ferramentas de imagem.

Veja a seguir um exemplo mostrando as marcas de corte de imagem (linhas azuis) em 4:3

Imagem mostrando marcas de corte no 4:3

Web Part galeria de imagens

As seguintes taxas de proporção são usadas em layouts diferentes:

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

  • Blocos, cartões: 4:3

Aqui está um exemplo de uma imagem mostrada no layout de blocos (superior) e layout de tijolos (abaixo)

Exemplo de blocos e layouts de tijolos para a Web Part galeria de imagens

Web Part de 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 superior e um layout de carrossel.

Exemplos de imagem de layouts de notícias

Área de título da página

As imagens têm melhor aparência quando são paisagem ou 16:9 ou maior em taxa de 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 no modo de exibição, 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 alto-falante.

Exemplo de uma imagem do 16:9 na área de 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 realçados, Postagens de notícias e muito mais. Por padrão, a miniatura vem da área de título da página ou da Web Part que está na primeira ordem na página (como no canto superior esquerdo do layout de uma página). Você pode substituir o padrão e alterar a miniatura da página. Ao fazer isso, é melhor usar uma imagem com uma taxa de proporção de 16:9.

Exemplo (imagem original 16:9)

Exemplo de uma imagem em miniatura de página na Web Part de conteúdo reAlçado

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 recomendadas:

  • Película, grade, botão: 16:9

  • Compact, lista, blocos: 1:1, 4:3

Aqui está um exemplo de uma imagem mostrada em um layout compacto (superior) e um layout de película (inferior)

Exemplos de imagens em layouts de links rápidos

Dicas: 

Expanda suas habilidades no Office
Explore o treinamento
Obtenha novos recursos primeiro
Ingressar no Office Insider

Essas informações foram úteis?

Obrigado por seus comentários!

Agradecemos pelos seus comentários! Parece que pode ser útil conectar você a um de nossos agentes de suporte do Office.

×