Como comprimir e deixar imagens mais leves e compactas

FabioLobo

Quer deixar imagens mais leves, ocupar menos espaço em disco e aumentar a velocidade do site? Veja como comprimir imagens de forma otimizada!

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á?!

Índice

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

2. Utilize o formato de imagem mais otimizado

JPG: extensão de fotos

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

SVG: extensão de elementos de layout

WebP e AVIF: extensões campeãs

3. Salve imagens leves sem perda de qualidade

Como comprimir, compactar ou reduzir o tamanho das imagens?

Ferramentas online para deixar imagens mais leves

Plugins para WordPress para reduzir o peso das imagens

Programas para compactação de imagens

Hospedagem com compressão de imagens

Tire suas dúvidas

Receba posts em seu e-mail

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.

Meu site, por exemplo, tem uma área de conteúdo de no máximo 730px de largura. Mas também consigo utilizar imagens de até 1110px de largura, como essa acima.

Ou seja, não faz sentido eu publicar imagens com largura maior do que essas definidas. Seria um desperdício de recursos, já que a imagem ficaria desnecessariamente bem mais pesada.

Tenha em mente!

Você sabia que escolher a hospedagem errada pode reduzir sua nota no Google, causar lentidão e até mesmo deixar seu site vulnerável para invasões e vírus?

Clique aqui e saiba mais!

Então, quando for publicar uma imagem na internet, salve-a com a medida correta (que são justamente a largura e a altura que o usuário verá em seu site).

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

Comparação: de um lado, a imagem salva como JPG (351kb); do outro, como AVIF (76,7kb).

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>

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

printscreen do site TinyPNG

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

logo do plugin para WordPress EWWW Image Optimizer

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

prinscreen do programa ImageOptim

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.

ESCALANDO NEGÓCIOS DA VALEON

1 – Qual é o seu mercado? Qual é o tamanho dele?

O nosso mercado será atingir os 766 mil habitantes do Vale do Aço e poder divulgar os produtos / serviços para vocês clientes, lojistas, prestadores de serviços e profissionais autônomos e obter dos consumidores e usuários a sua audiência.

A ValeOn atenderá a todos os nichos de mercado da região e especialmente aos pequenos e microempresários da região que não conseguem entrar no comércio eletrônico para usufruir dos benefícios que ele proporciona. Pretendemos cadastrar todas as empresas locais com CNPJ ou não e coloca-las na internet.

2 – Qual problema a sua empresa está tentando resolver? O mercado já expressou a necessidade dessa solução?

A nossa Plataforma de Compras e Vendas que ora disponibilizamos para utilização das Empresas, Prestadores de Serviços e Profissionais Autônomos e para a audiência é um produto inovador sem concorrentes na região e foi projetada para atender às necessidades locais e oferecemos condições de adesão muito mais em conta que qualquer outro meio de comunicação.

Viemos para suprir as demandas da região no que tange a divulgação de produtos/serviços cuja finalidade é a prestação de serviços diferenciados para a conquista cada vez maior de mais clientes e públicos.

O nosso diferencial está focado nas empresas da região ao resolvermos a dor da falta de comunicação entre as empresas e seus clientes. Essa dor é resolvida através de uma tecnologia eficiente que permite que cada empresa / serviços tenha o seu próprio site e possa expor os seus produtos e promoções para os seus clientes / usuários ao utilizar a plataforma da ValeOn.

3 – Quais métodos você usará para o crescimento? O seu mercado está propício para esse tipo de crescimento?

^{Estratégias para o crescimento da nossa empresa}

Investimento na satisfação do cliente. Fidelizar é mais barato do que atrair novos clientes.
Equilíbrio financeiro e rentabilidade. Capital de giro, controle de fluxo de caixa e análises de rentabilidade são termos que devem fazer parte da rotina de uma empresa que tenha o objetivo de crescer.
Desenvolvimento de um planejamento estratégico. Planejar-se estrategicamente é como definir com antecedência um roteiro de viagem ao destino final.
Investimento em marketing. Sem marketing, nem gigantes como a Coca-Cola sobreviveriam em um mercado feroz e competitivo ao extremo.
Recrutamento e gestão de pessoas. Pessoas são sempre o maior patrimônio de uma empresa.

O mercado é um ambiente altamente volátil e competitivo. Para conquistar o sucesso, os gestores precisam estar conectados às demandas de consumo e preparados para respondê-las com eficiência.

Para isso, é essencial que os líderes procurem conhecer (e entender) as preferências do cliente e as tendências em vigor. Em um cenário em que tudo muda o tempo todo, ignorar as movimentações externas é um equívoco geralmente fatal.

Planeje-se, portanto, para reservar um tempo dedicado ao estudo do consumidor e (por que não?) da concorrência. Ao observar as melhores práticas e conhecer quais têm sido os retornos, assim podemos identificar oportunidades para melhorar nossa operação e, assim, desenvolver a bossa empresa.

4 – Quem são seus principais concorrentes e há quanto tempo eles estão no mercado? Quão grandes eles são comparados à sua empresa? Descreva suas marcas.

Nossos concorrentes indiretos costumam ser sites da área, sites de diretório e sites de mídia social. Nós não estamos apenas competindo com outras marcas – estamos competindo com todos os sites que desejam nos desconectar do nosso potencial comprador.

Nosso concorrente maior ainda é a comunicação offline que é formada por meios de comunicação de massa como rádios, propagandas de TV, revistas, outdoors, panfletos e outras mídias impressas e estão no mercado há muito tempo, bem antes da nossa Startup Valeon.

5 – Sua empresa está bem estabelecida? Quais práticas e procedimentos são considerados parte da identidade do setor?

A nossa empresa Startup Valeon é bem estabelecida e concentramos em objetivos financeiros e comerciais de curto prazo, desconsideramos a concorrência recém chegada no mercado até que deixem de ser calouros, e ignoramos as pequenas tendências de mercado até que representem mudanças catastróficas.

“Empresas bem estabelecidas igual à Startp Valeon devemos começar a pensar como disruptores”, diz Paul Earle, professor leitor adjunto de inovação e empreendedorismo na Kellogg School. “Não é uma escolha. Toda a nossa existência está em risco”.

6 – Se você quiser superar seus concorrentes, será necessário escalar o seu negócio?

A escalabilidade é um conceito administrativo usado para identificar as oportunidades de que um negócio aumente o faturamento, sem que precise alavancar seus custos operacionais em igual medida. Ou seja: a arte de fazer mais, com menos!

Então, podemos resumir que um empreendimento escalável é aquele que consegue aumentar sua produtividade, alcance e receita sem aumentar os gastos. Na maioria dos casos, a escalabilidade é atingida por conta de boas redes de relacionamento e decisões gerenciais bem acertadas.

Além disso, vale lembrar que um negócio escalável também passa por uma fase de otimização, que é o conceito focado em enxugar o funcionamento de uma empresa, examinando gastos, cortando desperdícios e eliminando a ociosidade.

Sendo assim, a otimização acaba sendo uma etapa inevitável até a conquista da escalabilidade. Afinal de contas, é disso que se trata esse conceito: atingir o máximo de eficiência, aumentando clientes, vendas, projetos e afins, sem expandir os gastos da operação de maneira expressiva.

Pretendemos escalar o nosso negócio que é o site marketplace da Startup Valeon da seguinte forma:

objetivo final em alguma métrica clara, como crescimento percentual em vendas, projetos, clientes e afins;
etapas e práticas que serão tomadas ao longo do ano para alcançar a meta;
decisões acertadas na contratação de novos colaboradores;
gerenciamento de recursos focado em otimização.