Otimizar imagens para site
Escolha as fotos. A ferramenta cria versões em várias larguras, em WebP, e monta o HTML responsivo: o navegador baixa só o tamanho que a tela precisa.
Como usarImagens leves e responsivas
Disponível em: 
Otimizar imagens para site: para que serve
Escolha uma ou várias fotos e defina as larguras (480, 800, 1200 e 1600 px por padrão), o formato (WebP ou JPG) e a qualidade. A ferramenta cria cada versão sem aumentar a foto além do tamanho original, mostra o peso de cada uma e monta o HTML responsivo com srcset, sizes, width e height e loading=lazy ou fetchpriority=high para a imagem do topo.
Tudo roda no navegador e as fotos não saem do aparelho.
Como usar
- Escolha as imagens do site.
- Ajuste larguras, formato, qualidade e a pasta.
- Baixe o .zip e copie o HTML para a página.
Quando usar
- Deixar o site mais rápido no celular.
- Melhorar o LCP e o CLS do Core Web Vitals.
- Preparar fotos de produtos e de galerias.
Perguntas frequentes
Por que gerar várias larguras?
Um celular não precisa baixar a foto de 1600 px feita para monitores grandes. Com o srcset, o navegador escolhe a menor versão que ainda fica nítida na tela, e a página carrega mais rápido, o que também ajuda no Core Web Vitals (LCP).
WebP funciona em todos os navegadores?
Sim, em todos os navegadores atuais (Chrome, Safari desde a versão 14, Firefox e Edge). Se precisar de compatibilidade com aparelhos muito antigos, escolha JPG.
Para que servem width, height e loading=lazy?
Width e height reservam o espaço da imagem antes de ela carregar, evitando que a página pule (CLS). Loading=lazy adia as imagens que estão fora da tela. Não use lazy na imagem principal do topo da página.
As fotos são enviadas para algum servidor?
Não. Tudo é feito no seu navegador; as imagens não saem do aparelho.
É grátis mesmo?
Sim, 100% grátis. Sem cadastro, sem assinatura e sem limite de uso. Todas as ferramentas do Ferramentas123 são gratuitas e rodam direto no seu navegador.