Gerador de imagem de espaço reservado

Uma imagem placeholder é um gráfico temporário usado enquanto a foto ou arte final não está pronta. Geralmente é um retângulo colorido simples com o tamanho exato em pixels do espaço que preenche, frequentemente rotulado com suas dimensões — por exemplo, uma caixa cinza de 600×400 que mostra "600 × 400". Designers e desenvolvedores as usam em mockups, wireframes e protótipos para que o layout pareça completo antes das imagens reais chegarem. Também é chamada de imagem dummy, imagem de teste ou imagem fake.

Aponte uma tag <img> para a imagem. A forma mais autocontida é um data URI, sem arquivo separado para hospedar: <img src="data:image/svg+xml,…" width="600" height="400" alt="Placeholder">. Clique na aba '<img>' aqui e Copie, e a tag completa — data URI mais largura e altura correspondentes já preenchidas — fica na sua área de transferência, pronta para colar. Você também pode salvar o arquivo baixado e referenciá-lo normalmente, por exemplo: <img src="/img/placeholder-600x400.png">.

Sim — e é mais amigável à privacidade. O placehold.co, via.placeholder.com e dummyimage.com servem imagens dos servidores deles, o que adiciona requisições de rede, pode atingir limites de taxa e significa que esses serviços rastreiam quais páginas usam suas imagens. O UtiloKit gera imagens placeholder inteiramente no seu navegador, então nenhuma requisição sai do seu dispositivo. Você obtém um arquivo para baixar ou um data URI autocontido que funciona offline e nunca quebra se um serviço externo sair do ar.

Imagens placeholder são usadas em mockups de sites e aplicativos, wireframes, templates de e-mail, handoffs de design e desenvolvimento front-end enquanto os assets reais ainda estão sendo criados. Elas reservam espaço exato no layout (o que evita layout shift / CLS), ajudam a testar breakpoints responsivos e preenchem conteúdo demo em templates de CMS e bibliotecas de componentes. Uma única caixa de 1280×720 pode representar todas as miniaturas de vídeo em um grid durante o desenvolvimento, permitindo que toda a equipe revise o layout sem esperar pelos assets de produção.

Corresponda ao tamanho exato em pixels do slot que ela preenche, para que o layout não se desloque quando a imagem real carregar. Alvos comuns: 1200×630 para imagem de compartilhamento social/OG, 1080×1080 para post quadrado no Instagram, 1280×720 para miniatura de vídeo, 256×256 para avatar, 1920×1080 para banner hero de largura total, e 728×90 para anúncio leaderboard. Use os presets de tamanho e proporção aqui para definir esses valores com um clique, ou digite qualquer largura e altura personalizadas até 4000 px.

Digite seu rótulo no campo Texto — por exemplo "Hero", "Avatar" ou "Slot de anúncio 300×250". Deixe em branco e a imagem se rotula automaticamente com suas dimensões (ex.: "600 × 400"). Você também pode definir a cor do texto e o tamanho da fonte, para que um slot em um mockup identifique claramente o que representa. Isso é especialmente útil em revisões de design quando clientes precisam entender o que cada área de imagem representa sem ver os assets finais.

Para uma caixa de cor sólida com texto, SVG costuma ser a melhor opção: ocupa apenas algumas centenas de bytes, permanece nítido em qualquer tamanho e se incorpora facilmente como data URI — ideal para a web. Use PNG quando uma ferramenta precisar de um arquivo raster ou você quiser transparência, JPG quando algo exigir formato de foto, e WebP para o menor arquivo raster. Esta ferramenta exporta os quatro formatos, e SVG é o padrão por ser o mais prático nos fluxos de desenvolvimento web.

O Lorem Picsum (picsum.photos) serve fotografias reais aleatórias, o que é ótimo quando você quer imagens realistas, mas significa que cada carregamento é uma foto diferente puxada de um servidor de terceiros. Esta ferramenta cria caixas de cor sólida determinísticas com seu tamanho, cores e rótulo exatos — previsível, leve e gerada offline no seu navegador, então nada é enviado e o resultado nunca muda entre carregamentos. Use o Picsum para mockups com fotos realistas; use esta ferramenta para placeholders de layout limpos e controlados.

Serviços hospedados como o placehold.co fornecem uma URL como placehold.co/600x400 porque um servidor renderiza a imagem a cada requisição. Esta ferramenta roda inteiramente no seu navegador sem servidor, então em vez de uma URL hotlinkada ela fornece um data URI autocontido que você pode colar em qualquer lugar que aceite uma URL (um src de <img>, um url() do CSS), além de um arquivo SVG, PNG, JPG ou WebP para baixar. Sem requisição de rede, sem limites de taxa e funciona offline.

Defina o fundo como um cinza claro como #e2e8f0 e o texto como um cinza médio como #475569 — esse é o visual neutro clássico de placeholder. Selecione o preset de paleta Cinza para aplicar ambas as cores de uma vez, escolha seu tamanho e baixe. O cinza transmite "intencionalmente vazio", então o placeholder nunca compete visualmente com o design ao redor durante a revisão. Essa é a convenção padrão usada pelo Figma, Sketch e pela maioria dos design systems para slots de placeholder.

Sim, totalmente. A ferramenta roda em qualquer navegador moderno, incluindo Safari no iPhone e Chrome no Android. Defina suas dimensões, escolha as cores, adicione texto e baixe ou copie o data URI direto do seu celular. É especialmente útil ao revisar um layout responsivo no seu dispositivo e precisar rapidamente preencher um slot de imagem para uma captura de tela ou handoff de design. Sem instalação de app — basta abrir a página no seu navegador mobile.

Selecione um preset de proporção (1:1, 4:3, 3:2, 16:9, 2:1 ou 9:16) e a altura se atualiza automaticamente para corresponder à sua largura — insira 1280 de largura em 16:9 e você obtém 1280×720. Ative "Travar proporção" para manter essa proporção enquanto você escala qualquer uma das dimensões. Isso é útil para slots de imagem responsivos que devem manter uma proporção fixa entre breakpoints, ou para criar grids de cards onde cada miniatura de imagem precisa ter a mesma proporção.

Sim — cada imagem é grátis, sem cadastro, sem marca d'água, sem conta e sem limite de uso. Diferente de algumas ferramentas de imagem online que limitam usuários gratuitos a um certo número de downloads por dia ou exigem cadastro com e-mail, esta ferramenta não tem nenhuma restrição. É uma alternativa com respeito à privacidade ao placehold.co, dummyimage.com e via.placeholder.com: em vez de usar os servidores deles por hotlink, você gera a imagem localmente e tem o arquivo ou data URI como seu, sem dependência da disponibilidade de terceiros.