Placeholder SVG ou placeholder num URL
O gerador ximg.es serve placeholders como ficheiros: https://ximg.es/600x400. É o mais
prático para maquetar, mas cada imagem é um pedido. Um SVG embutido vai dentro do próprio HTML ou CSS: não faz nenhum
pedido, pesa cerca de 300 bytes, escala sem perder nitidez e funciona sem ligação. É o ideal para protótipos enviados
por e-mail, componentes de um sistema de design ou testes automáticos.
O data URI vai URL-encoded, não em Base64: com SVG ocupa menos e continua legível.
O que é um LQIP
Low Quality Image Placeholder: uma versão minúscula da imagem mostrada enquanto a final carrega. O espaço deixa de parecer em branco, o utilizador intui o conteúdo e a página parece carregar mais depressa. As três variantes:
- Miniatura + CSS blur: uma imagem de 20 px em WebP, com algumas centenas de bytes, ampliada e desfocada com CSS. A mais parecida com o original.
- SVG desfocado: a mesma miniatura dentro de um SVG com
feGaussianBlur. Pode servir de fundo da própria<img>e a margem fica limpa, sem o halo que deixafilter: blur(). - Cor média: uma única cor, a média de toda a imagem. Zero bytes extra; é o que usam o Google Imagens ou o Pinterest. O ximg.es calcula esta mesma cor para cada fotografia do seu banco.
Como usar
Coloque o LQIP como fundo da <img> (ou do contentor) e mantenha width e
height para que o espaço já tenha o tamanho certo. Quando a imagem chega, tapa o fundo. Não é preciso JavaScript.