HTML5 otimizado mediante CSS/CSS3

Sprites e imagens embebidas usadas com CSS para a otimização de documentos HTML.

Por Jaime Peña Tresancos - Tradução CRV


Publicado em: 18/4/13
Valorize este artigo:

No presente artigo trataremos:

  • A otimização de documentos HTML mediante o uso de sprites
  • A obtenção de sprites
  • A inclusão de sprites mediante CSS
  • A obtenção de sprites –imagens em geral- codificados em Base64
  • A técnica de inclusão de sprites embebidos

O que é um sprite?

Numerosas são as acepções do termo, inicialmente empregado para referir-se a bitmaps independentes do corpo do cenário, que poderiam ser animados sobre ele de forma separada –nos referimos à edição em inglês por ser muito mais ampla e precisa, no nosso entender-. Para uma discussão completa acesse essa edição:
http://en.wikipedia.org/wiki/Sprite_(computer_graphics)
No nosso caso –no que se refere a HTML e CSS- é um conjunto de imagens agrupadas em uma única imagem, se acessa cada uma delas mediante um deslocamento considerando a borda superior esquerda, delimitação (0,0), e suas dimensões absolutas. É, portanto um método de agrupação de imagens que, posteriormente, podem ser tratadas de forma independente.


Sprite utilizado para diversas aplicações e logos de Google


Ilustração de um sprite de uma animação com CSS –por exemplo-

Por que se otimiza o código HTML

Um dos problemas de demora mais importantes no carregamento de documentos a partir da Internet é o tráfego HTTP e as próprias capacidades dos navegadores para gerenciá-lo. O ponto crítico mais importante costuma ser o fracionamento de chamadas, consequentemente, o número de arquivos é determinante.

Se são utilizadas múltiplas imagens, se realizarão outras tantas chamadas ao servidor e uma sobrecarga diretamente proporcional ao acesso à página, ao contrário, se reduzirá substancialmente isto com o uso de sprites, dado que cada um deles –ou um único- baixará múltiplas imagens com uma só chamada –um único arquivo-. Bem é certo que o peso conta, mas em menor quantidade do que pesa o tráfego de chamadas em si, dentro dos limites da moderação e falando proporcionalmente.

Observemos, para citar um caso, as figuras que seguem, as três primeiras figuras de uma suposta barra de ferramentas, se agruparam em uma única em formato sprite, que utilizaremos nos nossos exemplos; agora no carregamento da página economizaremos dois acessos ao servidor ao ter que referenciar uma única imagem.

Geração de sprites

Usualmente disporemos das imagens por separado e desejaremos gerar o sprite correspondente.

Deveremos recorrer a serviços que automatizem a tarefa e as há, felizmente, abundantes e de qualidade que, além de gerar o sprite, nos dão informação de como inserir as imagens, suas delimitações, dimensões e código para utilizá-las na nossa CSS.

Alguns dos lugares de Internet que nos proporcionam essas facilidades são:

Nas figuras anteriores mostramos as visões de dois dos lugares, o segundo deles –instantsprite.com-, que funciona com Firefox, Chrome e Opera , trabalha da seguinte forma:

  • Se começa com uma subida das múltiplas imagens que constituirão o sprite
  • Selecionamos o deslocamneto que haverá entre cada uma delas no sprite
  • O tipo de imagem final –png ou gif-
  • A orientação das imagens no sprite –horizontal ou vertical-
  • Criado o sprite se salva clicando sobre ele com o botão direito do mouse e no menu emergente selecionando a opção de salvar imagem
No caso de se usar Internet Explorer recomendamos CSS Sprites Generator, de funcionalidade muito similar, algo menos versátil. Cria adicionalmente, isso sim, imagens com fundo transparente no formato png.

Exemplo de uso de sprites com CSS

Na figura adjunta se mostra uma coleção de seis figuras –um sprite- que mostra o estado de três botões na forma normal e quando se passa o botão por cima deles –efeito hover-. Não são mais que as três figuras inicialmente mostradas mais outras três que construímos passando-as a vídeo inverso, seu efeito é suficientemente ilustrativo para nosso exemplo. Estão expostas em fila dupla, como uma opção adicional a mais e assim poder ilustrar também como manipular esse tipo de sprites multilinha.

O exemplo base foi tomado de um editor de textos HTML 5, de tipo Rich-Text Editing, uma simples área de edição com o atributo contenteditable, do que já falamos nos nossos artigos anteriores:

