Dicas para deixar seu site mais rápido com imagens mais leves

Neste artigo vou mostrar como deixar seu site mais rápido com imagens mais leves. Saiba escolher o melhor formato para cada situação e compactar ao máximo, sem perder qualidade.

Frequentemente vejo sites usando imagens mal compactadas ou em um formato inadequado, deixando o site bem mais pesado que o necessário e sem nenhum ganho de qualidade. Muitas vezes uma imagem mal tratada fica mais pesada e ainda com qualidade pior.

O formato certo para cada ocasião

Atualmente os formatos de imagens mais recomendados para a web são JPG, PNG e GIF. Cada um tem seus prós e contras.

O formato JPG permite milhões de cores simultâneas, o que o torna ideal para fotos (pessoas, paisagens, objetos reais). Por outro lado, é um formato que causa perda na qualidade se for muito comprimido. O JPG pode ser salvo com um nível de qualidade que varia de 1 (menor tamanho, pior qualidade) a 100 (maior tamanho, melhor qualidade). O JPG não suporta transparência nem animação.

Exemplo de JPG

O PNG possui duas variações: PNG de 8 bits (PNG8) e PNG de 24 bits (PNG24).

O PNG8 possui um limite de 256 cores por imagem, o que não o torna ideal para fotos, mas sim para gráficos, desenhos, logos, ícones e elementos de interface que não possuam muitas cores. Na hora de exportar um PNG8 você pode definir a quantidade de cores que o arquivo vai usar. Quanto menor, mais leve fica a imagem.

Exemplo de PNG8

O PNG24 suporta milhões de cores como o JPG e não perde qualidade na compressão (o que se chama de compressão lossless). No entanto ele é o mais pesado dos formatos.

Ambas variações de PNG suportam transparência. A diferença é que no PNG8 você só tem dois níveis: trechos totalmente opacos e trechos totalmente transparentes. Já o PNG24 possui canal alfa, o que permite diferentes níveis de transparência. Como o PNG24 é o mais pesado, deve ser usado com moderação, onde os níveis de transparência são mesmo necessários.

Exemplo de PNG24

Por fim, o GIF tem as mesmas características do PNG8, com a diferença que ele é o único dentre os formatos citados que suporta animação, sendo ideal para ícones animados, como aquele ícones que indicam que um carregamento ou processamento está em andamento. Exemplo de GIF animado:

Ferramentas para exportação

Para a maioria de nós que usa Photoshop, ele possui a opção “Salvar para a Web”, que permite escolher o melhor formato e ajustar os parâmetros para enxugar mais a imagem. Uma grande facilidade é que ele te dá uma prévia de como vai ficar o resultado e qual será o tamanho do arquivo.

Exportando para Web com Photoshop

Uma opção gratuita e muita boa para quem usa Windows é o RIOT (Radical Image Optimization Tool). Este programa pode ser usado sozinho ou como plugin de visualizadores de imagens, como o meu preferido: Irfanview. Na hora de exportar, assim como no Photoshop, ele permite comparar a qualidade e o tamanho entre a imagem original e a imagem otimizada.

Exportando para Web com RIOT

Mas não adianta ter boas ferramentas para exportar imagens se não soubermos escolher os parâmetros.

Exportando JPG

Na hora de exportar um JPG, o principal fator é o parâmetro qualidade, que pode variar de 1 a 100. Você deve começar com um valor baixo (algo como 30) e ir subindo até a qualidade ficar aceitável. Geralmente o ideal fica entre 30 e 80, dependendo dos detalhes da imagem. Abaixo de 30 fica muito ruim e acima de 80 fica muito pesado.

JPG qualidade 10

JPG qualidade 30


JPG qualidade 60

JPG qualidade 80

Exportanto PNG24

PNG24 não tem muito o que fazer. No máximo você pode ativar ou desativar a transparência, mas se você está usando PNG24 é porque precisa da transparência.

Exportando PNG8 e GIF

PNG8 e GIF tem parâmetros parecidos na hora de exportar. Você pode ativar ou não a transparência e escolher a quantidade de cores, entre 2 e 256. Escolha o mínimo possível até onde não comprometa a qualidade.


PNG com 8 cores


PNG com 32 cores


PNG com 256 cores

Conclusão

Sabendo escolher o formato certo e ajustando os parâmetros na hora de exportar as imagens, você pode deixar seu site bem mais leve, mais rápido e ainda economizar na hospedagem.

A otimização de um site envolve muitos outros fatores, que poderemos falar em futuros posts, mas certamente a otimização de imagens é um fator que se deve ter um cuidado especial.

Sobre o Autor

Douglas Matoso
Douglas Matoso

Desenvolvedor web desde 2008. Criador do Web Dev Drops.