Resumo: um placeholder borrado não é decoração — é uma correção do Cumulative Layout Shift disfarçada de efeito de carregamento, já que um placeholder corretamente dimensionado reserva o espaço exato da imagem antes que o arquivo real chegue. Combine este guia com Character Counter, Encoding Converter, Text Difference e AI Hidden Characters.

LQIP (Low Quality Image Placeholder) é uma versão minúscula e fortemente comprimida da imagem real — frequentemente 20×20 pixels ou menos, algumas centenas de bytes — mostrada borrada e ampliada enquanto o arquivo em resolução completa carrega.

O problema real que o LQIP resolve: deslocamento de layout, não estética

Sem um placeholder que reserve as dimensões finais da imagem, a página renderiza sem espaço para a imagem, depois empurra tudo abaixo dela para baixo no momento em que o arquivo chega — o Cumulative Layout Shift (CLS), uma das Core Web Vitals do Google, penaliza exatamente isso. Um placeholder com a mesma proporção (borrado ou não) ocupa o espaço correto desde a primeira renderização, então nada se move quando a imagem real carrega — o borrão é um extra bem-vindo sobre a verdadeira correção, que é reservar o espaço.

Como uma imagem minúscula é incorporada instantaneamente

Placeholders LQIP são tipicamente incorporados como URIs de dados codificados em base64 diretamente no HTML — <img src="data:image/jpeg;base64,..."> — assim o placeholder renderiza com zero requisições de rede adicionais, o que importa porque todo o ponto é mostrar algo antes mesmo que a requisição da imagem real se resolva. Como a imagem fonte é minúscula (frequentemente menos de 1KB antes da codificação), a sobrecarga do base64 — aproximadamente 33% maior que os bytes brutos — é insignificante para um placeholder apesar de ser desperdiçadora para uma imagem em tamanho completo.

LQIP vs. um placeholder de cor dominante sólida

Uma micro-miniatura borrada carrega mais informação visual (formas aproximadas, distribuição de cores) do que um simples retângulo de cor dominante, mas também significa mais trabalho de configuração — gerar e armazenar uma imagem pequena por foto, contra calcular uma única cor média. Para uma galeria de fotos intensa onde a imagem em si é o ponto, a fidelidade extra do LQIP geralmente vale a pena; para imagens de UI menores ou ícones, um placeholder de cor lisa faz o trabalho de prevenção de CLS com menos sobrecarga.

Um fluxo de trabalho para adicionar placeholders corretamente

  1. Defina um width e height explícitos (ou um aspect-ratio CSS) em cada tag de imagem — isso é o que realmente reserva o espaço; a imagem placeholder em si não faz isso sozinha.
  2. Gere o placeholder minúsculo na proporção real da imagem, não em um tamanho fixo que não corresponda — uma proporção desalinhada produz um deslocamento quando a imagem real a substitui.
  3. Incorpore o placeholder como URI de dados base64 para carregamento com zero requisições, reservado apenas para imagens placeholder genuinamente pequenas.
  4. Teste com o throttling de rede do navegador — o valor de um placeholder só se manifesta quando a imagem real demora a chegar.

Erros comuns a evitar

  • Adicionar um efeito de borrão sem também definir dimensões explícitas — o borrão sozinho não faz nada pelo deslocamento de layout.
  • Usar um placeholder com uma proporção diferente da imagem real, o que causa um deslocamento de qualquer forma quando ela é substituída.
  • Incorporar em base64 uma imagem em tamanho completo "por consistência", inflando o peso da página sem nenhum benefício de placeholder.
  • Tratar o LQIP puramente como um efeito visual e não perceber que seu verdadeiro trabalho é reservar espaço de layout.

O borrão é o que os usuários notam; a reserva de dimensões por baixo é o que realmente protege sua pontuação Core Web Vitals.