Como comprimir imagens para um site

No Web Almanac 2025 do HTTP Archive, a página inicial mediana pesava 2,56 MB no celular, e 911 KB disso eram imagens. No desktop, a página mediana carregava 1.058 KB de imagens. As imagens também são o que os visitantes ficam esperando: o maior elemento na tela quando a página carrega, o Largest Contentful Paint (LCP), era uma imagem em 76% das páginas no celular.

Imagens mais leves carregam mais rápido em conexões lentas, consomem menos do plano de dados dos seus visitantes e custam menos banda para você. O LCP é uma das Core Web Vitals, as métricas que o Google usa para avaliar a experiência na página, então imagens pesadas podem custar mais do que alguns segundos de paciência.

A compressão não salva uma imagem muito maior do que o espaço que ela ocupa. Uma foto de câmera com 4000 pixels de largura, exibida em uma coluna de 800 pixels, tem 25 vezes mais pixels do que a página consegue aproveitar. O web.dev observa que enviar imagens em tamanho de desktop para celulares pode gastar 2–4 vezes mais dados do que o necessário.

• Banners de largura total: cerca de 1600–2000 pixels de largura bastam para a maioria dos layouts.
• Imagens na coluna de um artigo: cerca do dobro da largura da coluna, para continuarem nítidas em telas de alta densidade (por exemplo, 1400 pixels para uma coluna de 700 pixels).
• Miniaturas e avatares: o dobro do tamanho exibido, geralmente 200–400 pixels.

O formato define com que eficiência uma imagem pode ser armazenada. Resumindo: fotos combinam com JPG ou WebP; logotipos, capturas de tela e tudo o que tem transparência combinam com PNG ou WebP. Nossa comparação entre JPG, PNG e WebP explica quando cada um se sai melhor.

Cerca de 97% dos navegadores em uso exibem WebP, e ele costuma ser bem menor. Para testar, converta com JPG para WebP ou PNG para WebP e compare o resultado com o original: um arquivo convertido nem sempre fica menor, principalmente em gráficos simples.

A compressão remove dados que o olho dificilmente vai notar. No compressor de imagens da Bitinz, você pode soltar um lote de arquivos JPG, PNG ou WebP e escolher um de três níveis:

• Rápido: prioriza a velocidade, para lotes grandes.
• Equilibrado: o padrão, e uma boa escolha para a maioria das imagens de sites.
• Máximo: demora um pouco mais em troca de arquivos menores; vale a pena para imagens que aparecem em todas as páginas, como banners e fundos.

Quando você mantém o formato, a Bitinz nunca devolve um arquivo maior do que o que você enviou. Compare o resultado com o original em tamanho real, principalmente em imagens com texto fino ou degradês suaves, e depois baixe as que ficaram boas.

Uma imagem bem comprimida ainda pode deixar a página lenta se carregar na hora errada ou no tamanho errado. Alguns atributos HTML fazem a maior parte do trabalho:

• Defina width e height em todas as imagens, para que o navegador reserve o espaço e o layout não pule durante o carregamento.
• Adicione loading="lazy" às imagens mais abaixo na página, para que elas só carreguem quando o visitante rolar até perto delas.
• Nunca use carregamento lento na imagem principal no topo da página. Para essa imagem, o web.dev recomenda fetchpriority="high", em no máximo uma ou duas imagens.
• Use srcset e sizes para oferecer algumas larguras da mesma imagem, assim os celulares baixam um arquivo menor do que as telas grandes.
• Sirva as imagens com um tempo de cache longo, por meio de uma CDN se você tiver uma, para que quem volta ao site não precise baixá-las de novo.

Teste a página no PageSpeed Insights ou no painel Lighthouse do Chrome. Desde o Lighthouse 13, as verificações de imagem ficam reunidas em um único insight, “Improve image delivery”, que lista as imagens que poderiam ser mais comprimidas, servidas em um formato moderno ou reduzidas. Imagens que economizariam menos de 4 KiB não aparecem, então uma lista curta é um bom sinal.

Depois, veja a página você mesmo em um celular. Bordas nítidas, textos dentro de imagens e tons de pele são onde os problemas de compressão aparecem primeiro.

Se o seu site recebe imagens novas todos os dias, por exemplo por um sistema de gerenciamento de conteúdo ou uma loja virtual, comprima-as no envio ou na publicação, em vez de fazer isso à mão. A API para desenvolvedores da Bitinz recebe uma imagem via HTTP e devolve um link para o arquivo comprimido, então pode rodar a partir de um script ou de um pipeline de build. Toda conta tem uma cota mensal gratuita.

1. 01Redimensione cada imagem para cerca do dobro do tamanho em que ela é exibida.
2. 02Use JPG ou WebP para fotos, e PNG ou WebP para gráficos e transparência.
3. 03Comprima no nível Equilibrado e experimente o Máximo nas imagens maiores.
4. 04Compare o resultado com o original antes de substituí-lo.
5. 05Defina largura e altura, use carregamento lento nas imagens abaixo da dobra e nunca na imagem principal.
6. 06Teste a página de novo no PageSpeed Insights.

Vai enviar imagens para outro lugar além do seu site? Cada plataforma tem suas próprias regras: veja os requisitos de tamanho de imagem para e-mail e lojas virtuais.