As modificações introduzidas se referem à substituição dos velhos botões de comando ali existentes, por um desenho mediante CSS da forma:
  • De fundo de botão utilizamos o sprite, mas delimitando a área visível àquela parte que desejamos seja visível em cada caso.
  • Há seis casos:
    • Os três botões em estado de repouso de negrito, itálico e sublinhado
    • Os três botões quando se passa por cima deles –hover-
  • Dispomos de seis imagens que, medidas desde a borda superior esquerda, deveremos fixar sua posição com deslocamentos de 0, 31px e 61px –por desenho- e as mesmas mas 24px na vertical para as da segunda linha –também pelo próprio desenho da imagem do sprite-
  • Note que a primeira imagem e sua correspondente quando se passa o mouse sobre ela terão umas cotas (0, 0) e (0, -24)
  • Para a segunda (-31, 0) e (-31, -24)
  • Para a terceira (-61, 0) e (-61 -24)
  • Sua altura, em todos os casos é 24px –heigth-
  • Observem os valores negativos das cotas
  • Observe o posicionamento left e width de cada botão, acorde com sua posição e a largura que ocuparão (coincidente com a largura da imagem dentro do sprite)
Listagem 1:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Sprite-1</title>

<style>
#opcoes {
position: relative;
}
#opcoes li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}
#opcoes li, #opcoes a {
height: 24px;
display: block;
}

#negrito {
left: 0px;
width: 31px;
background: url('sprite-1.png') 0 0;
}
#negrito a:hover {
background: url('sprite-1.png') 0 -24px;
}

#italico {
left: 31px;
width: 30px;
background: url('sprite-1.png') -31px 0;
}
#italico a:hover {
background: url('sprite-1.png') -31px -24px;
}

#sublinhado {
left: 61px;
width: 30px;
background: url('sprite-1.png') -61px 0;
}
#sublinhado a:hover {
background: url('sprite-1.png') -61px -24px;
}

#textBox {
position: absolute;
top: 40px;
width: 600px;
height: 300px;
border: 2px #000000 solid;
padding: 10px;
overflow: scroll;
background-color: yellow;
}
</style>
</head>

<body>

<ul id="opcoes">
<li id="negrito"><a href="#" onclick="document.execCommand('bold',false,'');"></a></li>
<li id="italico"><a href="#" onclick="document.execCommand('italic',false,'');"></a></li>
<li id="sublinhado"><a href="#" onclick="document.execCommand('underline',false,'');"></a></li>
</ul>

<section id="textBox" contenteditable="true">
<h1 style="color: red">Título</h1>
<p>Escrever aqui...</p>
</section>
</body>
</html>

A listagem a seguir é uma simplificação da anterior, na que agrupamos alguns estilos, com a finalidade de tornar mais eficiente o HTML resultante e, consequentemente, o carregamento e o redesenho mais eficiente. Foi colocado aqui e o fizemos dessa maneira como mera ilustração de uma melhoria no desenho e prestações à custa, se for o caso, de uma menor legibilidade. Tudo ficará a critério do programador. Insistimos em que ambos são estruturalmente idênticos.

Listagem 2:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Sprite-1</title>

<style>
#opcoes {
position: relative;
}
#opcoes li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}
#opcoes li, #opcoes a {
height: 24px;
display: block;
}

#negrito, #italico, #sublinhado, #negrito a:hover, #italico a:hover, #sublinhado a:hover {
background: url('sprite-1.png');
}

#negrito {
left: 0px;
width: 31px;
background-position: 0 0;
}
#negrito a:hover {
background-position: 0 -24px;
}

#italico {
left: 31px;
width: 30px;
background-position: -31px 0;
}
#italico a:hover {
background-position: -31px -24px;
}

#sublinhado {
left: 61px;
width: 30px;
background-position: -61px 0;
}
#sublinhado a:hover {
background-position: -61px -24px;
}

#textBox {
position: absolute;
top: 40px;
width: 600px;
height: 300px;
border: 2px #000000 solid;
padding: 10px;
overflow: scroll;
background-color: yellow;
}
</style>
</head>

<body>

<ul id="opcoes">
<li id="negrito"><a href="#" onclick="document.execCommand('bold',false,'');"></a></li>
<li id="italico"><a href="#" onclick="document.execCommand('italic',false,'');"></a></li>
<li id="sublinhado"><a href="#" onclick="document.execCommand('underline',false,'');"></a></li>
</ul>

