Imagem placeholder
Placeholder Image
Gera um placeholder liso ou degradê em qualquer tamanho, com as dimensões desenhadas nele.
Uma caixa cinza exatamente no tamanho de que você precisa, com as dimensões desenhadas nela, para um layout que está esperando a fotografia real. Ela sai como um data URI SVG que você pode colar direto no CSS, menor do que qualquer PNG e sem custar uma requisição.
'/%3E%3Ctext x='50%25' y='50%25' fill='%23ffffff' font-family='system-ui, sans-serif' font-size='79' text-anchor='middle' dominant-baseline='central'%3E1200×630%3C/text%3E%3C/svg%3E)
Data URI de SVG
580 bytesCodificado com porcentagem em vez de base64: cerca de 25% menor, e ainda dá para ler. Cole direto em background-image: url("…")
Como usar
Defina o tamanho
As dimensões exatas em pixels do espaço. Com o rótulo ligado elas são desenhadas na imagem, que é o que torna evidente uma caixa de tamanho errado em um layout.
Escolha sólido, degradê ou ruído
Sólido e degradê continuam SVG. O ruído tem de ser um PNG, porque um campo aleatório por pixel como SVG seriam megabytes de retângulos.
Copie o data URI
Codificado com porcentagens e não em Base64: cerca de 25% menor, e ainda legível na folha de estilos.
Perguntas frequentes
Por que a versão SVG não está disponível para o ruído?
Porque o SVG não tem nenhuma primitiva aleatória por pixel que renderize de forma idêntica entre motores. Expressá-lo literalmente significa um retângulo por pixel, que para uma caixa de 400×300 são 120.000 elementos.
O ruído muda a cada vez?
Não: ele tem semente, então as mesmas configurações dão a mesma imagem. Um placeholder que mudasse a cada renderização inutilizaria uma bateria de testes de regressão visual.
Posso usar isto em produção?
O data URI, sim: são algumas centenas de bytes e ele nunca dá 404, que é mais do que se pode dizer de um serviço de placeholder de terceiros. Só lembre de removê-los, porque um placeholder que foi para produção é invisível na revisão de código.
Pode receber de
Gerador de BlurHash / ThumbHash
BlurHash / ThumbHash
Codifica uma imagem numa string curta BlurHash ou ThumbHash para usar como placeholder de carregamento.
Gerador de lorem ipsum
Lorem Ipsum Generator
Gera parágrafos, frases ou palavras de preenchimento em latim, inglês, coreano, japonês ou chinês.
Gerador de avatar
Avatar Generator
Gera um identicon determinístico ou um avatar de iniciais a partir de um nome ou e-mail, como SVG ou PNG.
Em seguida
Estas aceitam o que esta ferramenta produz, então o resultado pode ir direto.
Gerador de BlurHash / ThumbHash
BlurHash / ThumbHash
Codifica uma imagem numa string curta BlurHash ou ThumbHash para usar como placeholder de carregamento.
Mockup de dispositivo
Device Mockup
Coloca um print dentro de uma moldura de celular, tablet, notebook ou navegador, com fundo e sombra.
Imagem para Base64 / data URI
Image to Base64 / Data URI
Codifica uma imagem como string Base64 ou como data URI pronto para colar em CSS, HTML ou JSON.
Remover fundo de imagem
Background Remover
Recorta um fundo liso ou de cor única em OKLab e devolve um PNG transparente, com um pincel para corrigir as bordas.
Remover EXIF
EXIF Remover
Remove metadados de câmera, GPS e edição das fotos sem tocar nos pixels.
Gerador de favicon
Favicon Generator
Produz o conjunto completo de favicons — ICO, PNGs, ícone Apple touch, manifesto web — mais o HTML para colar.