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>
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" />
- Código:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO 9TXL0Y4OHwAAAABJRU5ErkJggg=="/>
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==)
}
Continua...
JS