Como comprimir e deixar imagens mais leves e compactas

Por Fabio Lobo, atualizado em 21/05/2021. 5 pessoas falando sobre isso!

Parece complicado, mas acredite: comprimir imagens é um trabalho muito fácil. E se feito do jeito certo, suas imagens não irão ficar com a qualidade ruim!

Se você trabalha com conteúdo na internet, já deve saber que deixar imagens mais leves em seu site só traz benefícios: contribui para um carregamento de página mais rápido, economia de espaço em disco, SEO e deixa seu usuário mais feliz.

Afinal, quanto mais compactas forem as imagens do seu site, menos o visitante precisa se preocupar com o consumo de dados de seu plano de internet.

Pensando nisso, fiz esse post com três passos fundamentais para uma boa compressão de imagens. Vamos lá?!

1. Defina um tamanho e resolução para a imagem

A primeira coisa que você deve fazer é definir as medidas e uma resolução para cada imagem que for utilizar.

Não deixe para fazer isso depois de fazer o upload da imagem no WordPress, porque o resultado não será o mesmo – e muito menos a qualidade.

Aqui você pode ver quais são as medidas de diversos tipos de imagens para a internet.

Já sobre a resolução, há muito se indica 72 PPI (ou DPI) ao salvar imagens para a web. Mas a verdade é que isso não faz diferença porque diz respeito à resolução para impressão, e não para telas.

O mesmo vale para retina display: Aqui, a diferença é que você deve salvar a mesma imagem com largura e altura de pixels duas vezes maior, por exemplo.

2. Utilize o formato de imagem mais otimizado

Não adianta nada tentar otimizar uma imagem se ela está com o formato (ou seja, extensão) errado.

Isso pode alterar, e muito, o peso, a qualidade e as cores do arquivo.

Então, utilize essas recomendações da WOWF para extensão de imagens:

JPG: extensão de fotos

Além de fotografias, o formato JPG também pode ser utilizado para alguns tipos de ilustrações – mas é mais adequado para fotos.

Isso porque ao comprimir uma imagem em JPG que tenha texto, por exemplo, pode fazer com que esse texto fique borrado. Repare a imagem acima, salva como JPG: a fotografia está perfeita, mas o texto e os ícones, não.

Ao trabalhar com a extensão JPG é possível ter controle total de compressão e qualidade da imagem. É o formato que permite mais opções de otimização – o que deve ser feito com cautela para que a qualidade da foto seja mantida.

Há, por exemplo, como definir a qualidade de uma imagem entre 0 a 100. A recomendação fica entre 84 e 95, já que abaixo de 84 a qualidade começa a cair e acima de 95 praticamente não há redução do tamanho do arquivo.

PNG: extensão de ilustrações e elementos de layout

O pior erro que você pode cometer é salvar uma fotografia com essa extensão.

Uma foto em PNG poderá ficar muito – mas MUITO – mais pesada do que se fosse salva como JPG. E a qualidade nos detalhes da imagem seria bem menor.

O formato de imagem PNG é excelente para imagens como logo, ícones, desenhos, infográficos, imagens com texto etc.

Outra vantagem do PNG é a possibilidade de salvar imagens com fundo transparente. E ao comprimir imagens com essa extensão, praticamente não há chance de perda de qualidade.

SVG: extensão de elementos de layout

O formato SVG é indicado para casos parecidos com as recomendações para PNG.

A diferença essencial entre os dois é que SVG é um formato de imagem vetorial. Ou seja: enquanto uma imagem em PNG tem uma medida fixa, o SVG pode ser “esticado” infinitamente e manterá a mesma qualidade com os mesmos detalhes.

Então, na grande maioria das vezes, utilizar SVG para imagens como logo, ícones e outros elementos de layout é bem mais vantajoso.

No entanto, o formato pode ficar muito mais pesado se usado para imagens de conteúdo como ilustrações e infográficos. Além disso, o WordPress costuma bloquear o upload de imagens com extensão SVG.

WebP e AVIF: extensões campeãs

WebP e AVIF normalmente são, de longe, os formatos mais leves de imagem. Mas são mais complexos de lidar.

A extensão WebP já é velha, mas ganhou suporte de todos os navegadores recentemente. Já o AVIF ainda não é tão suportado.

Então, seria preciso trabalhar com um código fonte condicional como esse exemplo, que faz com que o navegador exiba a melhor opção de formato de imagem de acordo com seu suporte:

<picture>
  <source srcset="endereco-da-imagem.avif" type="image/avif">
  <source srcset="endereco-da-imagem.webp" type="image/webp">
  <img src="endereco-da-imagem.jpg" alt="Descrição da imagem">
