El uso de iconos e imágenes han sido esenciales para mostrar un entorno gráfico agradable y atractivo para el usuario en las páginas web. Ahora que se habla de la web 2.0 (donde no solo el servicio es lo que cuenta sino también un buen desarrollo web) las aplicaciones web son mas complejas, la cantidad de imágenes y de iconos puede afectar grandemente el tiempo en que se carga o muestra un página web. Todo desarrollador debe tener en cuenta que mientras mas ligera sea un página tardará menos su carga, y eso es importante en estos días en que se da mucha importancia a Ajax, lo que nos hace usar muchas librerías como script.aculo.us, prototype u otros. Claro hay versiones reducidas de estas librerias, pero aun así explicaremos un técnica para reducir la tiempo de carga de página web: concatenar las imágenes.
¿Concatenar imágenes?
Para tener una idea de lo que queremos decir, vea este ejemplo:
Concatenando este grupo de imágenes se vería así:
La idea de concatenar las imágenes es que estás estén agrupadas en un solo archivo cuando accedemos a una página web. Ya cuando van a ser mostradas las 'partiremos' en lo que corresponde. Esto se hace con CSS, una imagen transpararente GIF de 1×1 píxel y mucha imaginación.
Un ejemplo que resume todo
Usaremos esta imágen concatenada en nuestro ejemplo: 
. En el archivo HTML tenemos esto:
<html> <head> <title>Ejemplo de imagenes concatenadas</title> <link rel="stylesheet" type="text/css" href="estilo.css" /> </head> <body> <ul id="sidebar"> <li><a href="index.html" title="Home"><img src="transparent.gif" class="icon icon-home" alt="Home"/>Home</a></li> <li><a href="search.html" title="Search"><img src="transparent.gif" class="icon icon-search" alt="Search"/>Search</a></li> <li><a href="bookmarks.html" title="Bookmarks"><img src="transparent.gif" class="icon icon-bookmarks" alt="Bookmarks"/>Bookmarks</a></li> </ul> </body> </html>
Note que la etiqueta img hace referencia a la imagen transparente de 1px. Ahora veamos la hoja de estilos CSS.
#sidebar img.icon{
background: url('imagen.png') no-repeat;
height: 16px;
margin-right: 3px;
vertical-align: middle;
width: 16px;
}
#sidebar img.icon-home{
background-position: 0px 0px;
}
#sidebar img.icon-search{
background-position: -16px 0px;
}
#sidebar img.icon-bookmarks{
background-position: -32px 0px;
}
(Pueden ver el resultado en este enlace) Como se puede apreciar a simple vista la concatenación de imágenes en una sola ayuda a reducir el tiempo de carga de varias imágenes por separado.
Ya que trabajamos las imágenes con CSS, podemos agregar un efecto transparente a todas ellas y resaltar cuando el mouse se posa sobre una de estas imágenes. (Este efecto no se apreciará en IE)
#sidebar img.icon{
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
#sidebar img.icon:hover{
filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity:1.0;
}
Importante! La imágenes concatenadas deben tener el mismo tamaño. En el ejemplo cada imágen tiene 16 x 16 píxeles.
Trabajar de esta manera realmente tiene una ventaja tremenda si desarrollamos aplicaciones web con librerías JavaScript pues si no podemos ahorrar tiempo de carga con estas librerías podemos hacerlo con las imágenes, osea con la concatenación de imágenes.
felicitaciones, temas ad.hoc