SPRITES PARA HTML

Tutorial bsico sobre CSS Sprite

PABLO

JUE VE S 1 7 D E SE P TIE M B RE D E 2 0 09 A LAS 4 : 0 0

La primera vez en mi vida que escuche hablar sobre las CSS Sprite fue hace casi 5 aos cuando Dave Shea escribi un interesante articulo en Alistapart, desde ese momento siempre quise hacer una serie de simples pruebas para publicar en este blog mostrando las ventajas de utilizar esta practica, adems de mostrar lo sencillo que es aplicarla.

Que son los CSS Sprites?

Simplemente se trata de una antigua tcnica que al comienzo fue utilizada por los desarrolladores de videojuegos, y que principalmente consiste en utilizar una sola imagen compuesta por varias y que haciendo uso de las propiedades background-position de CSS se visualice cada imagen de forma individual. No se entiendo muy bien? No hay problema, vamos con una empresa que seguramente conoces y que los utiliza desde hace mucho tiempo, Google. Si realizas cualquier bsqueda en Google veras que se muestran varias imgenes, por ejemplo en la paginacin de resultados, lo que muchos no se dan cuenta es que detrs de todas estas imgenes se encuentra SOLO UN ARCHIVO y no un archivo por imagen.

Esto acelera significativamente la descarga, y todos sabemos lo rpido que es Google En la imagen remarco al menos dos imgenes para que vean donde se ubican en el archivo.

Y las ventajas?
La utilizacin de la tcnica de los CSS Sprites tiene principalmente dos ventajas: por un lado tendremos ms velocidad en la descarga y renderizado de nuestro sitio web por parte de los navegadores y por otro lado tendremos una significativa reduccin de consumo de recursos del servidor. Dos claras ventajas y que son mas que suficientes para que amerite aprender un poquito mas sobre esta tcnica.

Me convenciste, Como empezamos?

Empecemos con un ejemplo practico. Al final de este articulo podrn ver una lista de enlaces para enviar este post a los distintos sitios sociales, antes de hacer este articulo estaba cargando una imagen distinta por cada enlace, de la siguiente forma.

Y el cdigo HTML que no cambiara en ninguno de los dos casos y que se poda hacer con listas [HTML] Twitter Facebook Delicious Mename Stumbleupon [/HTML] Utilizando Firebug a continuacin muestro lo que ocurra y como se desempeaba ese cdigo al ser descargado en el navegador.

Como podrn ver en los resultados cada imagen realiza una nueva peticin al servidor, por lo que mostrar ese bloque de enlaces termina siendo un pedido de ni ms ni menos que 5 solicitudes al server.

Ahora utilizando la tcnica de los CSS Sprites

Lo primero que necesitamos es generar un nico archivo que contenga las 5 imgenes, en este caso los iconos sociales, y aunque lo podemos hacer de forma manual yo para estos casos lo que recomiendo es utilizar el sitio csssprites que por un lado nos pide que subamos las imgenes y por otro lado nos genera la imagen resultado junto con el cdigo CSS necesario para mostrarlas de forma individual. En mi caso el archivo que me genero es el siguiente.

En mi caso eleg PNG pero el sitio adems de esta extensin tambin nos permite descargar el archivo en formato GIF. En la imagen se puede ver que todas las imgenes quedan con cierto orden, esto esta diseado principalmente para que luego su posicionamiento con la propiedad background-position sea mas simple. Ahora solo falta colocar el nuevo CSS, el cdigo HTML es idntico y no tiene absolutamente ninguna diferencia con el anterior que no utilizaba los sprites.

[CSS] #social a, #social a:hover { padding: 2px 2px 2px 25px; margin-left:15px; background: #fff url(images/sprite-social.png) no-repeat} .twitter {background-position: -9px -153px !important;} .facebook {background-position: -9px -45px !important;} .meneame {background-position: -9px -81px !important;} .delicious {background-position: -9px -9px !important;} .stumbleupon {background-position: -9px -117px !important;} [/CSS] En el cdigo CSS esta todo el asunto, al utilizar una sola imagen lo nico que tenemos que hacer es ir jugando con la posicin de fondo para mostrar cada imagen de forma individual. Es bastante fcil de aplicar, quizs comprenderlo lleva un poquito de mas tiempo al principio pero cuando lo hagan la primera vez entendern de inmediato como funciona. Ahora lo mejor los resultados de Firebug con la versin que utiliza los sprites.

