HTML: Imagem embutida
outubro 21, 2008
No HTML é possível embutir imagens diretamente pelo código fonte, assim como o Outlook faz para os anexos (imagens) no corpo do email.
Isso não será uma requisição HTTP para o caminho da imagem e sim seu código binário codificado na base64, quer dizer que você pode inserir o código em qualquer página, sem precisar do arquivo físico da imagem.
Essa pode ser considerada uma técnica de otimização, pois a imagem é carregada diretamente com o código fonte HTML, sem requisições externas.
Mas como nem tudo é perfeito, possui algumas restrições: Alguns desenvolvedores não recomendam a utilização de imagens muito grandes para não afetar o desempenho, apesar de rodar perfeitamente. Outra restrição é não funcionar no Internet Explorer (versões 6, 7 até o momento).
[UPDATE]O Internet Explorer 8 já suporta imagens embutidas[/UPDATE]
“Sintaxe” do código: <img src=”data:[mime-type];base64,[imagem-codificada]”>
É necessário inserir a palavra data, o mime-type da imagem, o tipo de codificação e o código binário da imagem codificado na base64.
Clique aqui e veja o exemplo do código
Caso queira abrir a imagem no Internet Explorer também, a primeira solução que pensei foi forçar o carregamento via JavaScript, isto é, carregar da forma normal (requisitando a URL da imagem). Como já estamos utilizando o atributo SRC, podemos substituir o SRC via JavaScript. O comentário condicional indica que o bloco abaixo só será executado em versões anteriores do Internet Explorer 8.
2 <script type=”text/javascript”>
3 document.getElementById(‘idImagem’).src = ‘pasta/imagem.jpg’;
4 </script>
5 <![endif]–>
Se alguém tiver uma solução melhor para o IE, por favor postar.
outubro 21, 2008 at 3:50 pm
Muito legal. Sabe me dizer onde eu posso encontrar alguma ferramenta que converta para base64?
outubro 21, 2008 at 4:37 pm
Pedro Rogério, valeu.
Você pode utilizar a função file_get_contents() + base64_encode() do php mesmo.
outubro 21, 2008 at 8:03 pm
Valeu. Abraços.
outubro 21, 2008 at 8:05 pm
Legal, dando uma fuçada na net acabei encontrando uma extensão para o Firefox que converte:
https://addons.mozilla.org/pt-BR/firefox/addon/6559
outubro 22, 2008 at 12:29 am
Fala Pedro, bem legal esse plugin
Pode ser útil em alguns casos.
Valeu.
janeiro 28, 2010 at 1:01 pm
Bem bolado o artigo, parabéns.
fevereiro 27, 2011 at 10:43 am
Danilo, tudo certo?
Encontrei uma solução para esse pequeno problema, postei no meu blog, segue o link:
http://francis-g.com.br/blog/diminua-as-requisicoes-http-trabalhando-com-imagens-inline/
Caso tenha encontrado uma solução melhor me avisa.. =)
Abrass
setembro 25, 2011 at 5:20 pm
Uso imagens inline somente em folhas de estilos, pois assim será cacheado normalmente pelo browser.
No css coloco assim:
@import “imagem-inline.css” all
background:#cor url(endereco.jpg);
e no arquivo imagem-inline.css faço assim:
background:#cor url(data:image/jpeg;base64,…) !important;
Assim, todos os navegadores que aceitam o @import, também aceitam o !important e imagens inline (até mesmo o IE 8/9). Caso contrário, terá imagens a partir de url’s mesmo.
Sei que estou fazendo mais uma requisição a mais chamando imagem-inline.css mas como tenho muitas imagens no css, acaba valendo a pena.
setembro 25, 2011 at 5:59 pm
Quiz dizer:
@import url(“imagem-inline.css”) all;