\nImagens 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.\n<\/p>
Benefícios do fornecimento de imagem em escala<\/strong><\/h3>\nO 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.\n<\/p>
O que você precisa?<\/strong><\/h2>\nAntes de começar este guia, você precisará do seguinte:\n<\/p>
\n- Acesso FTP (especificamente os diretórios de imagem);<\/li>\n
- Editor de imagem (Paint, ou qualquer editor on-line como o picresize<\/a><\/u>).<\/li>\n<\/ul>
Passo 1 – Analisando seu site<\/strong><\/h2>\nPara esta passo, recomendamos usar GTMetrix<\/a><\/u> pois ele também especifica as dimensões de imagem exata que deve ser usado.<\/p>Como exemplo, analisamos um site WordPress criado rapidamente com o GTMetrix<\/a><\/u> e recebemos uma lista de imagens com sua localização exata e os valores recomendados.<\/p>![\"scaled](\"https:\/\/blog.hostinger.io\/br-tutoriais\/wp-content\/uploads\/sites\/53\/2017\/04\/scaled-images-1.png\")
<\/p>
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.\n<\/p>
Passo 2 — Dimensionamento e Substituição das Imagens<\/strong><\/h2>\nA 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<\/a><\/u> dimensionamos todas as imagens para os valores recomendados.<\/p>![\"scaled](\"https:\/\/blog.hostinger.io\/br-tutoriais\/wp-content\/uploads\/sites\/53\/2017\/04\/scaled-images-2.png\")
<\/p>
Também recomendamos preservar o mesmo<\/strong> 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.\n<\/p>Passo 3 — Testando as alterações<\/strong><\/h2>\nPara comparação, aqui estão os resultados após o upload de imagens devidamente dimensionadas:<\/p>
![\"scaled](\"https:\/\/blog.hostinger.io\/br-tutoriais\/wp-content\/uploads\/sites\/53\/2017\/04\/scaled-images-3.png\")
<\/p>
A coisa mais importante é certificar-se de que as imagens reenviadas tem o mesmo nome de arquivo para evitar 404 erros.\n<\/p>
Conclusão<\/strong><\/h2>\nNeste 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.<\/p>
![\"Fale-conosco\"](\"https:\/\/blog.hostinger.io\/br-tutoriais\/wp-content\/uploads\/sites\/53\/2017\/08\/button_fale-conosco.png\")
<\/a><\/p>Não se esqueça de considerar o uso de formatos mais eficientes de imagens, como é o caso do WebP<\/a>!<\/p>Guias relacionados:<\/p>
Melhorar o desempenho do site: alavancando o cache do navegador<\/strong><\/a><\/p>Melhorando o desempenho do site: compressão gzip<\/strong><\/a><\/p>Melhorando o desempenho do site: usando imagens JPEG p<\/strong><\/a>rogressivas<\/strong><\/a><\/p>Melhorando o desempenho do site: Ativando o Keep-Alive<\/strong><\/a><\/p>Melhorando o desempenho do site: Usando um CDN<\/strong><\/a><\/p>
\nAntes de começar este guia, você precisará do seguinte:\n<\/p>
- \n
- Acesso FTP (especificamente os diretórios de imagem);<\/li>\n
- Editor de imagem (Paint, ou qualquer editor on-line como o picresize<\/a><\/u>).<\/li>\n<\/ul>
Passo 1 – Analisando seu site<\/strong><\/h2>
\nPara esta passo, recomendamos usar GTMetrix<\/a><\/u> pois ele também especifica as dimensões de imagem exata que deve ser usado.<\/p>
Como exemplo, analisamos um site WordPress criado rapidamente com o GTMetrix<\/a><\/u> e recebemos uma lista de imagens com sua localização exata e os valores recomendados.<\/p>
<\/p>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.\n<\/p>
Passo 2 — Dimensionamento e Substituição das Imagens<\/strong><\/h2>
\nA 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<\/a><\/u> dimensionamos todas as imagens para os valores recomendados.<\/p>
<\/p>Também recomendamos preservar o mesmo<\/strong> 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.\n<\/p>
Passo 3 — Testando as alterações<\/strong><\/h2>
\nPara comparação, aqui estão os resultados após o upload de imagens devidamente dimensionadas:<\/p>
<\/p>A coisa mais importante é certificar-se de que as imagens reenviadas tem o mesmo nome de arquivo para evitar 404 erros.\n<\/p>
Conclusão<\/strong><\/h2>
\nNeste 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.<\/p>
<\/a><\/p>Não se esqueça de considerar o uso de formatos mais eficientes de imagens, como é o caso do WebP<\/a>!<\/p>
Guias relacionados:<\/p>
Melhorar o desempenho do site: alavancando o cache do navegador<\/strong><\/a><\/p>
Melhorando o desempenho do site: compressão gzip<\/strong><\/a><\/p>
Melhorando o desempenho do site: usando imagens JPEG p<\/strong><\/a>rogressivas<\/strong><\/a><\/p>
Melhorando o desempenho do site: Ativando o Keep-Alive<\/strong><\/a><\/p>
Melhorando o desempenho do site: Usando um CDN<\/strong><\/a><\/p>