Data:uri scheme – inserindo imagens sem http request extra

30abr09

Quando falamos de otimização de sites, existem diversas técnicas interessantes que podemos implementar a fim de obter um load time menor e uma redução na quantidade de dados enviados ao end-user.

São diversas técnicas disponíveis, como:

  • Reduzir o número de HTTP Requests
  • GZip para compactação de conteúdo e scripts externos
  • Manter arquivos CSS e JS externos a página
  • Adicionar os CSS antes dos Javascripts (se possível, prefira colocar os JS no rodapé da página)
  • Utilizar um bom controle de Cache

…enfim, existem mais delas aqui no Yahoo! Developers

Quando começamos a falar de CSS e JavaScript, pensamos na prática de combine scripts (ou minify. Não confunda com compact – compactação, a exemplo do que o Packer faz com JavaScript, que em alguns casos traz problemas para os desenvolvedores).

Quando falamos de imagens podemos pensar em cache expire, sprites, compactação de imagem, e… Data URI.

Cada imagem inserida na página é um Http request que o navegador executa até o servidor de hospedagem da imagem, uma forma de evitar estas requisições, é enviar a imagem em formato “texto” dentro do código da página.

Código de inserção de imagem na página:

<img src=”http://www.site.com/imagem.gif&#8221; />

Código utilizando Data:uri

<img src=”data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAA…..CC” />

Da segunda forma, não estamos mais entregando ao navegador um link de uma imagem para ele efetuar um HTTP Request e baixá-la, mas sim, estamos entregando o conteúdo da imagem.

OK, mas e qual o custo disso? Se você possuir um site que opera no limite dos recursos de hardware do seu servidor, esta não é uma prática recomendada, já que o servidor terá um trabalho a mais, que será o de efetuar o encoding de todas a simagens da página visitada pelo usuário.

Como fazer?

echo base64_encode(file_get_contents(‘imagem.gif’))

Essa técnica é cross-browser?
Infelizmente não. O IE8 apresenta suporte, mas as versões anteriores não. Logo, se você não usa nenhum mecanismo de identificar o navegador do usuário antes de apresentar-lhe a interface, não recomendo seu uso por enquanto.
Porém, se você verifica o navegador do usuário e possui a flexibilidade de entregar conteúdos diferentes de acordo com esta variável além de possuir recursos subutilizados no seu servidor, é uma boa maneira de garantir um carregamento mais rápido das suas páginas.



No Responses Yet to “Data:uri scheme – inserindo imagens sem http request extra”

  1. Deixe um comentário

Deixe uma resposta

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 )

Imagem do Twitter

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

Foto do Facebook

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

Foto do Google+

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

Conectando a %s


%d blogueiros gostam disto: