100 tokens de oferta ao registar-se
Voltar ao blogue
·8 min de leitura

Comprimir imagem para a web: guia prático

Como comprimir imagem para a web sem perder qualidade: dimensões, formato e compressão. Faz tudo grátis no navegador, sem enviar as fotos.

JJ

Fundador do Pictulab

Comprimir imagem para a web: guia prático

Para comprimir imagem sem que se note a diferença, há três passos: redimensiona-a para o tamanho real a que vai ser mostrada, guarda-a num formato moderno como WebP e comprime-a com uma qualidade entre 75 e 85. Com isto, uma foto de vários megas costuma ficar com apenas algumas centenas de kilobytes. À vista desarmada, a diferença é mínima.

Neste guia explicamos cada passo, que formato convém em cada caso e como fazer tudo de graça com a ferramenta para comprimir imagens do Pictulab. Funciona no teu navegador e as tuas fotos não são enviadas para nenhum servidor.

Porque é que o peso das imagens importa no teu site

As imagens costumam ser o que mais pesa numa página, sobretudo numa loja online com muitas fichas de produto. Quanto mais pesam, mais tempo a página demora a carregar. No telemóvel, isso nota-se ainda mais.

Isto afeta três coisas:

  • Experiência do utilizador: uma ficha que demora a mostrar a foto principal transmite desleixo, e muita gente não espera.
  • SEO: o Google tem em conta as Core Web Vitals. Uma delas, o LCP (Largest Contentful Paint), mede quanto tempo demora a aparecer o maior elemento do ecrã. Muitas vezes, esse elemento é uma imagem. O Google considera bom um LCP de 2,5 segundos ou menos.
  • Consumo de dados: quem te visita com dados móveis agradece não ter de descarregar 5 MB para ver uma t-shirt.

Computador portátil e telemóvel sobre uma mesa de madeira a mostrar a mesma loja online de roupa com fotos de produto

As três alavancas para reduzir o peso de uma imagem

Quase toda a poupança vem destas três decisões. Convém aplicá-las por esta ordem.

1. Ajusta as dimensões ao tamanho real

É o erro mais comum: carregar a foto tal como sai da câmara ou do telemóvel, com 4.000 píxeis ou mais de largura, para a mostrar num espaço de 800.

O navegador descarrega a imagem inteira e depois encolhe-a. Pagas o peso todo e não ganhas nada em nitidez.

Algumas orientações gerais:

  • Fotos de produto com zoom: um lado maior entre 1.500 e 2.000 píxeis costuma ser suficiente. Consulta também o que recomenda a tua plataforma (Shopify, WooCommerce, PrestaShop…).
  • Imagens de cabeçalho ou banners a toda a largura: cerca de 1.920 píxeis de largura.
  • Miniaturas, ícones e fotos dentro do texto do blogue: a largura a que são mostradas, ou o dobro se quiseres que fiquem nítidas em ecrãs de alta densidade.

Ao reduzir para metade a largura e a altura, a imagem passa a ter um quarto dos píxeis. É por isso que este é o passo que mais peso tira.

2. Escolhe o formato certo

Nem todos os formatos servem para o mesmo:

FormatoQuando usarA ter em conta
JPEGFotografiasCompatível com tudo. Não suporta transparência.
PNGGráficos, logótipos, capturas com texto, imagens com transparênciaEm fotos pesa muito mais do que JPEG ou WebP.
WebPFotos e gráficos na web, com ou sem transparênciaSuportado por todos os navegadores atuais. Segundo a documentação do Google, no modo com perdas pesa entre 25 % e 34 % menos do que um JPEG de qualidade equivalente.
AVIFFotos, se procuras a máxima poupançaComprime ainda mais do que WebP. Demora mais a codificar e nem todos os programas ou plataformas o aceitam ainda.
SVGLogótipos e ícones vetoriaisNão serve para fotos.

Para uma loja online, o WebP é hoje a opção mais equilibrada: boa poupança, transparência se precisares e ampla compatibilidade. Se tens as imagens em PNG ou JPEG, podes passá-las para WebP com o conversor de formatos do Pictulab.

Comparação antes e depois de uma foto de sapatilha desportiva, uma pesada em PNG e outra otimizada em WebP, visualmente idênticas

3. Comprime com a qualidade certa

A compressão com perdas elimina informação que o olho mal deteta. O segredo está no nível de qualidade:

  • Entre 75 e 85 (em JPEG ou WebP) costuma ser um bom ponto de partida para fotos de produto.
  • Abaixo de 60 começam a ver-se artefactos: blocos, halos à volta dos contornos e degradês aos degraus.
  • Acima de 90 o ficheiro cresce muito e a melhoria quase não se nota.

Não há um número mágico. Uma foto com muito detalhe, como um tecido ou uma joia, aguenta pior a compressão do que um produto liso sobre fundo branco. Compara sempre o resultado com zoom a 100 % antes de o dar por bom.

Como comprimir imagem grátis com o Pictulab

As ferramentas web do Pictulab são gratuitas e fazem todo o trabalho no teu navegador. As tuas imagens não são enviadas para nenhum servidor, o que dá jeito se trabalhas com fotos de produtos que ainda não publicaste.

  1. Abre a ferramenta Comprimir imagem e arrasta os teus ficheiros.
  2. Ajusta a qualidade. Começa à volta de 80 e compara o antes e o depois.
  3. Se for preciso, muda o formato com Converter imagem, por exemplo de PNG para WebP.
  4. Descarrega o resultado e carrega-o no teu site ou na tua loja.

