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
https://4.bp.blogspot.com/-ep5F3fGqOKY/UGnpjAPuiKI/AAAAAAAAFeo/K_5DdjuzRIA/s1600/tumblr_lw99pbqLZL1qcfn0j.gif
ResponderExcluir