Está a construir um layout, cola o URL habitual de placeholder e este não carrega. O navegador inunda-o com avisos de conteúdo misto, o separador fica bloqueado durante meio minuto. Parece-lhe familiar?

Os serviços de placeholder do início da década de 2010 estão a desaparecer silenciosamente: domínios não são renovados, certificados TLS expiram, limites de taxa restringem os pedidos. Descobrir isto uma hora antes de um prazo não tem graça nenhuma.

Testámos manualmente 14 ferramentas ativas: de retângulos coloridos a geração por IA e avatares determinísticos. Cada uma suporta HTTPS, mantém uma disponibilidade estável e não o deixará ficar mal quando o backend ainda não está pronto, mas já precisa de mostrar o layout.

💡 Visão geral rápida:

• Tipologia: blocos coloridos, preenchedores de fotos, SVG com entrega na Edge, avatares, mockups de dispositivos e geração por IA; há uma ferramenta para cada tarefa.
• Velocidade: o placeholders.dev e o placeholdr.dev correm em Cloudflare Workers e servem conteúdo a partir da localização Edge mais próxima.
• Segurança: todos os 14 serviços funcionam sobre HTTPS. Zero avisos de conteúdo misto.
• Código pronto a usar: cada serviço fornece um modelo de URL que pode copiar e colar em <img src> em segundos.

Critérios de seleção: o que torna um serviço adequado para mockups funcionais

Os parâmetros que utilizámos para avaliar cada ferramenta:

• Apenas HTTPS. Conteúdo misto em 2026 é um sinal de alerta. Serviços sem TLS não entraram na lista.
• CDN ou entrega na Edge. Cobertura global significa baixa latência a partir de qualquer localização.
• Manutenção ativa. Commits ou atualizações recentes no último ano.
• Sintaxe de URL previsível. O padrão deve ser óbvio à primeira vista, sem necessidade de ler documentação.
• Formatos modernos. WebP, AVIF, SVG; sem eles, um serviço não consegue competir.

Tabela comparativa

1. Placehold.co: o padrão de referência para blocos coloridos

Chegou para substituir o pouco fiável via.placeholder.com e tornou-se a escolha padrão. Cores HEX, Google Fonts, tamanho: tudo vai no URL. SVG, WebP, PNG. O padrão é óbvio à primeira vista: /600x400/EEE/31343C?text=Hero+Image.

Vantagens:

• SVG, WebP, PNG: três formatos num só serviço.
• Cores HEX e Google Fonts diretamente na query string.
• CDN estável com latência mínima.

Desvantagens:

• Apenas blocos coloridos. O serviço não gera fotografias.

1
<img src="https://placehold.co/600x400" alt="Placeholder">
2
<img src="https://placehold.co/600x400/EEE/31343C?text=Hero+Image" alt="Hero">
3
<img src="https://placehold.co/600x400.webp" alt="WebP format">

🔗 Placehold.co

2. Lorem Picsum: preenchedores de fotos para mockups realistas

"Lorem Ipsum, mas para imagens." Fornece fotografias reais da sua base de dados, perfeito quando os quadrados coloridos parecem deslocados. O parâmetro seed bloqueia uma imagem, algo inestimável para testes de UI.

Os filtros (grayscale, blur) acrescentam flexibilidade. Não requer atribuição.

Vantagens:

• Fotografias de qualidade para mockups, não lixo de stock.
• Filtros de desfoque e escala de cinzentos.
• seed para repetibilidade em cada pedido.

Desvantagens:

• Sem controlo preciso sobre o conteúdo da foto. Obtém-se o que calhou ficar no enquadramento.

1
<img src="https://picsum.photos/800/600" alt="Random photo">
2
<img src="https://picsum.photos/seed/product/400/300" alt="Fixed photo">
3
<img src="https://picsum.photos/800/600?grayscale&blur=2" alt="Filtered">

🔗 Lorem Picsum

3. DummyImage: predefinições para qualquer tarefa

O serviço com a personalização mais extensa para placeholders de texto. A principal característica são as dezenas de predefinições: formatos de anúncios (Leaderboard, Wide Skyscraper), proporções (16:9, 4:3), resoluções populares. Cores de fundo e texto via HEX, formatos PNG, JPEG, GIF.

Sem CDN, a velocidade depende da geografia. Não é crítico para desenvolvimento local.

Vantagens:

• Dezenas de predefinições para anúncios, ecrãs e layouts padrão.
• Controlo total sobre a cor de fundo e do texto.

Desvantagens:

• Sem CDN. A latência é percetível a partir da Austrália ou do Japão.

1
<img src="https://dummyimage.com/728x90/000/fff" alt="Leaderboard ad">
2
<img src="https://dummyimage.com/16:9x1080" alt="HD ratio">

🔗 DummyImage

4. Placeholders.dev: SVG a partir de servidores Edge

Executado em Cloudflare Workers e fornece SVG a partir de servidores Edge. «Super rápido» não é conversa de marketing: a entrega a partir da localização Cloudflare mais próxima significa latência de milissegundos de um só dígito. O SVG proporciona uma nitidez perfeita em ecrãs Retina, a qualquer escala.

Vantagens:

• Geração instantânea via Cloudflare Workers.
• Nitidez em qualquer ecrã graças ao SVG.
• Entrega Edge a partir da localização de rede mais próxima.

Desvantagens:

• Apenas SVG. Os formatos rasterizados não são suportados.

1
<img src="https://images.placeholders.dev/?width=400&height=300&bgColor=%23f0f0f0&textColor=%23333" alt="SVG placeholder">

🔗 placeholders.dev

5. DiceBear: avatares determinísticos

Gera avatares com base no princípio «uma semente, um resultado». Passe um email ou nome de utilizador e obtenha o mesmo avatar em cada pedido. Inestimável para listas de utilizadores e painéis de administração: o conteúdo parece preenchido sem o incómodo de fotos reais.

Mais de vinte estilos, desde pixel art a rostos realistas. Tudo em SVG. A API é aberta.

Vantagens:

• Duas dúzias de estilos de avatar.
• Geração determinística: a semente garante repetibilidade.
• SVG para um dimensionamento perfeito.

Desvantagens:

• Apenas SVG. Para avatares rasterizados, precisará de um conversor adicional.

1
<img src="https://api.dicebear.com/9.x/avataaars/[email protected]" alt="User avatar">

🔗 DiceBear

6. UI Avatars: iniciais em vez de imagens

Gera avatares com as iniciais do utilizador sobre um fundo colorido. Ideal para comentários, chats e painéis de administração onde as fotos não são necessárias, mas os círculos cinzentos sem rosto são irritantes. O tamanho, o tipo de letra, a cor de fundo e a cor do texto são todos configuráveis através de parâmetros de URL.

O serviço é totalmente aberto: código-fonte no GitHub, pode montar a sua própria instância em 10 minutos. Uma vantagem significativa para projetos com requisitos de privacidade.

Vantagens:

• Iniciais em vez de imagens, com carregamento instantâneo.
• Controlo total sobre a cor de fundo, cor do texto e tipo de letra.
• Código aberto no GitHub.

Desvantagens:

• Apenas texto sobre fundo colorido. Ilustrações não são suportadas.

1
<img src="https://ui-avatars.com/api/?name=John+Doe&size=128&background=0D8ABC&color=fff" alt="JD Avatar">

🔗 UI Avatars

7. Lorem Flickr: fotos com licença Creative Commons

Procura fotos com licença Creative Commons no Flickr e disponibiliza-as como placeholders. Em comparação com o Lorem Picsum, obtém aqui imagens mais «espontâneas» e menos composições encenadas. A qualidade varia, mas para maquetes onde a autenticidade é importante, isso é uma vantagem.

O parâmetro lock fixa a imagem. A pesquisa por palavra-chave restringe a seleção.

Vantagens:

• Pesquisa por palavra-chave.
• lock para persistência da imagem.
• Creative Commons com licenciamento transparente.

Desvantagens:

• Qualidade imprevisível: de obra-prima a instantâneo desfocado.

1
<img src="https://loremflickr.com/1280/720" alt="Flickr Image">

🔗 Lorem Flickr

8. Placeit: maquetes profissionais de dispositivos

Uma plataforma da Envato com cerca de 3000 modelos de maquete: iPhone, Samsung, desktops, portáteis, tablets. O serviço é pago (subscrição Envato), mas para apresentar designs a clientes ou em portefólios, oferece resultados indistinguíveis de renderizações de estúdio.

Arrastar e largar: carregue uma captura de ecrã, escolha um dispositivo, faça o download. Para apresentações comerciais, o investimento compensa imediatamente.