<section id="textBox" contenteditable="true">
<h1 style="color: red">Título</h1>
<p>Escrever aqui...</p>
</section>
</body>
</html>

Trabalho con imagens embebidas

Queremos dizer com isso inserir diretamente os bytes da imagem no arquivo que contém o documento HTML –ou no caso no arquivo CSS-. A grande vantagem obtida é novamente a economia de trânsito na rede, dado que não se terá que obter a ou as imagens de arquivos externos. É um passo mais além na linha que iniciamos com o uso dos sprites. Para obter o código das imagens no formato padrão para serem embebidas –normalmente se usará o Base64-, acorreremos a serviços disponíveis na Internet, como por exemplo as Web Coder Tools:
http://webcodertools.com/imagetobase64converter

O modo de trabalho é bem simples:

  • Deveremos ir a Image to Base64 converter
  • Uma vez ali, carregaremos nossa imagem a ser convertida
  • A imagem será automaticamente convertida e nos proporcionarão dois modos de inseri-la
    • Como imagen em um documento HTML
    • Como imagen de fundo em um documento CSS
  • Bastará copiar e colar o ou os códigos das áreas correspondentes em nossos documentos
Para nos referirmos a uma imagem de fundo em um estilo para nosso exemplo concreto, a sintaxe a empregar é:
background: url(data:image/png;base64, …)

Nenhuma das opções que nos dão por padrão.

O exemplo que segue é exatamente o mesmo que o anterior, mas prescindindo da imagem externa e incluindo-a como imagem embebida no documento HTML. Observe, sobretudo, o indicado de como referenciar a imagem embebida e como o resto do código permanecerá invariante.

Naturalmente, todo o sistema de delimitações dos sprites tem de ser realizado previamente sobre a imagem real e o modo de trabalhar com imagens embebidas será habitualmente um último passo do processo de nossos desenvolvimentos padrão com as imagens reais. É visto de alguma maneira, uma etapa final de otimização de código.

Listagem 3:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Sprite-1</title>

<style>
#opcoes {
position: relative;
}
#opcoes li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}
#opcoes li, #opcoes a {
height: 24px;
display: block;
}

