CSS Sprites es una técnica de diseño HTML que permite reducir drásticamente el número de peticiones al cargar las imágenes de nuestra página web. ¿Cómo? Pues juntando el mayor número posible de éstas en una misma imagen. A continuación os hago una pequeña explicación de esta técnica, que puede hacer que vuestro servidor se sature menos y que vuestras páginas carguen más rápido.
Seguramente a muchos os sonarán esas imágenes de videojuegos antiguos en las que aparecen muchos de los movimientos de los personajes seguidos. La técnica CSS Sprites sigue la misma base que la animación de estos juegos. Como decía en el anterior párrafo, consiste en juntar varias imágenes en una sola para disminuir el número de peticiones del servidor y luego elegir la parte de la imagen que queramos utilizar con la propiedad “background-position”, que nos permite desplazarnos por dentro de una imagen de fondo.
Nada mejor que un ejemplo sencillo para aprender a utilizar esta técnica, que no es nada complicada aunque de entrada lo pueda parecer.
Paso 1: Juntar imágenes
En primer lugar deberemos juntar todas las imágenes que deseemos en una sola. Para ello lo podremos hacer de manera manual con nuestro programa de edición de imágenes favorito o sino con una herramienta web creada con este fin, llamada CSS Sprite Generator. En esta última, bastará que subamos todas las imágenes y hagamos clic en “generar” para que nos devuelva la unión de todas y también el código css con la posición de cada una.
Paso 2: Escribir el código
Ahora que ya tenemos nuestras imágenes unidas y la posición de cada, deberemos comenzar a escribir nuestro código CSS y HTML para que todo se muestre correctamente. Llegados a este punto hay que tener claros dos conceptos: el primero, que necesitaremos un contenedor genérico para la imagen, por ejemplo un enlace que afecte a las clases o ids de las imágenes. Y también los elementos CSS y HTML que indiquen la posición de cada imagen. ¿Está claro? Veamos un ejemplo:
Contenedor
Código CSS: [css] #contenedor a{ background-thumbnail-img: url(‘images/imagenCSSSprite.png’) no-repeat; text-indent: -9999px; height: 16px; width:16px; display: block; float: left; padding-left: 5px; } [/css]
Este será el código CSS que mostrará nuestra imagen en los enlaces que se encuentren dentro de #contenedor. Así que ahora sólo tendremos que escribir el código para que cada enlace muestre una parte distinta de la imagen. La propiedad “text-indent” y “display” son opcionales y las pongo para que los enlaces no muestren ningún texto, además, con “float” me estoy asegurando de que se muestren en la misma línea.
Código básico de CSS Sprite
Código CSS: [css] #contenedor a.bocabit{background-position: 0px 0px; } #contenedor a.lvb{background-position: -26px 0px;} #contenedor a.eg{background-position: -43px 0px;} #contenedor a.faseExtra{background-position: -68px 0px;} #contenedor a.ert{background-position: -94px 0px;} [/css]
Este código dice que para la clase “bocabit”, muestre la primera parte de la imagen, muentras que para la clase “faseExtra”, muestre a partir del píxel 68 de la imagen, etc. (Los atributos de background-position son por defecto “Eje X” y “Eje Y”.
Código HTML: [html] <div id=»contenedor»> bocabit.com, FaseExtra, Reverso, LVB, enGeneral </div> [/html] En este código sólo hemos incluido los enlaces con sus respectivas clases, así que ya debería ser plenamente funcional.
El resultado lo podéis observar en la barra superior de este blog en la que aparecen los iconos del resto de blogs de Bleef o en los iconos sociales debajo de cada artículo.
¿Esto sirve para algo?
Sí. Como comentaba, puede disminuir en gran medida la cantidad de peticiones de nuestro servidor y además aumentar la velocidad de carga de nuestra página. Esto es debido a que al ser una única imagen la que se carga, sólo empleará tiempo en conectarse una única vez para descargarla, mientras que si son varias, deberá conectarse varias veces con la resultante pérdida de rendimiento.