Como o processo acontece no teu equipamento, a velocidade depende do teu computador e não da tua ligação à internet.

Pessoa a trabalhar num portátil com várias fotos de produtos de cosmética no ecrã, numa secretária arrumada

Dicas extra para lojas online

Se vendes pela internet, há mais alguns truques que ajudam a manter as fichas leves.

Usa fundos limpos e uniformes

Um fundo branco ou liso comprime-se muito melhor do que um com texturas, ruído ou sombras irregulares. Se as tuas fotos têm fundos caseiros, podes tirar o fundo da imagem e deixar o produto sobre uma cor lisa. Ganhas em peso e em coerência visual do catálogo.

Remove os metadados

As fotos do telemóvel ou da câmara guardam dados EXIF: modelo da câmara, data e, por vezes, a localização GPS. Na web não servem para nada, ocupam espaço e podem revelar informação que não queres partilhar.

Ativa o carregamento diferido

Com o atributo loading="lazy", as imagens mais abaixo na página só são descarregadas quando o utilizador se aproxima delas. Muitas plataformas já o aplicam por defeito. Atenção: não o uses na imagem principal do topo da página, porque atrasaria o LCP.

Disponibiliza vários tamanhos

Com srcset, o navegador escolhe a versão adequada consoante o ecrã. Um telemóvel descarrega uma imagem de 800 píxeis e um monitor grande, uma de 1.600. A maioria dos CMS e plataformas de e-commerce gera estas versões automaticamente se carregares uma imagem de bom tamanho.

Catálogo de uma loja online com várias fotos de malas sobre fundo branco uniforme

Erros comuns ao otimizar imagens

  • Comprimir várias vezes o mesmo JPEG. Cada passagem com perdas degrada a imagem. Guarda sempre o original e comprime a partir dele.
  • Usar PNG para fotografias. Só faz sentido se precisares de transparência e não puderes usar WebP.
  • Reduzir o tamanho só com CSS. Se a imagem tem 4.000 píxeis e a mostras a 400 com CSS, o utilizador continua a descarregar os 4.000.
  • Exagerar na compressão do produto estrela. A foto principal da ficha merece um pouco mais de qualidade do que uma miniatura.
  • Esquecer as imagens do blogue e das categorias. Não são só as fichas de produto que pesam.

Como confirmar que melhoraste

Depois de otimizares as imagens, mede o resultado:

  • PageSpeed Insights (do Google) analisa a página e assinala as imagens que podem ser otimizadas ou que têm um tamanho excessivo.
  • Lighthouse, integrado nas ferramentas de programador do Chrome, dá um relatório semelhante a partir do teu próprio navegador.
  • No separador Rede dessas mesmas ferramentas podes ver quanto pesa cada imagem que a página descarrega.

Revê sobretudo as páginas com mais visitas: a página inicial, as categorias principais e as fichas dos produtos mais vendidos.

Começa hoje a aliviar as tuas imagens

Reduzir o peso das imagens é uma das melhorias mais simples e com mais efeito que podes fazer no teu site. Redimensiona, passa para WebP e comprime com bom senso.

As ferramentas para comprimir, converter e tirar fundo do Pictulab são grátis. Se também quiseres criar ou melhorar fotos de produto com IA, cada geração mostra-te o custo em tokens antes de a fazeres. Começa grátis — 100 tokens de oferta, sem cartão.

Também te pode interessar:

  • [ENLACE: Como tirar fotos de produto com fundo branco para a tua loja online]
  • [ENLACE: WebP, PNG ou JPG: que formato de imagem usar no teu site]

Perguntas frequentes

Quanto deve pesar uma imagem para a web?

Não há um valor oficial, mas, como orientação, tenta que a maioria das fotos de produto fique abaixo de uns 200 KB e que as miniaturas sejam bastante mais leves. O importante é que a imagem tenha as dimensões certas e uma compressão razoável.

Perde-se qualidade ao comprimir uma imagem?

Com a compressão com perdas, sim, descarta-se informação, mas com uma qualidade entre 75 e 85 a diferença raramente se nota à vista desarmada. Redimensionar para o tamanho real de visualização também não piora o que o utilizador vê.

É melhor WebP ou AVIF?

O AVIF costuma conseguir ficheiros mais pequenos, mas demora mais a gerar e algumas plataformas e programas ainda não o suportam. O WebP tem uma compatibilidade mais ampla e é uma opção segura para a maioria das lojas online.

É seguro comprimir imagens online?

Depende da ferramenta. Com as ferramentas web do Pictulab, a compressão e a conversão são feitas no teu navegador e as imagens não são enviadas para nenhum servidor.

Posso comprimir uma imagem no telemóvel?

Sim. Como as ferramentas funcionam no navegador, podes usá-las no telemóvel sem instalar nada. Com muitas fotos ou ficheiros muito grandes, o processo será mais rápido num computador.

Crie conteúdo visual com IA para o seu negócio

Gere, edite e organize as suas imagens numa única plataforma. Comece grátis, sem cartão.

Começar grátis

Continue a ler