Hospedagem de sites

Melhorando o Desempenho do Website – Servindo Imagens Escaladas

 O que são imagens em escala?

Imagens escalonadas são aquelas cujo tamanho corresponde exatamente com o tamanho definido em CSS ou HTML. Digamos que um usuário de um site carrega uma imagem de dimensão de 400 x 400 e usa-a como uma miniatura de 40 x 40 usando HTML / CSS. Isso significa que o navegador terá que baixar primeiro o arquivo grande e reduzi-lo antes de exibi-lo. Um método mais eficiente seria redimensionar a imagem para 40 x 40 para que o navegador não precisasse baixar e diminuir a imagem de forma ineficiente.

Benefícios do fornecimento de imagem em escala

O uso de imagem de tamanho adequado pode salvar muitos bytes de dados e melhorar o desempenho do seu site, especialmente em dispositivos móveis ou tablets. Uma imagem dimensionada ocupará menos espaço, será carregada mais rapidamente e reduzirá o uso de recursos. É também uma das recomendações fornecidas pelas ferramentas de otimização de sites. Ter uma pontuação melhor vai melhorar o ranking do seu site no Google e impulsionar SEO.

O que você precisa?

Antes de começar este guia, você precisará do seguinte:

  • Acesso FTP (especificamente os diretórios de imagem);
  • Editor de imagem (Paint, ou qualquer editor on-line como o picresize).

Passo 1 – Analisando seu site

Para esta passo, recomendamos usar GTMetrix pois ele também especifica as dimensões de imagem exata que deve ser usado.

Como exemplo, analisamos um site WordPress criado rapidamente com o GTMetrix e recebemos uma lista de imagens com sua localização exata e os valores recomendados.

scaled images 1

De acordo com a análise, o atendimento a uma imagem em escala reduziria o tamanho de cada imagem em mais de 50% por cento. Quanto mais imagem tiver, mais rápido serão carregadas depois de as escalar.

Passo 2 — Dimensionamento e Substituição das Imagens

A fim de reduzir suas fotos, você deve primeiro baixar os arquivos. As imagens especificadas no Passo 1 podem ser baixadas usando qualquer cliente FTP. Depois disso, é possível usar um editor de imagens (Photoshop) ou ferramentas on-line para escalar as imagens. Usando picresize dimensionamos todas as imagens para os valores recomendados.

scaled images 2

Também recomendamos preservar o mesmo nome de arquivo nas fotos. Dessa forma, você só precisará substituir as imagens antigas sem ter que fazer alterações no script/código. Uma vez que as imagens antigas são substituídas pelos recém-dimensionados, a única coisa que resta é testar novamente.

Passo 3 — Testando as alterações

Para comparação, aqui estão os resultados após o upload de imagens devidamente dimensionadas:

scaled images 3

A coisa mais importante é certificar-se de que as imagens reenviadas  tem o mesmo nome de arquivo para evitar 404 erros.

Conclusão

Neste guia breve, aprendemos como servir imagens dimensionadas e assim reduzir o uso de recursos, bem como melhorar a velocidade e o desempenho do site. A melhor parte é que nenhum conhecimento de codificação é necessário para isso. Mas caso tenha ficado com dúvidas, entre em contato com nossa equipe de suporte.

Fale-conosco

Guias relacionados:

Melhorar o desempenho do site: alavancando o cache do navegador

Melhorando o desempenho do site: compressão gzip

Melhorando o desempenho do site: usando imagens JPEG progressivas

Melhorando o desempenho do site: Ativando o Keep-Alive

Melhorando o desempenho do site: Usando um CDN

Melhorando o desempenho do site: minificando CSS, HTML e JavaScript

Palavras-chave: FTP, editor de imagem, edição de imagem, imagem em escala, imagem escalonada.

Comece a Economizar Agora!

Hospedagem com tudo incluso e nome de domínio
R$6
99
/mês

Junte-se a centenas de inscritos em todo o mundo

e receba um resumo dos tutoriais mais recentes direto para o seu e-mail

Please wait...

Obrigado por se inscrever!