Cómo utilizar CSS Sprites para que tú página cargue más rápido.
Posted on 28-10-2009 | By: Víctor Martínez | 
(No Ratings Yet)
Loading ...
Category : Blog, Customization, HTML, Internet, Links, Soluciones, Tutoriales
Hace poco repasé 10 tips para hacer que tú página o blog cargara más rápido. Uno de los puntos tratados fue el uso de CSS Sprites, que por más difícil que suene son bastante simples y he aquí como utilizarlos:
¿Qué son CSS Sprites?
Una magnífica explicación de los CSS Sprites viene de A List Apart, dónde nos platica la idea detrás de esta tan ingeniosa técnica:
Back when video games were still fun (we’re talking about the 8-bit glory days here), graphics were a much simpler matter by necessity.[…] As game complexity increased, techniques developed to manage the multitude of sprites while keeping game play flowing. One variation saw sprites being plugged into a master grid, then later pulled out as needed by code that mapped positions of each individual graphic, and selectively painted them on the screen.
CSS Sprites no es más que utilizar una imagen maestra y luego recortarla y acomodarla (utilizando CSS) de acuerdo a como quieras que se vea en tu sitio.
¿Por qué utilizarlos?
En el fondo esta técnica es bastante simple. Hace más eficiente tu sitio por que en vez de solicitar 10 imágenes al servidor (por decir un número) sólo requieres de un sprite que contenga a las 10, ¡Efectivamente reduciendo las llamadas HTTP por 10 veces!
Se puede argumentar que la imágen maestra será más pesada que las imágenes por separado, lo cual no es necesariamente cierto.
En el ejemplo que veremos más adelante la 
imágen maestra pesa 24.5Kb mientras que 5 de los 8 elementos utilizados suman 29.3KB.
¿Por dónde empiezo?
Para comenzar necesitamos crear una imagen maestra con las imágenes a utilizar y luego mediante código CSS creamos pequeños cuadros de acción (áreas de vínculo) para que nuestras imágenes se comporten como deseamos.Tomemos como ejemplo los botones de la barra lateral de este sitio. (Por cierto, ya que los vieron, ¡usénlos!)
1. Se utilizó un editor de imágenes (leáse: GIMP) para crear una imágen que contuviera a las otras imágenes de los botones.
2. En el blog se agregó un widget HTML que contuviera la siguiente lista:
<ul id="skyline">
<li id="panelA"><a href="#"></a></li>
<li id="panelB"><a href="#"></a></li>
<li id="panelC"><a href="#"></a></li>
</ul>
Esta lista contiene tantos elementos como vínculos o acciones a ocupar. En el siguiente paso utilizaremos CSS para crear un área de acción sobre cada parte de la imágen.
3. Modifiquen y agregen el siguiente código CSS a su plantilla:
#skyline li {margin: 0;
padding: 0;
list-style: none;
position: absolute;
}
#skyline li, #skyline a {
height:TAMAÑO IMÁGENES;
display: block; }
Éste código posiciona los campos de vínculo de acuerdo al tamaño de las imágenes del sprite, así como ocultar las características de la lista anterior, dejando solamente sus vínculos y posiciones.
4. Por último, se acomodan los campos de vínculo en posición dentro de la imagen.
Por ejemplo, las esquina superior izquierda de nuestro botón de RSS se encuentra en la posición (12,8) y las dimensiones de la imágen son 60×60 px. Por lo que agregando el siguiente CSS, esa área en la imágen maestra se comporta como vínculo a nuestra feed:
#panelA{left: 12px;
top:8px;
width:60px;
height:62px;
}
¿Qué Sigue?
La idea se puede extender a imágenes interactivas (con acciones al momento de pasar el mouse sobre de ellas) e incluso a la creación de botones con distintas imágenes de estado.
Bibliografía (por falta de una mejor palabra)
- CSS Sprites: Image Slicing’s Kiss of Death
- CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
- The Mystery Of CSS Sprites: Techniques, Tools And Tutorials
an exception has ocurred at the disc g87tr0y498jvg5fe, demaseado complicated for me.
[Reply]
VrmpX Reply:
October 29th, 2009 at 5:54 pm
Jajaja cierto, pero es uno de los temas que me apasiona, programación web.
Ir mezclando temas no es tan malo, pero sí, este artículo está dedicado a webmasters que desean mejorar sus páginas y todavía no saben como.
Como siempre, apreciamos tu comentario.
[WORDPRESS HASHCASH] The poster sent us ‘0 which is not a hashcash value.
[Reply]
Concheria Reply:
October 30th, 2009 at 8:36 am
@VrmpX,
igualmente lo voy a probar, talvez me sirva de mucho con la pagina, siempre me interesaron estas cosas…
[Reply]
[...] 2678400-1Mes). Por defacto, utilizamos un tiempo de expiración de 48 horas desde el ingreso.Utiliza CSS Sprites.Sin lugar a dudas la técnica más singular de la lista. La idea detrás de los CSS Sprites es la [...]
[...] con colores más claros y un mejor enfoque hacia el texto. En esta nueva versión, mantuvimos el css-sprite de la versión anterior (para mostrar las maneras en que pueden seguir el blog) así como algunos widgets como tag-cloud y [...]