Una sola peticin al servidor y menos de la mitad del tiempo. Vale la pena utilizar esta tcnica Obviamente en mi caso solo hice esto con solo una parte del diseo del blog, pero se puede hacer algo mucho mas avanzado, hay casos como el de Google que todo el esquema de un sitio puede estar prcticamente en una sola imagen. Las posibilidades son casi infinitas, me gusto mucho por ejemplo los botones con rollover que hizo Manz.

SPRITES 2

Qu son los sprites CSS y cmo ayudan a optimizar la descarga de una pgina web. Vemos un ejemplo sencillo de sprite CSS.
Por Miguel Angel Alvarez

En el presente artculo trataremos:

La optimizacin de documentos HTML mediante el uso de sprites La obtencin de sprites La inclusin de sprites mediante CSS La obtencin de sprites imgenes en general- codificados en Base64 La tcnica de inclusin de sprites embebidos

Qu es un sprite?
Numerosas son las acepciones del trmino, inicialmente empleado para referirse a bitmaps independientes del cuerpo del escenario, que podran ser animados sobre l de forma separada nos referimos a la edicin en ingls por ser mucho ms amplia y precisa, a nuestro entender-. Para una discusin completa acdase all: http://en.wikipedia.org/wiki/Sprite_(computer_graphics) En nuestro caso en lo que se refiere a HTML y CSS- es un conjunto de imgenes agrupadas en una nica imagen, a cada una de ellas se accede mediante un desplazamiento respecto del borde superior izquierdo, cota (0,0), y sus dimensiones absolutas. Es, por tanto un mtodo de agrupacin de imgenes que, posteriormente, pueden ser tratadas de forma independiente.

Sprite utilizado para diversas aplicaciones y logos de Google

Ilustracin de un sprite de una animacin con CSS por ejemplo-

Por qu se optimiza el cdigo HTML

Uno de los problemas de retardo ms importantes en la carga de documentos desde Internet es el trfico HTTP y las propias capacidades de los navegadores para gestionarlo. El punto crtico ms importante suele ser el fraccionamiento de llamadas, consecuentemente, el nmero de archivos es determinante. Si se utilizan mltiples imgenes, se realizarn otras tantas llamadas al servidor y una sobrecarga directamente proporcional al acceso a la pgina, por el contrario, se reducir sustancialmente esto con el uso de sprites, dado que cada uno de ellos o uno nico- descargar mltiples imgenes con una sola llamada un nico archivo-. Bien es cierto que el peso cuenta, pero en menor cantidad de lo que pesa el trfico de llamadas en s, dentro de los lmites de la moderacin y hablando proporcionalmente. Fijmonos, por poner un caso, en las figuras que siguen, las tres primeras figuras de una supuesta barra de herramientas, se han agrupado en una nica en formato sprite, que utilizaremos en nuestros ejemplos; ahora en la carga de la pgina ahorraremos dos accesos al servidor al tener que referenciar una nica imagen.

Generacin de sprites
Usualmente dispondremos de las imgenes por separado y desearemos generar el sprite correspondiente. Deberemos acudir a utilidades que automaticen la tarea y las hay, afortunadamente, abundantes y de calidad que, adems de generar el sprite, nos dan informacin de cmo insertar las imgenes, sus cotas, dimensiones y cdigo para utilizarlas en nuestra CSS. Algunos de los lugares de Internet que nos proporcionan esas facilidades son:

http://csssprites.com/ http://instantsprite.com/ http://es.spritegen.website-performance.org/

En las figuras anteriores mostramos las vistas de dos de los lugares, el segundo de ellos instantsprite.com-, que funciona con Firefox, Chrome y Opera , trabaja de la siguiente forma:

Se comienza con una subida de las mltiples imgenes que constituirn el sprite Seleccionamos el desplazamiento que habr entre cada una de ellas en el sprite El tipo de imagen final png o gifLa orientacin de las imgenes en el sprite horizontal o verticalCreado el sprite se guarda haciendo clic sobre l con el botn derecho del ratn y en el men emergente seleccionando la opcin de guardar imagen

