Usar Imagens no Blog sem Hospedá-las na Internet - Reino Kawaii

sábado, 16 de dezembro de 2017

Usar Imagens no Blog sem Hospedá-las na Internet


Quando a gente usa imagens online é preciso que estejam hospedadas em algum site certo? Nem sempre...
Descobri por acidente que é possível usar os dados de uma imagem e fazê-la aparecer normalmente sem ter que gerar um link/endereço.
Isso é bom para testes quando se personaliza ou cria um layout sem ter que enviar nenhuma imagem para sites e copiar seus links, poupando espaço e usando apenas o necessário. Você pode obter esse "link-fake" pelo navegador, mas existe site que faz isso pela gente.
Arraste e solte uma imagem do seu computador para onde está escrito: Drag and Drop...

Clique em uma das opções:

CSS background: te mostra o código pronto para adicionar a um template, dentro de uma class.
HTML Image: código para usar em áreas que aceitam html.
Data-URI: só o código da imagem mesmo.
No html/css, ao invés de:
<img src='link-da-imagem'/> ou background: url('link-da-imagem');
Fica assim:
<img src="data:image/png;base64 e um código longo..."/>
ou se aplicado ao CSS (antes de /b:skin):
background: url('data:image/png;base64 e um código longo') no-repeat;

O laço da imagem acima não foi hospedado em nenhum site, apenas o converti no site que indiquei e testei como ficaria para decorar listas das postagens. O código era assim:
.post ul li {
list-style: none;
margin: 0;
padding: 0;
    background: url('data:image/png;base64...') no-repeat;
}
Como eu disse, é legal fazer isso para testar layouts ou mudanças em templates, ou até para usar em alguma imagem que apareça só uma vez ou poucas vezes pelo blog; caso queiram saber mais, esse artigo do CSS Tricks pode ajudar.

Imagem de abertura do post: Pixabay.com

Um comentário:

  1. https://4.bp.blogspot.com/-ep5F3fGqOKY/UGnpjAPuiKI/AAAAAAAAFeo/K_5DdjuzRIA/s1600/tumblr_lw99pbqLZL1qcfn0j.gif

    ResponderExcluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Google+ - Deviantart