Resposta rápidapara otimizar imagens para site, entregue cada imagem na medida em que ela aparece, em formato moderno (WebP ou AVIF), com qualidade entre 75 e 85, em várias larguras via srcset, com width e height declarados, lazy loading só abaixo da primeira tela e carregamento prioritário para a imagem principal. Esse conjunto atende às recomendações de imagem do PageSpeed.
O site ficou lindo no Figma e na apresentação ao cliente. Uma semana depois do lançamento, o cliente roda o PageSpeed Insights no celular, vê a nota em vermelho e manda o print no grupo. Na lista de oportunidades, quase tudo fala de imagem.
Saber otimizar imagens para site é uma das entregas que mais pesam na percepção de qualidade de uma agência, e é também uma das mais mecânicas. Este guia traduz cada recomendação do Lighthouse em uma tarefa concreta e termina com um checklist para incluir no processo de entrega.
Por que as imagens derrubam a nota
O PageSpeed Insights roda o Lighthouse e mede as Core Web Vitals. Duas delas dependem diretamente das imagens:
- **LCP (Largest Contentful Paint):** o tempo até o maior elemento visível aparecer. Segundo o web.dev, o bom é até 2,5 segundos. Em sites institucionais e lojas, esse elemento costuma ser o banner do topo ou a foto principal.
- **CLS (Cumulative Layout Shift):** o quanto a página "pula" enquanto carrega. Imagem sem dimensões declaradas empurra o texto para baixo quando chega.
Além disso, imagens costumam ser a maior fatia dos bytes de uma página, segundo o Web Almanac do HTTP Archive. Cada KB a mais é tempo de download no 4G.
As recomendações do PageSpeed, traduzidas
Os nomes dos diagnósticos mudam de versão para versão do Lighthouse, mas os problemas são sempre os mesmos.
| O que o relatório aponta | O que significa | Como resolver |
|---|---|---|
| Imagens maiores que o necessário | Foto de 2400 px exibida em 600 px | Redimensionar e oferecer várias larguras (srcset) |
| Formatos modernos | JPG e PNG onde caberia WebP ou AVIF | Converter para WebP |
| Codificação eficiente | Qualidade alta demais | Comprimir com qualidade 75 a 85 |
| Imagens fora da tela | Fotos do rodapé baixando junto com o topo | loading="lazy" abaixo da primeira tela |
| Elemento LCP lento | Banner do topo demorando | Arquivo leve, sem lazy loading, com fetchpriority="high" |
| Imagens sem width e height | Layout pulando (CLS) | Declarar as dimensões no HTML |
Medida certa e srcset
O erro mais caro é mandar a mesma imagem grande para todas as telas. Um celular com tela de 400 px de largura não precisa de uma foto de 1920 px.
O atributo srcset resolve isso: você oferece várias larguras da mesma imagem e o navegador escolhe. Um conjunto comum para conteúdo de largura total é 320, 640, 960, 1280 e 1920 px. O atributo sizes informa quanto da tela a imagem ocupa, para o navegador fazer a conta certa. A MDN explica imagens responsivas com exemplos de código, e o curso Learn Images do web.dev aprofunda.
Na prática, o trabalho pesado não é escrever o HTML, e sim gerar cinco versões de cada imagem do site. O guia de imagens responsivas com srcset mostra o código completo.
Pasta Mágica
Gere todas as larguras do srcset de uma vez
Solte as imagens do site e receba cada uma em várias larguras, em WebP, prontas para o atributo srcset.
Formato e compressão
Converter JPG e PNG para WebP costuma reduzir bastante o peso: segundo o Google Developers, WebP com perda fica de 25% a 34% menor que JPEG comparável. A qualidade de 75 a 85 é o ponto de equilíbrio mais comum para fotos. Ilustrações chapadas e ícones podem ir para SVG, que nem passa por compressão de pixel.
Um detalhe que agências esquecem: a imagem que o cliente sobe pelo painel depois da entrega. Se o CMS não otimiza sozinho, a nota cai no primeiro post novo. Combine com o cliente um padrão de envio, ou entregue o fluxo de otimização junto com o site.
Carregamento e placeholder
Três atributos resolvem quase todo o resto:
loading="lazy"nas imagens abaixo da primeira tela.fetchpriority="high"na imagem principal do topo.widtheheightem todas, para o navegador reservar o espaço.
Para a sensação de velocidade, um placeholder LQIP (uma miniatura de cerca de 20 px de largura, borrada e embutida em base64) aparece instantaneamente no lugar da foto enquanto ela carrega. Veja o que é placeholder LQIP e como usar.
Como otimizar imagens para site: o passo a passo da agência
Este é o roteiro para aplicar a cada projeto, antes da entrega:
- Inventarie as imagens do site: banners, fotos de conteúdo, logos, ícones e miniaturas.
- Defina a largura máxima de exibição de cada tipo, a partir do layout.
- Separe vetores (logos, ícones) para SVG e fotos para o fluxo de pixel.
- Gere as larguras do srcset de cada foto, em WebP, com qualidade em torno de 80.
- Gere o placeholder das imagens grandes, se o layout usar efeito de carregamento.
- Escreva o HTML com
srcset,sizes,width,heighte os atributos de carregamento. - Rode o PageSpeed no celular, na home e em duas páginas internas.
- Registre o padrão no manual do cliente, para os próximos envios.
Antes e depois de um site institucional
| Item | Entrega sem otimização | Entrega com o checklist |
|---|---|---|
| Banner do topo | JPG de 2400 px para todas as telas | WebP em 5 larguras, prioridade alta |
| Fotos de conteúdo | PNG exportado do design | WebP com qualidade 80 e lazy loading |
| Layout | Pula quando as imagens chegam | Espaço reservado com width e height |
| Imagens novas do cliente | Sobem do jeito que vieram | Padrão documentado |
A diferença de nota depende do resto do site, mas a parte de imagens deixa de aparecer como oportunidade.
O ganho também é de processo. Quando o checklist vira etapa fixa do projeto, a otimização deixa de depender de quem fez o front-end naquela semana. O designer exporta as artes em alta, o fluxo gera as versões e o desenvolvedor só encaixa os arquivos no HTML. Na próxima demanda do mesmo cliente, o padrão já está pronto e o retrabalho some.
Checklist rápido de imagens para entregar o site
- Nenhuma imagem maior que o dobro da largura em que aparece.
- Fotos em WebP (ou AVIF), qualidade entre 75 e 85.
srcsetesizesnas imagens de conteúdo e banners.widtheheightem todas as tags de imagem.- Lazy loading só abaixo da primeira tela.
- Imagem principal sem lazy loading e com prioridade alta.
- Logos e ícones em SVG; favicon gerado em todos os tamanhos.
- Padrão de envio de imagens documentado para o cliente.
Perguntas frequentes
Para fotos, WebP é a escolha mais equilibrada hoje: arquivos menores que JPEG e suporte nos navegadores atuais. AVIF pode comprimir ainda mais. PNG fica para transparência e gráficos simples, e SVG para ícones e logos vetoriais.
O srcset é um atributo do HTML que oferece ao navegador várias larguras da mesma imagem. O navegador escolhe a menor que atende à tela, então o celular não baixa a versão de computador. Isso resolve o alerta de imagens maiores que o necessário.
Não. Use em imagens fora da primeira tela. A imagem principal do topo, que costuma ser o maior elemento visível, deve carregar o quanto antes; aplicar lazy loading nela tende a piorar o LCP.
Nem sempre. Imagens costumam ser a maior parte do peso, mas a nota também depende de scripts, fontes, servidor e layout. Otimizar imagens costuma ser o ganho mais rápido, não o único.
É uma miniatura minúscula e borrada da imagem, embutida no HTML, que aparece enquanto a versão real carrega. Ela evita o espaço em branco e dá a sensação de página mais rápida.
Como automatizar isso com a Pasta Mágica
A parte trabalhosa da otimização é gerar as versões de cada imagem. A Pasta Mágica faz isso em lote, com bibliotecas de imagem tradicionais, sem IA alterando o conteúdo.
- Crie sua conta em pastamagica.com.br/cadastrar. Há uma cota grátis para testar com as imagens de um projeto real.
- Monte o pipeline com Conjunto responsivo (srcset), que gera as larguras em WebP, AVIF ou JPEG, sem ampliar imagens menores.
- Ajuste as opções: as larguras do seu layout (o padrão é 320, 640, 960, 1280 e 1920 px), o formato e a qualidade.
- Solte as imagens do projeto. Cada arquivo é conferido pelo conteúdo, não pela extensão.
- Baixe tudo em ZIP e, se quiser, rode Placeholder de carregamento (LQIP) para receber os placeholders em base64.
Para imagens que só precisam ficar mais leves, sem várias larguras, use Comprimir imagem ou Converter imagem. Cada automação mostra o custo em créditos antes de rodar, e a reserva volta sozinha se algo falhar. Os limites de cada plano estão na tabela de preços.
Pasta Mágica
Entregue o próximo site já leve
Comprima as imagens do projeto inteiro com a qualidade que você escolher, sem mudar as dimensões.
