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.

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

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

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

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

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:

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

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

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 10

JPG qualidade 30

JPG qualidade 30

JPG qualidade 60

JPG qualidade 60

JPG qualidade 80

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 8 cores

PNG com 32 cores

PNG com 32 cores

PNG com 256 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.