Otimização de imagem do SharePoint Online

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ê. As informações foram úteis? Dê sua opinião no final desta página. Aqui está o artigo em inglês para facilitar a referência.

A velocidade de carregamento de uma página da Web depende o tamanho combinado de todos os componentes necessários para processar a página, incluindo imagens, HTML, JavaScript e CSS. Imagens são uma ótima maneira para tornar seu site mais atraente, mas seu tamanho pode afetar o desempenho. Otimizando suas imagens com a compactação de redimensionamento e uso de sprites, você pode compensar os efeitos de imagens muito grandes. Usar representações de imagem do SharePoint, você pode carregar uma única imagem grande e exibir seções da imagem permitindo que ele ser reutilizadas em vez de recarregar.

Usar sprites para agilizar o carregamento de imagens no SharePoint Online

Um sprite imagem contém muitas imagens menores. Usando CSS que você selecione uma parte da imagem composta para exibir uma determinada parte da página com posicionamento absoluto. Basicamente, você move uma única imagem em torno da página em vez de carregar várias imagens e tornar uma pequena parte da imagem visível por meio de uma pequena janela onde a parte necessária da imagem sprite é mostrada para o usuário final. SharePoint Online usa sprites para exibir seus vários ícones no spcommon.png sprite.

O que é coberto aqui:

  • Compactação da imagem

  • Otimização da imagem

  • Representações de imagem do SharePoint

Captura de tela do spcommon

Isso pode aumentar o desempenho porque você baixar apenas uma imagem em vez de vários e, em seguida, cache e reutilizar aquela imagem. Mesmo que a imagem não permanecem armazenadas em cache, fazendo com que uma única imagem em vez de várias imagens, esse método reduz o número total de solicitações HTTP para o servidor que irá reduzir os tempos de carregamento de página. Isto é, na verdade, uma forma de agrupamento de imagem. Essa é uma técnica muito útil se as imagens não estão alterando frequentemente, por exemplo, ícones, conforme mostrado no exemplo SharePoint fornecido acima. Você pode como usar o Web Essentials, um projeto de terceiros, código-fonte aberto, baseado em comunidade para fazer isso facilmente no Microsoft Visual Studio. Para obter mais informações, consulte minimização e agrupamento no SharePoint Online.

Usar a compactação e otimização de imagens para acelerar o carregamento de páginas no SharePoint

A otimização e a compactação de imagem trata da redução do tamanho do arquivo das imagens que você usa em seu site. Muitas vezes, a melhor técnica para reduzir o tamanho de uma imagem é redimensioná-la com as dimensões máximas que aparecerão no site. Não faz sentido ter uma imagem maior que nunca será exibida. Usar um editor de imagens para verificar que as imagens têm as dimensões corretas é uma maneira rápida e fácil de reduzir o tamanho da sua página.

Assim que as imagens estiverem no tamanho certo, a próxima etapa será otimizar a compactação dessas imagens. Há várias ferramentas disponíveis para serem usadas na compactação e otimização, incluindo a Galeria de Fotos e ferramentas de terceiros. A chave para a compactação é reduzir o tamanho do arquivo tanto quanto possível sem perder qualquer qualidade perceptível para usuários finais. Não se esqueça de testar seus arquivos compactados em uma exibição de alta definição para verificar se eles ainda terão uma boa aparência.

Acelerar o download de páginas usando representações de imagem do SharePoint

Representações de imagem são um recurso no SharePoint Online que permite atender a diferentes versões de imagens com base nas dimensões de imagem predefinidos. Isso é especialmente importante quando há conteúdo de imagem gerados pelo usuário ou as dimensões da imagem como largura e altura corrigidas pelo CSS no site. Mesmo se uma imagem é fixo por CSS, a imagem de resolução total é ainda carregada. Nesse caso, o tamanho do arquivo pode ser reduzido usando representações de imagem.

Observação: As representações só estão disponíveis para o SharePoint quando a publicação está habilitada. Você pode habilitar a publicação em Configurações > Configurações do Site > Gerenciar recursos do site > Publicação do SharePoint Server. Caso contrário, a opção não será exibida.

O redimensionamento da representação de imagem funciona ao usar a menor dimensão definida (largura ou altura) e, em seguida, redimensionar a imagem para que a dimensão seja redimensionada automaticamente com base na taxa de proporção bloqueada. Por padrão, ela cortará a imagem a partir do centro usando as dimensões restantes. Por exemplo, se você definir uma representação de 100 px de largura e 50 px de altura e sua imagem original tiver 1.000 px de largura e 800 px de altura, ela será redimensionada para que a dimensão de 800 px seja de 50 px e a dimensão de 1.000 px (agora de 62,5 px) seja cortada a partir do centro da imagem.

As etapas são relativamente simples mas, para que as imagens usem as representações, elas precisam estar no site do SharePoint antes que as imagens sejam adicionadas. Além disso, você também precisa ter os recursos Infraestrutura de Publicação do SharePoint Server (Nível do Conjunto de Sites) e Publicação do SharePoint Server (Nível de Site) ativados.

Adicionar uma representação de imagem para acelerar o carregamento da página

  1. Verifique se a conta de usuário que está executando esse procedimento tem, no mínimo, permissões de Design para o site de nível superior do conjunto de sites e que o site está sendo publicado em uma página da Web.

  2. Em um navegador da Web, vá para o site de nível superior do conjunto de sites de publicação.

  3. Escolha o ícone Configurações.

  4. Na página Configurações do Site, na seção Aparência, você verá as representações de imagem internas.

    Você pode usar as representações prontas ou escolher Representações de Imagem para criar uma nova.

    Captura de tela da representação de imagem
  5. Na página Representações de Imagem, escolha Adicionar novo item.

    Captura de tela de Adicionar novo item
  6. Na página Nova Representação de Imagem, em Nome digite um nome para a representação.

  7. Nas caixas de texto Largura e Altura, digite a largura e a altura, em pixels, da representação e, em seguida, escolha Salvar.

    Captura de tela do nome da representação de imagem

Personalizar corte com representações de imagem no SharePoint

Por padrão, uma representação de imagem é gerada a partir do centro da imagem. Você pode ajustar a representação de imagem para imagens individuais cortando a parte da imagem que você deseja usar. Você pode cortar as imagens de forma individual, por representação. As imagens de corte acelera a página carregar usando cache de blob do SharePoint para criar uma versão da imagem para cada representação. Dessa maneira a carga do servidor é reduzida porque a imagem somente é redimensionada uma vez e, em seguida, está pronta para atender aos usuários finais várias vezes. Para obter mais informações sobre como cortar uma representação de imagem, consulte Cortar uma representação de imagem.

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.

×