Vantagens:

• Cerca de 3000 modelos de dispositivos e cenários.
• Interface de arrastar e largar que não requer conhecimentos de design.

Desvantagens:

• Pago. As maquetes gratuitas têm marcas de água.

🔗 Placeit

9. ASSETS.SO: placeholders temáticos com personalidade

Acrescenta contexto à rotina diária de um programador. Categorias: jogos, filmes, música, desporto, calçado. Um site de filmes com fotogramas reais parece mais convincente do que uma maquete com quadrados coloridos. A API é simples: /game.jpg?w=1280&h=720.

Vantagens:

• Categorias temáticas para diferentes nichos.
• API extremamente simples.

Desvantagens:

• Controlo mínimo sobre o conteúdo.

1
<img src="https://via.assets.so/game.jpg?w=1280&h=720" alt="Game Asset">

🔗 ASSETS.SO

10. RoboHash: avatares de robôs para dados de teste

Gera robôs únicos a partir de qualquer texto. O princípio é o mesmo do DiceBear (geração determinística), mas com personalidade: cada robô tem a sua própria expressão e esquema de cores. Estilos: robôs clássicos, monstros, gatos robô.

Adequado para protótipos onde se pretende dar personalidade a perfis de teste.

Vantagens:

• Geração determinística a partir de texto.
• Três estilos: robôs, monstros, gatos.
• Código aberto.

Desvantagens:

• Apenas PNG. SVG não é suportado.

1
<img src="https://robohash.org/[email protected]" alt="Robot avatar">

🔗 RoboHash

11. Bacon Mockup: bacon em qualquer resolução

Imagens deliciosas de bacon em qualquer resolução. Para sites de restaurantes, blogues de culinária ou para pregar partidas a colegas. Soa a piada, mas o serviço tem-se mantido estável durante vários anos.

Alta resolução, API simples. De nicho, mas memorável.

Vantagens:

• Fotos de alta resolução.
• API extremamente simples.

Desvantagens:

• Tema restrito. Inútil fora de projetos de alimentação.

1
<img src="https://baconmockup.com/1280/720" alt="Bacon">

🔗 Bacon Mockup

12. Placebeard.it: robustez em cada pixel

A resposta ao placekitten, algo mais terra a terra e masculino. Fotos a cores ou a preto e branco de pessoas barbudas em quaisquer proporções. Para barbearias, roupa masculina e startups hipster. Suporte a escala de cinzentos. O serviço tem funcionado de forma estável durante muito tempo.

Vantagens:

• Fotos temáticas, ideais para o segmento masculino.
• Suporte a escala de cinzentos.

Desvantagens:

• Tema restrito. Não adequado para públicos femininos.

1
<img src="https://placebeard.it/1280x720" alt="Beard">

🔗 Placebeard.it

13. Placebear: força natural bruta

Placeholders grandes, peludos e, por vezes, perigosos. Excelentes para testar a responsividade em imagens com texturas complexas: pelo, relva e casca de árvore fornecem material rico para verificar a compressão e o redimensionamento.

Fotos de alta resolução, tempo de atividade estável. Não é para todos os projetos, mas vale a pena manter nos favoritos.

Vantagens:

• Fotos de alta resolução.
• Tempo de atividade estável.

Desvantagens:

• Conteúdo específico. Nem todos os clientes apreciarão um urso no seu mockup.

1
<img src="https://placebear.com/1280/720" alt="Bear">

🔗 Placebear

14. Placeholdr.dev: Geração de placeholders com IA

O elemento mais recente neste nicho: geração por IA através do modelo de difusão Flux em Cloudflare Workers com cache R2. O primeiro pedido demora vários segundos a renderizar; os seguintes são servidos instantaneamente a partir da cache.

Formato do URL: /{width}x{height}/{prompt}. Estilos: photographic, artistic, anime, oil-painting, 3d-render, cartoon. O parâmetro seed (1-3) fixa a variante. Gratuito, sem necessidade de contas.

Vantagens:

• Geração por IA: descrições em linguagem natural em vez de códigos HEX.
• Seis estilos, do fotorrealismo à renderização 3D.
• Distribuição na edge via Cloudflare Workers.

Desvantagens:

• O primeiro pedido é lento (vários segundos para renderizar).
• Serviço recente (lançado em janeiro de 2026); a estabilidade a longo prazo é incerta.

1
<img src="https://placeholdr.dev/600x400/minimalist modern office" alt="AI-generated office">
2
<img src="https://placeholdr.dev/320x320/cat?style=anime" alt="AI anime cat">
3
<img src="https://placeholdr.dev/1024x768/camera?style=3d-render&seed=3" alt="AI 3D camera">

🔗 placeholdr.dev

Considerações técnicas: CSP, modo offline e porque é que os URLs antigos morrem

Cabeçalhos Content-Security-Policy

Se o seu site utiliza CSP restritiva, os serviços externos de placeholders serão bloqueados pelo navegador por predefinição. Atualize a diretiva img-src:

1
Content-Security-Policy: img-src 'self' https://placehold.co https://picsum.photos;

Importante: remova estes domínios da CSP antes de publicar em produção. Os placeholders são para desenvolvimento, não para sites ativos.

Desenvolvimento local sem internet

Para desenvolvimento offline ou projetos com requisitos de privacidade:

• Geração de placeholders no lado do cliente via Canvas ou SVG.
• Script gerador local em Node.js.
• Ficheiros de placeholder estáticos no repositório.

Porque é que os URLs antigos morrem

A maioria dos serviços do início da década de 2010 eram projetos paralelos: lançados, mantidos durante uns anos e depois abandonados. O domínio expira, o certificado caduca e o URL transforma-se numa abóbora. Escolha serviços com commits recentes e suporte comercial.

⁉️🤔 Perguntas frequentes

Posso usar placeholders em produção?

Não. Os serviços de placeholders destinam-se apenas a desenvolvimento e prototipagem. Limites de pedidos, tempo de inatividade, latência sob carga. Substitua os placeholders por ativos reais antes da publicação.

Porque é que alguns serviços sobrevivem durante anos enquanto outros morrem ao fim de um par de temporadas?

A diferença está no modelo de suporte. Serviços comerciais ou patrocinados têm recursos dedicados e recebem atualizações estáveis. Projetos paralelos individuais funcionam a entusiasmo. Verifique o histórico de commits: se o último foi há três anos, procure uma alternativa.

Como fixo a mesma imagem em cada recarregamento?

Use o parâmetro seed. Lorem Picsum: /seed/product/400/300. DiceBear: [email protected]. RoboHash: qualquer texto no URL. placeholdr.dev: ?seed=1 (três variantes). Uma seed produz sempre um resultado.

Tenho de atualizar a CSP para os placeholders?

Sim. Se o seu site tem cabeçalhos Content-Security-Policy configurados, adicione os domínios dos serviços à diretiva img-src, caso contrário o navegador bloqueará o carregamento. Não se esqueça de os remover antes da publicação.

Os placeholders externos afetam a velocidade de desenvolvimento local?

Cada tag <img> com um URL externo faz um pedido HTTP. Serviços com CDN e Edge funcionam rapidamente, mas para autonomia total, mantenha um conjunto de placeholders estáticos no seu repositório.

Qual é o melhor formato para placeholders?

SVG para formas geométricas e texto: peso mínimo, escalabilidade perfeita. WebP para placeholders fotográficos: consideravelmente mais leve que JPEG com a mesma qualidade. PNG quando precisa de transparência. AVIF se os navegadores do seu público-alvo o suportarem.

Posso usar imagens destes serviços em maquetes comerciais?

A maioria dos serviços fornece conteúdo gratuitamente e sem exigência de atribuição. Serviços baseados no Flickr funcionam com Creative Commons; verifique a licença de cada foto. O Placeit requer uma subscrição Envato para downloads sem marca de água.

O que guardar nos favoritos: a análise final dos placeholders de 2026

As nossas escolhas para o trabalho diário: Placehold.co para blocos de cor, Lorem Picsum para maquetes com fotos e DiceBear para avatares. Estes três serviços cobrem a grande maioria das tarefas.

Precisa de velocidade em Retina? placeholders.dev com SVG na edge. Quer visuais contextuais sem procurar em bancos de imagens? placeholdr.dev com geração por IA. A preparar uma apresentação comercial? Placeit com as suas três mil maquetes.

A regra principal mantém-se: os placeholders vivem no servidor de desenvolvimento. Antes da publicação, substitua cada URL externo por um ativo real. Mantenha dois ou três serviços de reserva nos favoritos; o que funcionava ontem pode ficar offline amanhã.