Como reduco o tamanho de uma imagem sem perda de qualidade visivel?
A compressao de imagens existe em duas formas:
- Sem perda (lossless) — remove metadados e dados redundantes sem alterar os valores de pixel. A imagem e identica bit a bit apos a descompressao.
- Com perda (lossy) — descarta alguns dados de pixel que o olho humano dificilmente notara. Ficheiro menor, mas com alguma reducao de qualidade em configuracoes agressivas.
Para imagens web, um JPEG a 70–85% de qualidade e frequentemente indistinguivel do original a tamanhos de visualizacao normais, sendo 3 a 5 vezes menor. A compressao PNG e sempre sem perda, mas pode ser significativamente reduzida removendo metadados.
Objetivos de peso praticos:
- Imagens de destaque: menos de 200KB
- Imagens de conteudo: menos de 100KB
- Miniaturas: menos de 30KB
O Compressor de imagens gere JPEG, PNG e WebP com configuracoes de qualidade ajustaveis — todo o processamento ocorre no navegador, nenhum ficheiro e enviado para um servidor.
Que formato de imagem devo usar para a web?
O formato certo depende do conteudo da imagem:
| Formato | Ideal para | Transparencia | Animacao |
|---|---|---|---|
| JPEG | Fotos, gradientes complexos | Nao | Nao |
| PNG | Capturas de ecra, logos, texto sobre imagem | Sim | Nao |
| WebP | Substituto moderno de JPEG e PNG | Sim | Sim |
| SVG | Icones, ilustracoes, logos | Sim | Sim |
| GIF | Animacoes simples (em grande parte substituido pelo WebP) | Sim | Sim |
O Conversor de formato converte entre JPEG, PNG, WebP e GIF no navegador — util para conversoes em lote antes da publicacao.
Como otimizo um ficheiro SVG?
Os ficheiros SVG exportados de ferramentas de design (Figma, Illustrator, Inkscape) contem quantidades significativas de dados desnecessarios:
- Metadados e comentarios do editor
- Camadas ocultas e elementos invisiveis
- Aninhamento de grupos desnecessario
- Atributos redundantes e valores padrao
- Dados de caminho nao otimizados (precisao decimal excessiva, comandos redundantes)
Um SVG tipico do Figma pode ser reduzido em 30–70% sem qualquer alteracao visual. SVGs mais leves carregam mais rapido, renderizam mais rapido e sao mais faceis de manter no codigo.
O Otimizador SVG aplica as mesmas transformacoes que a biblioteca SVGO — colar o SVG e obter uma versao limpa e minima pronta para producao.
Resumo
O peso das imagens e um dos maiores fatores que abrandam o carregamento das paginas. A compressao reduz o tamanho dentro de um formato, a conversao para WebP reduz-o ainda mais, e a otimizacao SVG remove os residuos do editor dos ficheiros vetoriais. As tres ferramentas funcionam inteiramente no navegador — sem conta, sem envio para servidor.