Caso de usarse Internet Explorer recomendamos CSS Sprites Generator, de funcionalidad muy similar, algo menos verstil. Crea adicionalmente, eso s, imgenes con fondo transparente en formato png.

Ejemplo de uso de sprites con CSS

En la figura adjunta se muestra una coleccin de seis figuras un sprite- que muestra el estado de tres botones en forma normal y cuando se pasa el botn por encima de ellos efecto hover-. No son ms que las tres figuras inicialmente mostradas ms otras tres que hemos construido pasndolas a vdeo inverso, su efecto es suficientemente ilustrativo para nuestro ejemplo. Las hemos expuesto en doble fila, como una opcin adicional ms y as poder ilustrar tambin cmo manejar ese tipo de sprites multilnea.

El ejemplo base lo hemos tomado de un editor de textos HTML 5, de tipo Rich-Text Editing, una simple rea de edicin con el atributo contenteditable, del que hemos hablado ya en nuestros anteriores artculos:

http://www.desarrolloweb.com/articulos/html5-rich-text-editing.html http://www.desarrolloweb.com/articulos/html5-rich-text-editing-II.html

Las modificaciones introducidas se refieren a la sustitucin de los viejos botones de comando all existentes, por un diseo mediante CSS de la forma:

De fondo de botn utilizamos el sprite, pero acotando el rea visible a aquel la parte que deseamos sea visible en cada caso. Hay seis casos:

o o

Los tres botones en estado de reposo de negrilla, itlica y subrayado Los tres botones cuando se pasa por encima de ellos hover-

Disponemos de seis imgenes que, medidas desde el borde superior izquierdo, deberemos fijar su posicin con unos desplazamientos de 0, 31px y 61px por diseo- y las mismas pero 24px en vertical para las de la segunda lnea tambin por el propio diseo de la imagen del sprite-

Ntese que la primera imagen y su correspondiente cuando se pasa sobre ella el ratn tendrn unas cotas (0, 0) y (0, -24) Para la segunda (-31, 0) y (-31, -24) Para la tercera (-61, 0) y (-61 -24) Su alto, en todos los casos es 24px heigthObsrvense lo valores negativos de las cotas

Obsrvese el posicionamiento left y width de cada botn, acorde a a su posicin y el ancho que ocuparn (coincidente con el ancho de la imagen dentro del sprite)

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

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

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

#italica {

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

#subrayado { left: 61px; width: 30px; background: url('sprite-1.png') -61px 0; } #subrayado 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="opciones"> <li id="negrilla"><a href="#" onclick="document.execCommand('bold',false,'');"></a></li> <li id="italica"><a href="#" onclick="document.execCommand('italic',false,'');"></a></li> <li id="subrayado"><a href="#"

onclick="document.execCommand('underline',false,'');"></a></li> </ul>

<section id="textBox" contenteditable="true"> <h1 style="color: red">Ttulo</h1> <p>Escribir aqu...</p> </section> </body> </html>

El listado que sigue es una simplificacin del anterior, en el que hemos agrupado algunos estilos, con la finalidad de hacer ms eficiente el HTML resultante y, por ende, la carga y el redibujado ms eficiente. Lo ponemos aqu y lo hemos hecho as como mera ilustracin de una mejora en el diseo y prestaciones a costa, si acaso de una menor legibilidad. Todo ser a criterio del programador. Insistimos en que ambos son estructuralmente idnticos. Listado 2:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Sprite-1</title>

<style> #opciones { position: relative; } #opciones li { margin: 0; padding: 0;

list-style: none; position: absolute; top: 0; } #opciones li, #opciones a { height: 24px; display: block; }

#negrilla, #italica, #subrayado, #negrilla a:hover, #italica a:hover, #subrayado a:hover { background: url('sprite-1.png'); }

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

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

#subrayado { left: 61px; width: 30px; background-position: -61px 0; }

#subrayado 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="opciones"> <li id="negrilla"><a href="#" onclick="document.execCommand('bold',false,'');"></a></li> <li id="italica"><a href="#" onclick="document.execCommand('italic',false,'');"></a></li> <li id="subrayado"><a href="#" onclick="document.execCommand('underline',false,'');"></a></li> </ul>

<section id="textBox" contenteditable="true"> <h1 style="color: red">Ttulo</h1> <p>Escribir aqu...</p> </section> </body> </html>

Trabajo con imgenes embebidas

Queremos decir con ello el insertar directamente los bytes de la imagen en el archivo que contiene el documento HTML o en su caso en el archivo CSS-. La gran ventaja obtenida es nuevamente el ahorro de trnsito en la red, dado que no habr que obtener la o las imgenes de archivos externos. Es un paso ms all en la lnea que hemos iniciado con el uso de los sprites.

http://sveinbjorn.org/news/2005-11-28-02-39-23/Embedded-image-data-in-HTMLdocuments.html

Para obtener el cdigo de las imgenes en el formato estndar para ser embebidas normalmente se usar el Base64-, acudiremos a utilidades disponibles en Internet, como por ejemplo las Web Coder Tools: http://webcodertools.com/imagetobase64converter

El modo de trabajo es del todo simple:

Deberemos ir a Image to Base64 converter Una vez all, cargaremos nuestra imagen a convertir

La imagen ser automticamente convertida y se nos proporcionarn dos modos de insertarla

o o

Cmo imagen en un documento HTML Cmo imagen de fondo en un documento CSS

Bastar copiar y pegar l o los cdigos de las reas correspondientes en nuestros documentos

Para referirnos a una imagen de fondo en un estilo para nuestro ejemplo concreto, la sintaxis a emplear es: background: url(data:image/png;base64, ) Ninguna de las opciones que se nos dan por defecto. El ejemplo que sigue es exactamente el mismo que el anterior, pero prescindiendo de la imagen externa e incluyndola como imagen embebida en el documento HTML. Obsrvese, sobre todo, lo indicado de cmo referenciar la imagen embebida y cmo el resto del cdigo permanecer invariante. Naturalmente, todo el sistema de acotaciones de los sprites ha de ser realizado previamente sobre la imagen real y el modo de trabajar con imgenes embebidas ser habitualmente un ltimo paso del proceso de nuestros desarrollos estndar con las imgenes reales. Es visto de alguna manera, una etapa final de optimizacin de cdigo. Listado 3:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Sprite-1</title>

<style> #opciones { position: relative; } #opciones li { margin: 0; padding: 0;

list-style: none; position: absolute; top: 0; } #opciones li, #opciones a { height: 24px; display: block; }

#negrilla, #italica, #subrayado, #negrilla a:hover, #italica a:hover, #subrayado a:hover { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFsAAAAwCAMAAABJ2/YyAAADAFBMVEX9/f33+fj09f Tv8fDv7/Hu8O/r7Ovn6ejm5ujm6Ofj4+Tf4OHe3+Ha2tzX19nU1NXMzMzDw8PBwb+8vLy2uLezs7Oqq6qkpKSenqCbm5 yUlJSRkI6Li4uGhoiJiYeGiIeCgoJ/gYCBf4B/f4GAgH5+gH+Af359fX15d3h2d3l0dHRucG9rbGtoaGZjY2NcXFxXWV hVVVVMTExDQ0I8PDwzMzMqKiopJygoKCYlJSMhIR8gHx0dHBsZFxgZGBYYFx YUExMRDxAPDhESEQ8QDg8LCgsHCQgJBwgGBggIBgcCAgIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAn8j/UAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAFjklEQVRYhZVXgW7iOBBNxCJvZSlGcIElp+ZkQJ U3CisI4GKscso2qtL//6GbsRPb lDarmyTO+L2ZNxMrIiaKBedw2kEIvkJHGHBlCWcmgtt4m2LHlWO5z4DASERfWhwNsUDnA2wErLAioWBgQ9p/YouID/L/ DLL8QycfWVP7y5D/2ffNAvCB2oh/ tqKx0xh+Zj7cWXyvHQfevXbYp/B8nFeHfbYt53EQdlOZzkWRp71AHPQdL4+HjEUTvs3Cvrkv9etYsnS/XfiHvtWOSVFO Ke25OGS3x4SSaFokjkZt/zg7uaO0qjLixYNsQNiuYCT2wFPnALQ9MXRLL9313T3kTu1ZejzMqYk2tgq042hRLWmnBVds 34PYDLsTRahwvNV2tlcSzoxB7R7yLAFsd5zSODARxyYUKclQswz

