Melhorando o desempenho do website – servindo imagens escaladas
Mar 10, 2026
/
By Rafael H.
/
2 min Ler
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.
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.
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:
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.
Não se esqueça de considerar o uso de formatos mais eficientes de imagens, como é o caso do WebP!
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
Todo o conteúdo dos tutoriais deste site segue os rigorosos padrões editoriais e valores da Hostinger.
Trabalho com marketing digital desde 2017. Atualmente sou Country Manager do Brasil na Hostinger. Sou apaixonado pelo mundo da tecnologia e hospedagem de sites, tendo experiência com WordPress, marketing digital, SEO, copywriting e ferramentas de automação de marketing. Também já trabalhei como analista de conteúdo, redator, assessor de imprensa e analista de comunicação.
Comentários
0 responses