Wtricks • Tutoriais e Dicas do Mundo Digital

Placekitten: o mais útil e fofo placeholder de imagens da internet

Por Carlos Sabo Cantanzaro • 22/08 - 00:43 am | Em Front-end

Neste artigo você vai ver alguns dos placeholders de imagens mais úteis, divertidos e inusitados disponíveis na internet!

Geralmente quando estamos criando uma página e não sabemos ao certo quais são as imagens ou textos, que vamos colocar no layout, a melhor opção é usar “placeholders”, que neste contexto, funcionam como um guia visual, indicando o tipo de conteúdo que deve ser colocado naquele exato local.

Com toda certeza, você já deve ter lido um “lorem ipsum” por ai, no lugar de onde deveria estar um texto ou uma frase. O conceito para os placeholder de imagens é exatamente o mesmo: substituir ou ilustrar um conteúdo que você ainda não tem em mãos, para não deixar o layout em branco.

A questão é: Já que temos que preencher o nosso layout com informação que ainda não temos em mãos, porque não fazer isso de uma forma mais divertida?

É exatamente essa a proposta do placekitten, fornecer um banco de imagens mais “fofo” e divertido para você usar nos seus layouts. Não acredita? é só olhar a imagem abaixo:

Não da para negar que é fofo!

Como usar o Placekitten

Usar o Placekitten é extremamente simples! Primeiro você precisa acessar o site, depois é só você copiar uma das duas URLs disponíveis: http://placekitten.com/200/300 para gatinhos fofos coloridos ou http://placekitten.com/g/200/300 para gatinhos fofos em preto e branco.

Depois de copiar a URL escolhida é só colar dentro do atributo src da tag <img> desse jeito: <img src="http://placekitten.com/g/200/300" alt="Não esquece de preencher o alt!!!">. E pronto, os gatinhos vão aparecer na sua tela como mágica!

Ajustar o tamanho das imagens

Além de gerar imagens aleatórias, você também pode escolher qual o tamanho da imagem que você vai colocar na tela, basta personalizar o link que copiamos no passo anterior.

No final da url você vai encontrar dois valores numéricos separados por uma barra. No nosso link do exemplo anterior, os valores são 200/300, nessa ordem: 200 é a largura e 300 a altura da imagem. Dessa forma, para alterar as dimensões da imagem é só alterar os valores do link conforme sua preferência.

Indo além de gatinhos!

Nem só de gatos vive a internet! Quando o assunto é placeholders você tem diversas opções disponíveis, tanto mais sérias para trabalhos mais formais, como outras divertidas ou inusitadas!

Placeholders mais profissionais

Se você está procurando por opções de placeholder mais profissionais, os sites abaixo são os mais indicados. O funcionamento é o mesmo, porém as imagens que o link puxa são mais formais, ou até mesmo, totalmente neutras, como é o caso do site Placeholder, que inclusive é o “original”, pois todos os outros sistemas são derivados dele.

1) Placeholder

2) Picsum

3) Placeimg

Outros placeholders mais divertidos

Se você você tem algo contra gatinhos (sério, você tem?), existem outras opções divertidas, como o Place Bear ou o Bacon Mockup, que é o meu favorito da lista!

1) Place Bear

2) Bacon Mockup

E ai, o que achou da lista? Tem algum placeholder que você usa e não está na lista? Compartilha com a gente nos comentários!

PARTICIPE DA DISCUSSÃO