Data URI Scheme

Olá pessoal!

Todos aqui desejam um fórum otimizado, que seja rápido e sem erros de Request Limit, pois saibam que existem diversas técnicas e práticas de para se obter um load time menor e redução nas requisições.

Existem diversas técnicas disponíveis, entre elas:

1- Redução no número de requisições HTTP, evitando o famigerado Request Limit!;
2- Utilização de GZip para compactação HTML e scripts externos, eu acho que a Forumeiros usa...;
3- Utilizar arquivos JS e CSS externos à página, hospedados em outro servidor;
4- Adicionar o código CSS antes do JavaScript, este último deve ser colocado preferencialmente no final da página;
5- Utilizar um bom controle de Cache!

A tática abordada aqui será a utilização de imagens no formato texto, isso mesmo texto, nada de ficar descarregando as imagens uma a uma ou no máximo duas a cada requisição e por fim uma requisição para cada imagem descarregada! Chega disso!

Mas o que seria isso? Simples, as imagens são "traduzidas" do formato binário para texto utilizando-se uma técnica de compressão chamada Base64! O padrão é definido no seguinte formato:

Código:

data:[<MIME-type>][;charset=<encoding>][;base64],<data>

Desta forma teremos as imagens embutidas na página e não serão descarregadas individualmente!

Isto aumenta o tamanho do HTML, por isso é recomendado utilizar no CSS que além de ficar no cache, reduz o número de requisições HTTP e evita que o HTML fique "gordo"! Esta técnica é suportada pelos principais navegadores.
Reduzindo o número de requisições HTTP em sua página já um bom começo.

Lembre-se: Cada imagem inserida na página é um Http request que o navegador executa para o servidor que hospeda a imagem, onde a forma de evitar estas requisições extras é utilizar a imagem em formato “texto” dentro CSS.

A forma de carregar esta imagem em HTML é:

Código:

<img src="http://upload.wikimedia.org/wikipedia/commons/3/31/Red-dot-5px.png" />

Utilizando-se a técnica de Data URI:

Código:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO 9TXL0Y4OHwAAAABJRU5ErkJggg=="/>

Interessante não é? Percebam que não estamos mais entregando ao navegador o link da imagem para ele efetuar um HTTP Request e baixá-la, mas sim, o conteúdo da imagem na íntegra: Sem download extra = maior velocidade!

Mas quando usar este formato?

Quando não se pode utilizar imagens no formato sprite, é o caso de Skins onde temos diversas imagens que são utilizadas para compor a estrutura e cada imagem é uma requisição HTTP!

Apesar de que a utilização de data URIs são uma excelente forma de reduzir HTTP requests, não faz o menor sentido utilizar em toda situação! Como as imagens são integradas na página no formato texto, acabam por deixar a folha de estilos cheia, por isso devemos utilizar somente em pequenas imagens.

Como utilizar Data URIs?

Embutir imagens neste formato é relativamente simples e fácil. Primeiro você precisará de um "tradutor" que irá gerar a string baseada no binário da imagem, para isso eu utilizo um dos melhores e mais fáceis e com as principais opções que precisamos: http://duri.me/ -> Basta arrastar e soltar a imagem desejada e clicar em [Generate Base-64 Code], depois escolha como deseja utilizar o formato, simples assim!

Uma vez que tenha feito e escolhido o formato, basta adicionar no HTML ou no CSS, de acordo com o formato claro!
Esta imagem no formato CSS ficaria assim:

Código:


{
width: 5px;
height: 5px;
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==)
}


Nota: Nosso fórum está utilizando esta técnica, deixem-nos um feedback de como a página está!

Continua...

JS

Top!!! Parabéns cara!

Bom, nunca tive problemas em meu fórum com isso. Mas é sempre bom ficar sabendo!