Gerador de imagens de marcador

Uma imagem placeholder é um elemento gráfico temporário utilizado enquanto a fotografia ou arte final ainda não está disponível. Normalmente é um retângulo de cor sólida com exatamente o tamanho em píxeis do espaço que vai ocupar, frequentemente com as suas dimensões indicadas — por exemplo uma caixa cinzenta de 600×400 com o texto "600 × 400". Designers e programadores inserem-nas em mockups, wireframes e protótipos para que o layout pareça completo antes de chegarem as imagens reais. Também é chamada de imagem dummy, imagem fictícia ou imagem de substituição.

Aponte uma etiqueta <img> para a imagem. A forma mais autossuficiente é um data URI, pois não é necessário alojar um ficheiro separado: <img src="data:image/svg+xml,…" width="600" height="400" alt="Placeholder">. Clique no separador '<img>' aqui e em Copiar — a etiqueta completa, com o data URI e as dimensões corretas já preenchidas, fica na área de transferência pronta a colar. Também pode guardar o ficheiro descarregado e referenciá-lo normalmente, por exemplo <img src="/img/placeholder-600x400.png">.

Sim — e é mais respeitadora da privacidade. O placehold.co, o via.placeholder.com e o dummyimage.com servem imagens a partir dos seus servidores, o que acrescenta pedidos de rede, pode atingir limites de utilização e significa que esses serviços registam quais as páginas que ligam às suas imagens. O UtiloKit gera imagens placeholder inteiramente no seu browser, pelo que nenhum pedido sai do seu dispositivo. Obtém um ficheiro para descarregar ou um data URI autocontido que funciona offline e nunca quebra se um serviço externo ficar indisponível.

As imagens placeholder são utilizadas em mockups de websites e aplicações, wireframes, modelos de e-mail, entregas de design e desenvolvimento front-end enquanto os recursos reais ainda estão a ser criados. Reservam o espaço exato no layout (o que evita o layout shift / CLS), ajudam a testar pontos de quebra responsivos e preenchem conteúdo de demonstração em modelos de CMS e bibliotecas de componentes. Uma única caixa de 1280×720 pode substituir todas as miniaturas de vídeo numa grelha durante o desenvolvimento, permitindo que toda a equipa reveja o layout sem esperar pelos recursos de produção.

Deve corresponder ao tamanho exato em píxeis do espaço que vai ocupar, para que o layout não se desloque quando a imagem real carregar. Tamanhos comuns: 1200×630 para uma imagem de partilha social/OG, 1080×1080 para uma publicação quadrada no Instagram, 1280×720 para uma miniatura de vídeo, 256×256 para um avatar, 1920×1080 para um banner hero de largura total e 728×90 para um anúncio leaderboard. Use os predefinidos de tamanho e proporção aqui para configurar estes valores com um clique, ou introduza qualquer largura e altura personalizadas até 4000 px.

Escreva a sua etiqueta no campo Texto — por exemplo "Hero", "Avatar" ou "Espaço para anúncio 300×250". Deixe em branco e a imagem etiqueta-se automaticamente com as suas dimensões (por exemplo "600 × 400"). Também pode definir a cor do texto e o tamanho da letra, para que um espaço num mockup indique claramente o que representa. Isto é especialmente útil em revisões de design quando os clientes precisam de perceber o que cada área de imagem representa sem ver os recursos finais.

Para uma caixa de cor sólida com texto, o SVG é geralmente a melhor opção: pesa apenas algumas centenas de bytes, mantém-se completamente nítido em qualquer tamanho e incorpora-se facilmente como data URI — ideal para a web. Use PNG quando uma ferramenta necessitar de um ficheiro raster ou quando quiser transparência, JPG quando algo exigir um formato de fotografia, e WebP para o ficheiro raster mais leve. Esta ferramenta exporta nos quatro formatos, e o SVG é o predefinido por ser o mais prático para fluxos de trabalho de desenvolvimento web.

O Lorem Picsum (picsum.photos) serve fotografias reais aleatórias, o que é ótimo quando quer imagens realistas, mas significa que cada carregamento mostra uma fotografia diferente obtida de um servidor externo. Esta ferramenta cria caixas de cor sólida determinísticas com o seu tamanho, cores e etiqueta exatos — previsíveis, leves e geradas offline no browser, sem nada a ser enviado e com resultados que nunca mudam entre carregamentos. Use o Picsum para mockups com fotografias realistas; use esta ferramenta para placeholders de layout limpos e controlados.

Serviços alojados como o placehold.co fornecem um URL do tipo placehold.co/600x400 porque um servidor gera a imagem em cada pedido. Esta ferramenta funciona inteiramente no seu browser sem servidor, por isso, em vez de um URL com ligação externa, fornece um data URI autocontido que pode colar em qualquer lugar onde um URL seja aceite (um src de <img>, um url() em CSS), mais um ficheiro SVG, PNG, JPG ou WebP para descarregar. Sem pedidos de rede, sem limites de utilização e funciona offline.

Defina o fundo para um cinzento claro como #e2e8f0 e o texto para um cinzento médio como #475569 — esse é o aspeto neutro clássico de placeholder. Selecione o conjunto predefinido Cinzento para aplicar ambas as cores de uma vez, escolha o tamanho e transfira. O cinzento transmite a ideia de "intencionalmente vazio", pelo que o placeholder nunca compete visualmente com o design envolvente durante a revisão. Esta é a convenção padrão utilizada pelo Figma, Sketch e pela maioria dos sistemas de design para espaços de placeholder.

Sim, totalmente. A ferramenta funciona em qualquer browser moderno, incluindo o Safari no iPhone e o Chrome no Android. Defina as dimensões, escolha as cores, adicione texto e transfira ou copie o data URI diretamente do seu telemóvel. É particularmente útil quando revê um layout responsivo no dispositivo e precisa de preencher rapidamente um espaço de imagem para uma captura de ecrã ou entrega de design. Não é necessário instalar nenhuma aplicação — basta abrir a página no browser do seu telemóvel.

Selecione um predefinido de proporção (1:1, 4:3, 3:2, 16:9, 2:1 ou 9:16) e a altura atualiza-se automaticamente para corresponder à sua largura — introduza 1280 de largura com 16:9 e obtém 1280×720. Ative "Bloquear proporção" para manter essa relação enquanto ajusta qualquer uma das dimensões. Isto é muito útil para espaços de imagens responsivos que têm de manter uma proporção fixa em diferentes pontos de quebra, ou para criar grelhas de cartões onde cada miniatura de imagem precisa de ter a mesma proporção.

Sim — cada imagem é gratuita, sem registo, marcas de água, conta ou limite de utilização. Ao contrário de algumas ferramentas de imagem online que limitam os utilizadores gratuitos a um certo número de transferências por dia ou exigem registo por e-mail, esta ferramenta não tem restrições. É uma alternativa respeitadora da privacidade ao placehold.co, dummyimage.com e via.placeholder.com: em vez de fazer ligações aos servidores destes serviços, gera a imagem localmente e fica com o ficheiro ou data URI sem qualquer dependência de disponibilidade de serviços externos.