Você conhece os Data URIs?

Imagine-se na seguinte situação: você possui um Web Service RESTfull que te retorna uma imagem GIF em JSON. Até aí tudo bem, não fosse o seguinte detalhe: agora você possui um array de bytes contendo todos os bytes da figura, o que é lindo, mas não tem como exibi-la na sua página web, pois a tag IMG só aceita um URI no seu atributo SRC. E agora?

Nos browsers mais recentes (a partir do IE 8), você possui uma nova alternativa: Data URIs. Os Data URIs são URIs que possuem os dados inscritos no próprio URI, isto é, “inline”, em base64. É algo estranho à primeira vista, mas as implicações deste tipo de funcionalidade são muitas. Imagine agora como é fácil salvar uma página em disco contendo todas as figuras da página (sem precisar transformá-la em um MHTML), ou poder servir uma página através de um firewall que filtra todos os tipos de figuras, ou, no já discutido e mais interessante dos cenários, retornar o conteúdo de uma figura via JSON e exibi-la normalmente, podendo até mesmo simular um streaming de vídeo com essa técnica.

Suporte:

  • O IE 8 suporta, mas limita os Data URIs a 32k.
  • O IE 9 removeu essa limitação e suporta 100% (até 4g).
  • Navegadores baseados no engine Gecko (Firefox, SeaMonkey, etc) suportam.
  • Konqueror suporta.
  • Opera limita a 4k.
  • Navegadores baseados no engine WebKit (Safari, Epiphany, Android, etc) suportam.

O IE também possui algumas limitações chatas quanto ao uso deste artifício, como, por exemplo, somente alguns elementos aceitam esse tipo de URI: img, object (somente imagens), classes css, input type=image e link. Eu precisava fazer um streaming de áudio utilizando essa técnica, mas devido a essas limitações do IE, não foi possível.

Mais informações sobre Data URI:

http://en.wikipedia.org/wiki/Data_URI_scheme
http://msdn.microsoft.com/en-us/library/cc848897(v=vs.85).aspx

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s