Resposta rápidaum placeholder de imagem do tipo LQIP é uma miniatura borrada, com poucas centenas de bytes, embutida no HTML em base64 e exibida enquanto a foto real carrega. Para evitar o "pulo" da página, combine o LQIP com as dimensões da imagem (width e height ou aspect-ratio no CSS). As dimensões impedem o deslocamento; o blur dá ao visitante uma prévia em vez de um buraco branco.
Você abre a página de um produto no celular, começa a ler a descrição e, de repente, o texto desce meio palmo. A foto terminou de carregar e empurrou tudo para baixo. Se você estava prestes a tocar num botão, tocou no lugar errado.
Esse "pulo" tem nome técnico, Cumulative Layout Shift (CLS), e é uma das métricas que o Google usa para avaliar a experiência da página. A solução passa por duas peças: reservar o espaço e preencher esse espaço enquanto a imagem não chega.
Por que a página pula quando a imagem carrega
O navegador monta a página antes de as imagens chegarem. Se o HTML não diz o tamanho da foto, ele reserva altura zero. Quando o arquivo chega, a imagem ocupa o espaço real e empurra o que está abaixo.
Os casos mais comuns:
- Tag
<img>semwidtheheight, muito comum em temas antigos e em CMS. - Imagens responsivas com CSS que define só a largura.
- Banners e carrosséis carregados por script.
- Imagens de terceiros, como anúncios e embeds, sem espaço reservado.
O que o CLS mede
Segundo o web.dev, o CLS soma os deslocamentos inesperados de layout durante a vida da página. Um valor de até 0,1 é considerado bom; acima de 0,25, ruim. Imagem sem dimensão é uma das causas mais frequentes de nota ruim.
O que é LQIP e como ele funciona
LQIP (Low Quality Image Placeholder) é uma técnica simples:
- gera-se uma versão minúscula da imagem, com algo como 20 px de largura;
- essa miniatura é codificada em base64 e embutida no HTML como data URI;
- o navegador exibe a miniatura esticada e borrada no espaço da imagem;
- quando a foto real chega, ela substitui a miniatura, geralmente com uma transição suave.
Como a miniatura já está no HTML, ela aparece no primeiro desenho da página, sem nenhuma requisição extra.
Tipos de placeholder de imagem
| Tipo | Como é | Peso típico | Quando usar |
|---|---|---|---|
| Cor sólida | Cor dominante da imagem | Poucos bytes | Listagens grandes, grades de produto |
| LQIP com blur | Miniatura borrada da própria imagem | Centenas de bytes a cerca de 1 KB | Fotos de destaque, galerias, páginas de produto |
| Esqueleto (skeleton) | Caixa cinza animada | Só CSS | Interfaces de aplicativo |
| SVG traçado | Contorno vetorial da imagem | 1 a 5 KB | Ilustrações e logos |
O LQIP com blur é o meio-termo mais usado: barato de gerar, leve e fiel às cores da foto.
Pasta Mágica
Gere o LQIP do catálogo inteiro de uma vez
Solte as imagens e receba, para cada uma, um JSON com o data URI em base64, a largura, a altura e a proporção.
Como usar o placeholder de imagem no HTML
O ponto de partida é sempre reservar o espaço. Depois, o blur entra como fundo.
1. Reserve o espaço com width, height ou aspect-ratio
“html <img src="produto-960.webp" width="1200" height="1200" alt="Tênis azul de lado"> “
Com width e height no HTML, navegadores modernos calculam a proporção antes de baixar a imagem, mesmo que o CSS mude a largura. Outra forma é usar a propriedade aspect-ratio do CSS:
“css .foto { width: 100%; aspect-ratio: 1 / 1; } “
2. Use o LQIP como fundo
“html <img src="produto-960.webp" width="1200" height="1200" alt="Tênis azul de lado" style="background-size: cover; background-image: url('data:image/webp;base64,UklGR...')"> “
Enquanto a foto não chega, o fundo mostra a miniatura esticada. Para reforçar o desfoque, aplique filter: blur() num elemento sobreposto, ou gere a miniatura já borrada.
3. Em frameworks
- Next.js: o componente
Imageaceitaplaceholder="blur"comblurDataURL. Para imagens remotas, você fornece o data URI. - Nuxt, Astro e outros: costumam ter componentes de imagem com suporte a placeholder; o formato aceito é o mesmo data URI.
- WordPress e plataformas de loja: depende do tema. Muitos já geram o espaço reservado; o blur exige plugin ou ajuste no tema.
Gerar LQIP em lote: o fluxo prático
Para um site com 15 imagens, gerar o placeholder à mão até é viável. Para um catálogo com 800 produtos, não. O fluxo que costuma funcionar:
- Separe as imagens que aparecem acima da dobra ou em destaque. Não precisa de LQIP em tudo.
- Gere as versões responsivas de cada imagem em várias larguras, como 320, 640, 960, 1280 e 1920 px.
- Gere o LQIP de cada original, com cerca de 20 px de largura e blur leve.
- Guarde o resultado (data URI, largura, altura e proporção) junto do cadastro da imagem: no CMS, num JSON ou no banco.
- Ajuste o template para usar
width,heighte o placeholder em cada<img>. - Meça antes e depois com o PageSpeed Insights ou o painel do Search Console.
O passo 2 é o assunto de imagens responsivas com srcset. Para o peso das imagens em si, veja como otimizar imagens para site.
Quanto pesa um LQIP
A conta é favorável. Uma miniatura WebP de 20 × 20 px com qualidade baixa costuma ficar abaixo de 1 KB; em base64, o tamanho cresce cerca de 33%. Numa página com 12 fotos de produto, isso soma algo como 5 a 12 KB no HTML. Uma única foto de produto mal otimizada costuma pesar mais que isso.
Antes e depois numa vitrine de loja
Uma agência atendia uma loja de moda com páginas de categoria de 48 produtos. As fotos tinham dimensões variadas e nenhuma width/height no tema.
| Item | Antes | Depois |
|---|---|---|
| Espaço reservado | Nenhum | width e height em todas as imagens |
| Prévia durante o carregamento | Espaço branco | LQIP com blur nas 8 primeiras fotos |
| Sensação no celular | Página "pulando" | Grade estável desde o início |
| Geração dos placeholders | Script feito à mão, sem manutenção | Lote gerado a cada atualização do catálogo |
O ganho de CLS veio principalmente das dimensões. O LQIP melhorou a percepção: a página parece pronta antes de estar. Para quem entrega esse tipo de trabalho a clientes, o guia de entrega de arquivos ao cliente ajuda a organizar o pacote final.
Erros comuns
- LQIP grande demais: 64 px de largura com qualidade alta já pesa vários KB por imagem.
- Placeholder sem dimensão: o blur aparece, mas a página continua pulando.
- LQIP em todas as imagens: incha o HTML sem ganho visível abaixo da dobra.
- Proporção diferente entre o placeholder e a foto final: a troca fica visível.
Perguntas frequentes
LQIP significa Low Quality Image Placeholder: uma versão minúscula e borrada da imagem, geralmente com poucas centenas de bytes, exibida enquanto a foto real carrega. Ela dá ao visitante uma prévia de cores e formas no lugar de um espaço em branco.
Não. O que evita o deslocamento de layout é reservar o espaço da imagem, com width e height no HTML ou aspect-ratio no CSS. O LQIP melhora a percepção de carregamento; as dimensões evitam o pulo.
Um pouco, porque o placeholder vai embutido no HTML em base64. Por isso ele precisa ser muito pequeno: com cerca de 20 px de largura, costuma ficar entre algumas centenas de bytes e 1 KB por imagem. Use nas imagens visíveis e importantes, não em todas.
O componente Image do Next.js aceita placeholder="blur" com a propriedade blurDataURL, que recebe um data URI. Para imagens importadas estaticamente, o próprio framework gera esse valor; para imagens remotas, você precisa fornecê-lo.
Lazy loading adia o download das imagens fora da tela. O LQIP preenche o espaço enquanto a imagem não chega. Os dois se complementam: a imagem carrega só quando necessário, e até lá o visitante vê uma prévia.
Como automatizar isso com a Pasta Mágica
Na Pasta Mágica, gerar placeholders e versões responsivas vira um lote: você solta as imagens e baixa tudo pronto. É processamento de imagem tradicional, com bibliotecas determinísticas, sem IA redesenhando as fotos.
- Crie sua conta em pastamagica.com.br/cadastrar e teste com a cota grátis.
- Escolha Placeholder de carregamento (LQIP) e ajuste a largura da miniatura (o padrão é 20 px), o blur e a qualidade.
- Rode também Conjunto responsivo (srcset) para gerar as larguras da imagem real, em WebP, AVIF ou JPEG.
- Solte as imagens. Cada arquivo é conferido pelo conteúdo (magic bytes), não pela extensão.
- Baixe os resultados: um JSON por imagem com o data URI, a largura, a altura e a proporção, prontos para o template.
O custo em créditos aparece antes de rodar, e se uma etapa falhar a reserva volta sozinha. Os limites de cada plano estão na tabela de preços.
Pasta Mágica
Placeholder e srcset do mesmo lote
Gere as larguras responsivas e o LQIP de cada imagem, prontos para usar no HTML ou no framework.