#negrito, #italico, #sublinhado, #negrito a:hover, #italico a:hover, #sublinhado a:hover {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFsAAAAwCAMAAABJ2/YyAAADAFBMVEX9/f33+fj09fTv8fDv7/Hu8O/r7Ovn6ejm5ujm6Ofj4+Tf4OHe3+Ha2tzX19nU1NXMzMzDw8PBwb+8vLy2uLezs7Oqq6qkpKSenqCbm5yUlJSRkI6Li4uGhoiJiYeGiIeCgoJ/gYCBf4B/f4GAgH5+gH+Af359fX15d3h2d3l0dHRucG9rbGtoaGZjY2NcXFxXWVhVVVVMTExDQ0I8PDwzMzMqKiopJygoKCYlJSMhIR8gHx0dHBsZFxgZGBYYFx YUExMRDxAPDhESEQ8QDg8LCgsHCQgJBwgGBggIBgcCAgIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAn8j/UAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAFjklEQVRYhZVXgW7iOBBNxCJvZSlGcIElp+ZkQJU3CisI4GKscso2qtL//6GbsRPb lDarmyTO+L2ZNxMrIiaKBedw2kEIvkJHGHBlCWcmgtt4m2LHlWO5z4DASERfWhwNsUDnA2wErLAioWBgQ9p/YouID/L/DLL8QycfWVP7y5D/2ffNAvCB2oh/ tqKx0xh+Zj7cWXyvHQfevXbYp/B8nFeHfbYt53EQdlOZzkWRp71AHPQdL4+HjEUTvs3Cvrkv9etYsnS/XfiHvtWOSVFOKe25OGS3x4SSaFokjkZt/zg7uaO0qjLixYNsQNiuYCT2wFPnALQ9MXRLL9313T3kTu1ZejzMqYk2tgq042hRLWmnBVds34PYDLsTRahwvNV2tlcSzoxB7R7yLAFsd5zSODARxyYUKclQswz 4QDsC7WqaK7UEn9xpg7FTxcK5Z0m0Vwyqs+3n2gS09yw+KPVA7rORz3RODTX6wBJ8ZhbReNppmwB4B0fjeAwXId/2uqJkr3RCSEw AicmIj0fWcFapGaaORu PxGIDRaDM2OKrnmoOzzUwAJMMEfgcJGROCUqQCbXrSB3gXEMGRE28TZIyNx/Ym7BTiYlrow+4kKHXh2Dd5AAcuulZa7U6ynFmejgk NtfNKH4VPRTMshYOkaZo VYrlYpJ41fROoRin9TinD8wEmDwjBnVPyYA0jGPbdzWH6wCmOWK811sAFOtYojzbUKBN7S/AemPDz77cMzn8GGLYFFgTAe9IzNPFw0vm JoF8ZRoh7KFB5ijjUYgZi NDElEoY8A33GHlmYyhKfCVksZyyB9AQnyU1TlE6oiH6iLMoYXVsHp4kJA7YzzMZIZzATjNo2 bBbUSUyAqQjajxMUskWtblccyySrxHdNXaClE8qZVeweyi8JjhMefXtc9998GGE7sFojsDZHYLChWK8ezX7BXmsA+i3D2qJr0WXb+Kj BXYYQwu1KBO98sbGENXCfDN rtX/qwfjSx3GeAG4l2yIbYZpBtW9hDdO/855YPZvNBNv9D38UgKwa6Atb0/XXIcGd3bKjTwO/J21Dtz/punIYYrCz+sN732k3g3WuHSjxaO7hIZ/Nyme1D/ilM1Hu eF1XjBRzbbKezUrYnsSzDvoPai2kmq/ly9+br36xoU+fZUdZBZ95dTpWu22Mua1cZ19trs4VS6V9l7Vc0yAZELsJcv94AZROJXq Y9HfbdLOhcVtPpXrdN8yEb6abdpVsFnutGOOm3xURBQJMj/+60m/YNl7BpmjllczopsbUOaTeNMwhbTI+6fXvHyijUCuOZY8EkYp nC0YagdvNuc9s5TY8lpVtwa0QAF00gLiepDObN+8pzcyqhhFzqLhHMaFuroe+5bGaUXuuO/t2I34FWSQsVatvKb8YF7fbf38cfz55dR U8gao66hr41DPS5rt9ri4m6rwyzlB50NzHxzaq2PowFxQValrqjIRu+l7U1QFKaKj2hM9C+duhT7e1EZ7K+Me5S4fWk s8WEax2w0dMVp9fXV41f/B8T9vdBX68Gql9exIsLLVI63ahA+VqvIO5Vv+r6WlXVNufb3a4y1IvVhtpXqAZv/lUpeYHzCgAcUFNrAXdr9UWr8xmCnemr0GA19 hb1f4NirV+MQW600eoCIvX1glqq1r1dNFTgfl53YE+Ddn5FDzJBQ0JnZymVi1DwnkA/6nLG66LQVQjgAMeZX1Rv kG8YP9dcA3TpMwzmaQ3fNKglEYfK8oyoPONN4iF/Sh997hhryBZSQq9IqJ5x8SfFoxzKIisRNYF4yk4mhyRrWPi MoQ5Q6lH2etidfEYRpMziKOy700XBrrB87hsXrg8DSf8YEhDMPZ+7NMvJ7hGhcRHV7uPfbQA2m40 Dboy7XUO/SeBmo+H2DwYw2Zb+D7GrXPoWJtj2AAAAAElFTkSuQmCC);
}

#negrito {
left: 0px;
width: 31px;
background-position: 0 0;
}
#negrito a:hover {
background-position: 0 -24px;
}

#italico {
left: 31px;
width: 30px;
background-position: -31px 0;
}
#italico a:hover {
background-position: -31px -24px;
}

#sublinhado {
left: 61px;
width: 30px;
background-position: -61px 0;
}
#sublinhado a:hover {
background-position: -61px -24px;
}

#textBox {
position: absolute;
top: 40px;
width: 600px;
height: 300px;
border: 2px #000000 solid;
padding: 10px;
overflow: scroll;
background-color: yellow;
}
</style>
</head>

<body>

<ul id="opções">
<li id="negrito"><a href="#" onclick="document.execCommand('bold',false,'');"></a></li>
<li id="italico"><a href="#" onclick="document.execCommand('italic',false,'');"></a></li>
<li id="sublinhado"><a href="#" onclick="document.execCommand('underline',false,'');"></a></li>
</ul>

<section id="textBox" contenteditable="true">
<h1 style="color: red">Título</h1>
<p>Escrever aqui...</p>
</section>
</body>
</html>






Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato