Gerador de imagens aleatórias para seu site

Um dos maiores aborrecimentos quando você está projetando um novo site é procurar imagens de teste que você sabe que vai mudar novamente.

Em outras palavras, todo o tempo que você gasta é tempo perdido a longo prazo, mas se você não gastar tempo escolhendo boas imagens, o site de teste ficará feio e isso não é nada legal.

Pode parecer um exagero procurar um gerador de imagens aleatório, mas acredite, não é. O oposto.

Eu uso em conjunto com Alfredapp.

Com o Alfred, criei um atalho de teclado para adicionar a url do criador de imagens aleatórias, para que eu não precise lembrar de nada.

Veja se gosto dos geradores de imagens para desenvolvimento web que já falei há 3 anos, especificamente sobre Fotos.

Mas sem mais delongas, vamos ao que interessa.

A ferramenta é chamada lorem.espaço e seu funcionamento é muito simples como você verá a seguir.

Vídeo tutorial

Operação básica do Gerador de Imagens Aleatórias

Tudo o que precisamos fazer é adicionar a url que a ferramenta nos fornece no local onde queremos que uma imagem apareça.

Aqui está um exemplo:

https://api.lorem.space/image/movie?w=150&h=220

Se usarmos a url para fazer uma imagem aparecer, esse seria o resultado

Se olharmos para a url anterior, veremos que ela possui parâmetros diferentes que veremos a seguir

Categoria de imagem

Podemos ver que um filme aparece na imagem anterior e isso ocorre porque a palavra aparece na url filme.

A ferramenta nos permite alterar a categoria da imagem para o seguinte:

• filme
• jogo
• álbum
• livro
• face
• moda
• sapatos
• Assistir
• mobiliário

Portanto, simplesmente trocando a palavra filme por rosto veremos que aparecem imagens de rostos ao invés de filmes:

E assim com cada uma das categorias

Tamanho da imagem

Além das categorias das imagens, também podemos alterar o tamanho das mesmas.

É tão simples quanto alterar o tamanho que aparece no final do URL:

https://api.lorem.space/image/face?w=150&h=220

Se olharmos de perto, aparece:

• ?w=150 –> Refere-se à largura da imagem em pixels
• h=220 –> Refere-se à altura da imagem em pixels.

Se quisermos uma imagem de 450 660 teríamos que colocar:

https://api.lorem.space/image/face?w=450&h=660

E o resultado seria:

Como você pode ver seu funcionamento não poderia ser mais simples.

Espero que funcione para você 😉