Como otimizar imagens para web
Imagens respondem pela maior parte do peso da maioria das páginas. Este guia reúne o essencial de otimização de imagens: qual formato escolher, qual qualidade usar, quais dimensões fazem sentido e a diferença entre compressão com e sem perdas.
O que é otimizar uma imagem para web
Otimizar não é simplesmente "diminuir a imagem". É entregar o menor arquivo que ainda parece perfeito na tela do visitante. Isso depende de três decisões independentes, nesta ordem: dimensões (quantos pixels o arquivo realmente precisa ter), formato (WebP, AVIF, JPG, PNG ou SVG) e qualidade (quanto detalhe pode ser descartado sem diferença perceptível).
Qual formato de imagem escolher
| Formato | Melhor para | Peso |
|---|---|---|
| WebP | Padrão para quase tudo na webSuporta transparência e é aceito por mais de 96% dos navegadores. É o formato de saída recomendado no LitePic. | 25–35% menor que JPG na mesma qualidade |
| AVIF | Fotos grandes e heróis de páginaMelhor compressão disponível hoje, mas codificação mais lenta e suporte menor que WebP. Use com fallback. | até 50% menor que JPG |
| JPG / JPEG | Fotos e compatibilidade universalAinda é o formato mais seguro para e-mail, documentos e sistemas antigos. Qualidade 80–90 é o ponto ideal. | referência de comparação |
| PNG | Logos, ícones e prints com textoÉ lossless e preserva transparência. Nunca use PNG para fotografias — o arquivo fica várias vezes maior. | pesado para fotos |
| SVG | Ícones, logos e ilustrações vetoriaisEscala sem perda em qualquer resolução. Sempre que o desenho for vetorial, prefira SVG a PNG. | poucos KB |
Compressão com perdas (lossy) e sem perdas (lossless)
Essa é a decisão que causa mais confusão — e a que mais muda o resultado final. Os dois modos são legítimos; eles servem a objetivos diferentes.
A imagem reconstruída é idêntica ao original. Economia típica de 5% a 30%. Ideal para prints com texto, logos, gráficos de linhas e arquivos que ainda serão editados. Formatos: PNG e WebP lossless.
Descarta detalhes que o olho quase não percebe. Economia típica de 60% a 90%. É a escolha certa para fotografias na web, com qualidade entre 80 e 90. Formatos: JPG, WebP e AVIF lossy.
Vale lembrar que a compressão com perdas é cumulativa: recomprimir repetidamente o mesmo arquivo acumula artefatos. Sempre trabalhe a partir do original.
Dimensões: o ganho que a maioria esquece
Antes de mexer na qualidade, verifique o número de pixels. Uma foto de 4000×3000 exibida em uma coluna de 800 px desperdiça bytes que nenhuma compressão recupera. Reduzir dimensões costuma economizar mais que qualquer ajuste de qualidade.
- 1Meça a largura real de exibição do elemento no layout, em pixels CSS.
- 2Multiplique por 2 para cobrir telas retina — esse é o teto útil do arquivo.
- 3Reduza os pixels primeiro (modo Reduzir pixels no LitePic) e só depois comprima.
- 4Se o mesmo elemento aparece em tamanhos diferentes, gere variações e use srcset.
Checklist de otimização de imagens
- 1Liste as imagens da página e identifique a maior — normalmente é ela que define o LCP.
- 2Escolha o formato: WebP para fotos e capas, SVG para ícones e logos, PNG só quando precisar de transparência sem perdas.
- 3Ajuste as dimensões para no máximo o dobro da largura de exibição, antes de comprimir.
- 4Comprima com qualidade entre 80 e 90 e compare antes e depois em zoom 100%.
- 5Sirva a imagem com width e height declarados, srcset para telas variadas e loading="lazy" fora da primeira dobra.
- 6Meça de novo: rode a análise de página e confirme a queda de peso e de LCP.
Por que otimizar localmente
Serviços tradicionais de compressão exigem upload dos arquivos. O LitePic faz todo o trabalho no seu navegador: a imagem é decodificada, redimensionada e reexportada no dispositivo, sem envio, sem login e sem limite de tamanho ou quantidade. Metadados EXIF e GPS são removidos na reexportação.
Do arquivo isolado ao site inteiro
Otimizar uma imagem é fácil; manter um site leve exige medir. Estes três caminhos cobrem os cenários mais comuns:
Arraste as imagens e exporte em WebP com qualidade 85.
Informe a URL e veja o peso atual das imagens e a economia possível.
Use o sitemap.xml para mapear as imagens de todas as páginas.
Para aprofundar: veja o guia de LCP, o guia de JPG, o guia de PNG com transparência e o guia de resolução.
Perguntas frequentes sobre otimização de imagens
O que significa otimizar imagens para web?
Otimizar imagens para web é entregar o menor arquivo possível sem prejudicar a qualidade percebida. Isso envolve três decisões: o formato (WebP, AVIF, JPG, PNG ou SVG), o nível de qualidade da compressão e as dimensões em pixels, que devem corresponder ao tamanho real de exibição na tela.
Qual é o formato de imagem mais leve para web?
Entre os formatos amplamente suportados, o WebP é o mais leve: normalmente 25% a 35% menor que um JPG de qualidade visual equivalente. O AVIF pode ser ainda menor (até 50%), mas tem suporte menor e codificação mais lenta. Para desenhos vetoriais, o SVG é imbatível em peso.
Qual a diferença entre compressão com perdas (lossy) e sem perdas (lossless)?
A compressão sem perdas (lossless) reorganiza os dados do arquivo sem descartar informação — a imagem reconstruída é idêntica ao original, e a economia costuma ficar entre 5% e 30%. A compressão com perdas (lossy) descarta detalhes que o olho humano quase não percebe, entregando economias de 60% a 90%. Para a web, lossy na faixa de qualidade 80–90 é a escolha certa na maioria dos casos.
Quando usar compressão sem perdas?
Use lossless quando a fidelidade exata importa: prints de tela com texto fino, logos, gráficos com linhas nítidas, imagens que serão editadas depois e arquivos destinados à impressão. Nesses casos, prefira PNG ou WebP lossless.
Qual nível de qualidade usar ao otimizar imagens?
Para fotos na web, 80 a 90 é a faixa ideal. Abaixo de 75 começam a aparecer artefatos em céu, pele e gradientes; acima de 90 o ganho de peso é pequeno demais para compensar. Miniaturas toleram valores mais baixos, entre 70 e 78.
Qual largura em pixels usar nas imagens de um site?
Use no máximo o dobro da largura de exibição, para cobrir telas retina. Uma imagem exibida em 600 px de largura raramente precisa de mais de 1200 px de arquivo. Fotos de produto costumam ficar bem entre 1200 e 1600 px, e imagens de herói entre 1600 e 2000 px.
Otimizar imagens melhora o SEO?
Sim, de forma indireta e mensurável. Imagens são a maior parte do peso da maioria das páginas e normalmente definem o Largest Contentful Paint (LCP), que é um dos Core Web Vitals usados pelo Google. Reduzir o peso das imagens melhora o LCP, a experiência do visitante e a taxa de conversão.
Preciso enviar minhas imagens para um servidor para otimizar?
Não. No LitePic, toda a decodificação, o redimensionamento e a recompressão acontecem dentro do seu navegador, via Canvas e WebAssembly. Nenhum arquivo é enviado, não há login e não existe limite de tamanho ou quantidade.
Como otimizar as imagens de um site que já está no ar?
Comece medindo. Use a análise de página do LitePic para uma URL específica ou a auditoria via sitemap.xml para mapear as imagens de todas as páginas do site de uma vez. As duas ferramentas mostram o peso atual, a economia estimada e permitem baixar as versões otimizadas.
Comprimir WebP sem perder qualidade é possível?
O WebP tem os dois modos. No modo lossless, a imagem é idêntica ao original e a economia é moderada. No modo lossy com qualidade 80–90, a diferença visual é praticamente imperceptível em telas comuns, com economia muito maior. Para fotos, o modo lossy nessa faixa é o mais indicado.
Devo remover metadados das imagens?
Sim, na maioria dos casos. Dados de EXIF, GPS e da câmera podem somar dezenas de KB e expor informações sensíveis, como a localização da foto. O LitePic remove esses metadados automaticamente ao reexportar a imagem.
Otimize suas imagens agora
Abra o otimizador já configurado com as recomendações deste guia: modo Otimizar web, formato WebP e qualidade 85.