Gerar uma imagem placeholder

As imagens são devolvidas em formato JPEG, otimizado para a web. O peso mantém-se mínimo mesmo para grandes dimensões, o que torna a ferramenta adequada a maquetas HTML e CSS que contêm muitos placeholders. O conteúdo visual é um gradiente ou uma cor de preenchimento neutra, nunca uma fotografia real sujeita a direitos de autor.

As dimensões razoáveis vão de 16 px a cerca de 2000 px por lado. Acima disto, o resultado continua possível mas a geração torna-se lenta sem real utilidade, uma vez que os placeholders se destinam a maquetas mais modestas. Para um visual hero de 1920 x 1080, a ferramenta responde sem problemas.

O URL /image/<largura>/<altura> é determinista, pode colá-lo tal como está nas suas tags <img> sem descarregamento prévio. Para um ambiente de produção, prefira alojar as imagens definitivas em sua casa: este serviço destina-se sobretudo a maquetas, storybooks e testes de integração.

O Lorem Picsum devolve fotografias reais aleatórias, simpáticas para dar realismo a uma maqueta. O Placeholder.com serve imagens com etiqueta de dimensões. O gerador cdrn devolve placeholders simples e rápidos, sem chamada externa nem dependência de terceiros no seu projeto front-end.

Não nesta versão. As imagens são geradas com uma rendição neutra predefinida. Se precisa de controlar precisamente a cor de fundo para validar um layout com contrastes, crie um ficheiro estático de alguns kilobytes na tonalidade pretendida ou utilize diretamente um div CSS com background-color.

Testar rapidamente um layout sem ter de fornecer uma imagem real, validar a responsividade de uma grelha alternando vários rácios, alimentar um storybook ou uma preview Figma para HTML. Para marketeers e designers, a ferramenta serve para esboçar wireframes de alta fidelidade sem depender de fotografias com licença.