</picture>

Considerando que isso não é nada prático para quem posta conteúdos frequentemente, é preciso fazer um malabarismo entre servidor e CDN para identificar o navegador do visitante e entregar o formato adequado para que ele possa ver a imagem, como explicou Janio Sarmento nesse texto.

Assim o processo fica automatizado e você só deve se preocupar em salvar suas imagens em JPG, PNG ou SVG (além das dicas 1 e 3 deste post, é claro).

3. Salve imagens leves sem perda de qualidade

Agora que você já tem a imagem com tamanho e extensão definidos, falta só um passo: salvar de maneira otimizada.

Sim, ter uma medida específica e utilizar o formato correto já irão deixar sua imagem mais leve. Mas esse último passo trará o melhor resultado possível.

Como comprimir, compactar ou reduzir o tamanho das imagens?

O ideal é utilizar ferramentas para isso, seja de maneira manual ou automática.

Separei quatro dicas para você otimizar suas imagens da melhor maneira possível. Dá uma olhada:

Ferramentas online para deixar imagens mais leves

Se você tem poucas imagens pra comprimir ao mesmo tempo, utilize os compressores abaixo!

• TinyPNG: Meu favorito. Otimiza não só PNG, mas JPG também. E a compressão é excelente: já tive 90% de otimização em alguns casos, e as imagens continuaram com a mesma qualidade.
• Squoosh: Opção mais avançada, pois permite selecionar as opções de otimização e ver as alterações em tempo real antes de baixar a imagem. Além disso, também permite converter suas imagens para WebP e AVIF.
• Bulk Resize Photos: Permite alterar não só a largura e/ou altura da imagem, mas também ajustar a qualidade. Além disso, é possível até mesmo definir o peso ideal que você deseja para o arquivo.
• Online Image Optimizer: Essa é uma opção mais simples, mas tem a vantagem de também otimizar imagens com o formato GIF. Há um limite de 2,86MB por imagem, no entanto.

Plugins para WordPress para reduzir o peso das imagens

Se você utiliza o WordPress, há dois plugins que ajudam bastante com essa tarefa de comprimir e redimensionar imagens:

• EWWW Image Optimizer: É só instalar, configurar e pronto! Todas as imagens que você subir em seu site serão otimizadas automaticamente, e você também poderá otimizar as antigas.
• Imsanity: Dos mesmos criadores do plugin acima, o foco deste plugin é o redimensionamento de imagens. Ideal para quem fez (ou faz) o upload de imagens grandes e precisa mantê-las com medidas adequadas.
• Regenerate Thumbnails: Já esse plugin ajuda a redimensionar as miniaturas (ou thumbnails) do seu site e apagar o que não estiver em uso. Essencial para quem acabou de trocar de tema.

Há vários outros plugins com funções semelhantes, mas não indico nenhum além desses.

Programas para compactação de imagens

Se você trabalha com um grande volume de imagens, o ideal é ter um programa em seu computador para fazer o trabalho.

• ImageOptim (Mac): Esse é o app que uso. Bem leve e simples de utilizar, reduz o peso das imagens sem nenhum problema!
• Trimage (Linux): Inspirado no software acima, então não preciso dizer muito: é uma boa opção para comprimir imagens!
• RIOT (Windows): O mais completo de todos, o programa também permite redimensionar imagens e arquivos PSD.

Todos os programas são gratuitos e bem fáceis de usar.

Hospedagem com compressão de imagens

Por fim, como você viu mais acima, os formatos de imagem AVIF e WebP são os melhores – mas também são os mais complicados.

Além disso, o trabalho de comprimir imagens constantemente pode ser cansativo dependendo da quantidade de arquivos que você ou sua equipe posta diariamente.

Felizmente algumas hospedagens ajudam a automatizar esse trabalho:

• PortoFácil: Opção para quem precisa de um VPS ou servidor dedicado.
• WOWF: Opção para quem precisa de uma hospedagem compartilhada ou VPS.

Em ambos os casos há uma compressão de imagens e conversão de imagens para o formato WebP – tudo feito pelo servidor e de maneira automática.

Além disso, há auxílio para a configuração da Cloudflare para entrega condicional de imagens com extensão WebP e AVIF.

Assim seu site fica leve e otimizado sem você se preocupar muito com a parte técnica da coisa.

Créditos das imagens: Freepik e sites citados.

A cópia dos conteúdos e trabalhos deste site não é permitida. Saiba mais clicando aqui!