Quando estamos prototipando telas, desenvolvendo um site ou sistema, normalmente trabalhamos com imagens. Elas são fundamentais para dar beleza, auxiliar a explicar ideias, notícias, produtos, serviços, deixar a leitura menos cansativa, etc.
Para agilizar, podemos ter uma pasta com uma coleção de imagens para usar em nossos desenvolvimentos, mas isso ocupa espaço em disco, nem sempre contém os tamanhos necessários em uma determinada marcação de espaço de imagem no layout o que acaba obrigando a redimensionar para baixo a imagem (o que é péssimo e um desperdício de performance). Existe também a questão de não termos as imagens certas para o contexto do projeto, e que podem até atrapalhar na validação de uma tela ou apresentação prévia dando uma impressão errada ou criando uma poluição visual.
Para essas e outras questões existe uma ferramenta bem prática chamada Placeholder.com que gera imagens em tempo de carregamento de nossos protótipos e páginas.
Como funciona?
O exemplo mais simples é criar um elemento HTML img e configurar o atributo src com https://via.placeholder.com/ especificando ao final da URL o tamanho da imagem. Por exemplo, se precisamos de uma imagem de 100×100 pixels, podemos simplesmente criar da seguinte maneira:
Também é possível especificar a largura e altura de uma imagem:
A cor da imagem também pode ser especificada passando como parâmetro na URL um código de cor em hexadecimal, muito útil para manter a harmonia do layout:
Uma frase também pode ser inserida na imagem através do parâmetro “text” na URL. Útil para explicar a aplicação da imagem:
É possível também alterar a cor do texto especificando um segundo código de cor em hexadecimal:
É isso. Espero que essa dica de ferramenta leve praticidade, agilidade, padronização e páginas carregando rapidamente durante os desenvolvimentos e apresentações de páginas em um projeto.
Abraço
O post Como gerar imagens dinamicamente durante a fase de desenvolvimento de um site ou sistema web apareceu primeiro em André Keher.
Top comments (0)