4QDsC7WqaK7UEn9xpg7FTxcK5Z0m0Vwyqs+3n2gS09yw+KPVA7rORz3RODTX6wBJ8ZhbReNppmwB4B0fjeAwXId/2uqJ kr3RCSEw AicmIj0fWcFapGaaORu PxGIDRaDM2OKrnmoOzzUwAJMMEfgcJGROCUqQCbXrSB3gXEMGRE28TZIyNx/Ym7BTiYlrow+4kKHXh2Dd5AAcuulZa7U 6ynFmejgk NtfNKH4VPRTMshYOkaZo VYrlYpJ41fROoRin9TinD8wEmDwjBnVPyYA0jGPbdzWH6wCmOWK811sAFOtYojzbUKBN7S/AemPDz77cMzn8GGLYFFgT Ae9IzNPFw0vm JoF8ZRoh7KFB5ijjUYgZi NDElEoY8A33GHlmYyhKfCVksZyyB9AQnyU1TlE6oiH6iLMoYXVsHp4kJA7YzzMZIZzATjNo2 bBbUSUyAqQjajxMUskWtblccyySrxHdNXaClE8qZVeweyi8JjhMefXtc9998GGE7sFojsDZHYLChWK8ezX7BXmsA+i3D 2qJr0WXb+Kj BXYYQwu1KBO98sbGENXCfDN rtX/qwfjSx3GeAG4l2yIbYZpBtW9hDdO/855YPZvNBNv9D38UgKwa6Atb0/XXIcGd3bKjTwO/J21Dtz/punIYYrCz+sN 732k3g3WuHSjxaO7hIZ/Nyme1D/ilM1Hu eF1XjBRzbbKezUrYnsSzDvoPai2kmq/ly9+br36xoU+fZUdZBZ95dTpWu22Mua1cZ19trs4VS6V9l7Vc0yAZELsJcv94 AZROJXq Y9HfbdLOhcVtPpXrdN8yEb6abdpVsFnutGOOm3xURBQJMj/+60m/YNl7BpmjllczopsbUOaTeNMwhbTI+6fXvHyijUCu OZY8EkYp nC0YagdvNuc9s5TY8lpVtwa0QAF00gLiepDObN+8pzcyqhhFzqLhHMaFuroe+5bGaUXuuO/t2I34FWSQsVatvKb8YF7f bf38cfz55dR U8gao66hr41DPS5rt9ri4m6rwyzlB50NzHxzaq2PowFxQValrqjIRu+l7U1QFKaKj2hM9C+duhT7e1EZ7K+Me5S4fWk s8WEax2w0dMVp9fXV41f/B8T9vdBX68Gql9exIsLLVI63ahA+VqvIO5Vv+r6WlXVNufb3a4y1IvVhtpXqAZv/lUpeYHz CgAcUFNrAXdr9UWr8xmCnemr0GA19 hb1f4NirV+MQW600eoCIvX1glqq1r1dNFTgfl53YE+Ddn5FDzJBQ0JnZymVi1DwnkA/6nLG66LQVQjgAMeZX1Rv kG8YP9dcA3TpMwzmaQ3fNKglEYfK8oyoPONN4iF/Sh997hhryBZSQq9IqJ5x8SfFoxzKIisRNYF4yk4mhyRrWPi MoQ5Q6lH2etidfEYRpMziKOy700XBrrB87hsXrg8DSf8YEhDMPZ+7NMvJ7hGhcRHV7uPfbQA2m40 Dboy7XUO/SeBmo+H2DwYw2Zb+D7GrXPoWJtj2AAAAAElFTkSuQmCC); }

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

#italica {

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

#subrayado { left: 61px; width: 30px; background-position: -61px 0; } #subrayado 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="opciones"> <li id="negrilla"><a href="#" onclick="document.execCommand('bold',false,'');"></a></li> <li id="italica"><a href="#" onclick="document.execCommand('italic',false,'');"></a></li> <li id="subrayado"><a href="#"

onclick="document.execCommand('underline',false,'');"></a></li> </ul>

<section id="textBox" contenteditable="true"> <h1 style="color: red">Ttulo</h1> <p>Escribir aqu...</p> </section> </body> </html>