Arraste uma imagem ou clique para selecionar
PNG, JPEG, WebP, GIF, BMP, AVIF
Como funciona
Um espaço reservado é o que ocupa o lugar de uma imagem enquanto ela é baixada. Serve para duas coisas distintas: reservar o espaço exato que ela vai ocupar, de modo que o texto ao redor não salte quando a imagem aparece, e mostrar algo parecido com o conteúdo final para que a espera pareça mais curta do que diante de um retângulo cinza.
Há três famílias de solução. Os hashes compactos (BlurHash e ThumbHash) resumem a imagem em uma cadeia de texto tão curta que você pode guardá-la em uma coluna do banco de dados junto ao restante do registro; o navegador a decodifica e desenha o desfoque. Os data-URI (a miniatura LQIP e o SVG) levam a imagem já codificada dentro do HTML ou do CSS, portanto não precisam de nada de JavaScript. E a cor sólida é o espaço reservado mais barato de todos: sete caracteres.
Qual convém depende de onde nasce o HTML. Se as imagens vêm de um banco de dados e você as lista às centenas, o hash é o mais leve por registro. Se você gera páginas estáticas ou usa um framework que já suporta espaços reservados, o data-URI evita adicionar código de decodificação. Todos os valores que você vê aqui são calculados no seu navegador: a imagem não é enviada a nenhum servidor.
Exemplos
blurhash 4 × 3LGHC162?|cKNqSWDjtaghVfjfQfjO comprimento de um BlurHash depende apenas da quantidade de componentes, não do tamanho nem do conteúdo da imagem: com 4 × 3 são sempre 28 caracteres, com 3 × 3 são 22 e com 5 × 4 são 44.thumbhash3wcKNZpwh3eAiIh3iHiIiHCAB/eHUm ThumbHash ocupa entre 17 e 25 bytes, ou seja, 24 a 36 caracteres em Base64. O tamanho exato depende da proporção da imagem e de se ela tem transparência, porque o formato também codifica o canal alfa.lqip 24 px webpdata:image/webp;base64,UklGRi…Uma miniatura de 24 px de largura em WebP costuma ficar abaixo de 1 KB. Por estar incorporada no HTML não gera uma requisição extra, mas engorda o documento, que não é armazenado em cache separadamente.Casos de uso
- Guardar um BlurHash ou ThumbHash na tabela de imagens para que uma listagem ou um feed com rolagem infinita mostre algo desde o primeiro instante.
- Preencher o atributo blurDataURL do next/image ou o placeholder do NgOptimizedImage quando a imagem não é um import estático.
- Evitar o deslocamento de layout (CLS) em cartões de produto ou de artigo, combinando o espaço reservado com os atributos width e height.
- Incorporar um espaço reservado em HTML estático, um e-mail ou um template onde você não pode executar JavaScript de decodificação.
- Reutilizar o mesmo BlurHash na web e nos aplicativos móveis, que contam com decodificadores em Swift, Kotlin e Flutter.
- Usar a cor média como fundo de um contêiner quando o orçamento de bytes não permite nem sequer uma miniatura.
Perguntas frequentes
BlurHash ou ThumbHash?
O ThumbHash reproduz a imagem com mais fidelidade em menos bytes, conserva a transparência e guarda a proporção, portanto você nem precisa saber o tamanho original para desenhá-lo. O BlurHash é anterior e menos preciso, mas tem implementações para muitas mais plataformas e linguagens. Se você começa do zero, ThumbHash; se já tem decodificadores de BlurHash na sua stack, não há razão para migrar.
Isso melhora o LCP?
Não diretamente. O espaço reservado melhora a percepção de velocidade e, junto com width e height, elimina o deslocamento de layout, mas a métrica LCP continua sendo medida quando a imagem real termina de ser pintada. Mais ainda: se a imagem principal for o elemento LCP, não use loading="lazy" nem a adie atrás de um espaço reservado; convém marcá-la com fetchpriority="high" para que o navegador a solicite antes. Os espaços reservados são para as imagens que ficam fora da primeira tela.
Quantos componentes convém usar no BlurHash?
Quatro por três funciona bem em imagens em paisagem e três por quatro nas verticais. Cada componente adicional acrescenta dois caracteres e um pouco mais de detalhe, mas acima de seis ou sete a diferença deixa de ser perceptível a olho nu, porque o resultado é exibido desfocado de qualquer forma.
Hash ou data-URI?
O hash ocupa algumas dezenas de bytes por imagem e é ideal quando há muitas na mesma página, mas exige código no cliente que o decodifique. O data-URI não precisa de nada, embora pese entre dez e cinquenta vezes mais e viaje dentro do HTML, que não é armazenado em cache separadamente. Com poucas imagens em destaque convém o data-URI; com listagens longas, o hash.
Por que usar o SVG em vez da miniatura diretamente?
Porque o desfoque é aplicado pelo navegador ao desenhar o SVG. Isso permite partir de uma miniatura muito menor sem que apareçam os blocos de pixels ao ampliá-la, e o resultado fica igualmente suave em qualquer tamanho. O SVG também fixa o alfa como opaco, para que o desfoque não deixe as bordas transparentes.
Existe um limite de tamanho para o espaço reservado?
Depende da ferramenta. O NgOptimizedImage do Angular avisa no console quando o data-URI do placeholder ultrapassa 4000 caracteres, porque a partir daí o peso do HTML começa a pesar mais do que o benefício. É uma boa referência geral: se a sua miniatura passar desse valor, reduza a largura ou a qualidade.