Otimização de imagem do SharePoint Online

A velocidade do carregamento de uma página da Web depende do tamanho combinado de todos os componentes necessários para renderizar a página, incluindo imagens, HTML, JavaScript e CSS. As imagens são uma ótima forma de tornar seu site mais atraente, mas seu tamanho pode afetar o desempenho. É possível deslocar os efeitos de imagens muito grandes ao otimizar suas imagens com compactação e redimensionamento e usar sprites. Com as reproduções de imagem do SharePoint, você pode carregar uma única imagem grande e exibir seções da imagem permitindo que ela seja reutilizada em vez de ser recarregada.

Usar sprites para agilizar o carregamento de imagens no SharePoint Online

Um sprite de imagem contém muitas imagens menores. Com o CSS, você pode escolher uma parte da imagem composta para exibir em uma determinada parte da página com posicionamento absoluto. Você basicamente move uma única imagem pela página em vez de carregar várias imagens e tornar uma pequena parte da imagem visível em uma pequena janela onde a parte necessária da imagem de sprite é exibida para o usuário final. O SharePoint Online usa sprites para exibir seus vários ícones no sprite spcommon.png.

O que é abordado 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 apenas uma imagem é baixada em vez de várias e, em seguida, essa imagem é armazenada em cache e reutilizada. Mesmo que a imagem não fique armazenada em cache, com uma única imagem em vez de várias imagens, este método reduz o número total de solicitações HTTP para o servidor que reduzirá os tempos de carregamento da página. Isso, na verdade, é uma forma de agrupamento de imagem. Essa é uma técnica muito útil se as imagens não se alterarem com muita frequência, por exemplo, os ícones, conforme mostrado no exemplo do SharePoint fornecido acima. Veja como você pode usar o Web Essentials, um projeto de terceiros de código aberto da comunidades para alcançar isso facilmente no Microsoft Visual Studio. Para obter mais informações, confira 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

As representações de imagem são um recurso do SharePoint Online que permite atender a diferentes versões de imagens com base em dimensões predefinidas da imagem. Isso é especialmente importante quando há conteúdo de imagem gerado pelo usuário ou as dimensões da imagem, como largura e altura, são corrigidas pelo CSS no site. Mesmo que uma imagem seja corrigida por CSS, a imagem de alta resolução 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 individualmente, por representação. Cortar as imagens acelera o carregamento da página usando o cache de blog do SharePoint para criar uma versão da imagem para cada representação. Dessa forma, a carga do servidor é reduzida porque a imagem só é redimensionada uma vez e, em seguida, está pronta para atender aos usuários por diversas vezes. Para obter mais informações sobre como cortar uma representação de imagem, consulte Cortar uma representação de imagem.

Expanda suas habilidades
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.

×