Sobre esta ferramenta
Um placeholder é o que uma página mostra no instante antes de a imagem real terminar de carregar — uma mancha borrada da foto que está a caminho, ou simplesmente um retângulo de cor sólida — para que o layout não salte e a página pareça viva enquanto o recurso real ainda está a caminho. O estilo de "foto borrada" costuma ser chamado de LQIP (Low-Quality Image Placeholder): reduz-se a foto original a um punhado de pixels — 20 a 40px no lado mais longo já basta —, opcionalmente suaviza-se com um toque de desfoque, e recodifica-se esse resultado minúsculo. Com tão poucos pixels há muito pouco para codificar, então o resultado costuma pesar entre algumas centenas de bytes e uns poucos kilobytes, pequeno o bastante para ser incorporado diretamente como uma URI de dados em base64 em vez de ser buscado como um arquivo à parte.
Incorporar o placeholder como uma URI de dados significa que ele viaja dentro do próprio HTML ou CSS da página — sem precisar de uma requisição de rede extra só para mostrar algo antes de a foto real chegar. Ao esticar com CSS esse resultado minúsculo e levemente borrado até o tamanho real de exibição da imagem, ele se parece com uma prévia suave da foto que está por vir; é exatamente esse o truque por trás do efeito de fade-in em sites como o Medium e em muitas galerias de fotos de produtos. Quando você ainda não tem uma foto de origem — uma tela esqueleto, um esboço de layout, ou um espaço reservado para conteúdo que o usuário ainda não enviou — mude para o segundo modo para gerar, em vez disso, um placeholder de cor sólida, gradiente ou listrado em qualquer tamanho de pixel, com o mesmo download instantâneo e a mesma URI de dados copiável. Tudo roda localmente no seu navegador; nada é enviado para lugar nenhum.
Perguntas frequentes
Quão "pequeno" é "pequeno" para o URI de dados LQIP?
Uma saída típica nas dimensões diminutas padrão (bem abaixo de 50px no lado mais longo) fica em algum lugar entre algumas centenas de bytes e aproximadamente 1-2KB como uma string base64 — pequena o suficiente para incorporar diretamente em linha no seu HTML/CSS/JS sem adicionar nenhum peso significativo à sua página, que é todo o ponto da técnica LQIP: mostrar ALGO imediatamente enquanto a imagem real de tamanho completo carrega em segundo plano.
Devo usar o modo "A partir de foto" ou o modo "Sólido/gradiente"?
Use "A partir de foto" quando você já tiver a imagem real e quiser um espaço reservado que sugira visualmente o que está por vir (uma pré-visualização desfocada do conteúdo real) — isso proporciona aos usuários uma experiência de carregamento mais suave e informativa. Use "Sólido/gradiente" quando precisar de um espaço reservado genérico ANTES que a imagem real seja conhecida ou esteja pronta (ex: um estado de carregamento esqueleto para uma galeria cujas fotos ainda não foram escolhidas), ou simplesmente quiser algo mais simples e ainda menor do que um LQIP.