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.

1 <!–[if lt IE 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.

Anúncios

9 Responses to “HTML: Imagem embutida”


  1. Muito legal. Sabe me dizer onde eu posso encontrar alguma ferramenta que converta para base64?

  2. Danilo Akamine Says:

    Pedro Rogério, valeu.
    Você pode utilizar a função file_get_contents() + base64_encode() do php mesmo.


  3. 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

  4. Danilo Akamine Says:

    Fala Pedro, bem legal esse plugin
    Pode ser útil em alguns casos.
    Valeu.

  5. Neto Says:

    Bem bolado o artigo, parabéns.

  6. Francis G. Says:

    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

  7. Lucas Martins Says:

    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.


Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s

%d blogueiros gostam disto: