Blog

Aprenda a otimizar as imagens para seu blog e tenha mais acessos

Por Markus Domenegheti

Constantemente alimentamos nosso blog com conteúdos variados, e quase sempre precisamos complementar nossas ideias com imagens.

A otimização* dessas imagens pode impactar diretamente na conversão de acessos do seu blog. Neste artigo mostrarei este impacto e como realizar este procedimento.

*Otimização: balanceamento entre peso* e nitidez da imagem, utilizando o tamanho* adequado.
*Peso: quantidade de kilobytes ou megabytes (2 MB por exemplo).
*Tamanho: largura e altura (exemplo: 300 px de largura por 250 px de altura)

Carregamento

Acima, vemos em formato cascata todos os arquivos do blog (fontes, estilo, outras imagens etc.) sendo processados pelo navegador. Observe o atraso que apenas uma imagem (bg.png) que pesa 5 MB pode causar em seu carregamento.

Nos surpreendemos ao reparar que o peso total da página é de 5.77 MB. Isso significa que, neste caso, apenas uma imagem representa 87% disso.

Considerando a velocidade da nossa internet 4G, essa imagem totaliza de 3 a 4 segundos no tempo de carregamento total da página. Seguindo esse raciocínio, se houvesse 4 imagens no post - um número razoável -, e não estivessem otimizadas, este número subiria para 16 segundos. Será que seu leitor esperaria 16 segundos para visualizar um artigo? 

Existem técnicas de programação para tornar essa espera mais agradável, mas vou abordar o que podemos fazer para melhorar a otimização de imagens e cortar o problema pela raiz.

Como otimizar imagens

  • Verifique o tamanho que a imagem deve ter. Utilizar imagens maiores que o necessário deixará o site mais pesado, e menores farão com que elas sejam ampliadas e percam nitidez.
  • Escolha o formato ideal para sua imagem. Os formatos mais populares são JPG e PNG. Geralmente, a otimização das imagens em JPG é mais eficaz. PNG deve ser usado apenas quando for necessário transparência.
  • O próximo passo é otimizar a imagem. A forma mais simples é usar o TinyPNG:
    - Ferramenta gratuita e que dispensa instalação.
    - É simples, faça upload da imagem que deseja publicar.
    - Cada otimização suporta 20 imagens de 5 MB cada.

Aguarde a finalização do procedimento e faça o download das imagens otimizadas.

O retorno nos mostra o peso inicial da imagem, o peso final e a porcentagem que a ferramenta conseguiu diminuir. Muito legal, não?

Mas lembre-se, a otimização é um balanceamento entre peso e nitidez, por isso aconselho, após o download, verificar se a imagem está agradável do seu ponto de vista.

Markus Domenegheti

Desenvolvedor Front-End 

Formado em Sistemas de Informação, trabalha como desenvolvedor front-end há 7 anos. Especializado em HTML, SASS, jQuery, Responsive Web Design, Cross-browser e Wordpress, já participou de projetos com clientes de grande expressão como BASF, UOL e Dow AgroSciences.

Encontrou algum erro ou algum problema em sua navegação por nosso site?