¿Qué es CSS sprites y cómo usarlos?
Imagina que tienes seis imágenes que utilizas en el diseño de tu página principal y el navegador tiene que descargarlas de forma individual.

Si se combinan en una sola imagen, puedes reducir drásticamente la velocidad de carga de la página. Esto reduce las “ida y vuelta”, del navegador al servidor, necesarios para visualizar la página haciendo su sitio más rápido. En lugar de descargar seis imágenes, tu página web ahora tiene que descargar solo una.

Combina imágenes con CSS sprite.
Combina imágenes con CSS sprite.
Esta es la maravilla de los CSS sprites. Un recurso, pero varios usos.

La mayoría de las páginas web utilizan muchas imágenes pequeñas en su diseño. Las imágenes de fondo, imágenes de esquina, iconos, elementos de menú, etc. Estas pequeñas imágenes realmente consumen recursos cuando se enfoca desde el punto de vista de la velocidad de carga de la página.

Cada imagen debe ser descargada, lo que significa que el navegador tiene que solicitar la imagen al servidor, el servidor tiene que enviarla y luego el navegador tiene que mostrarla. Si sólo hay que cargar una o dos imágenes, está bien pero, a medida que sean más imágenes que cargar, peor es para la velocidad de carga de la página.

La solución para esto es usar el método CSS sprites que permite combinar varias imágenes pequeñas en una sola imagen para que la página web pueda mostrarlas mucho más rápido.

¿Cómo combinar imágenes en CSS sprites?
Hay dos pasos principales a seguir al crear CSS sprites:
1. Combinar las imágenes.
Vamos a utilizar un ejemplo sencillo. Digamos que tenemos dos imágenes que se quieren mostrar en una página web y combinarlas en una sola.

Tenemos que conocer el tamaño de las imágenes con el fin de crear el sprite. En este ejemplo, ambas imágenes son del mismo tamaño (50 píxeles de ancho por 50 píxeles de alto).

Imágenes que se van a mostrar en la página web.
Imágenes que se van a mostrar en la página web.
Para combinar estas imágenes tenemos que crear una imagen que sea de 50px de ancho por 100px de alto. Llamamos a esta imagen “sprite.png”.

Ahora que tenemos una imagen combinada. Podemos utilizar la información de la imagen para que se muestre correctamente en nuestra página web.

La imagen combinada tiene un ancho de 50px y una altura de 100px. Por lo tanto, podríamos decir que la primera imagen (el megáfono) se encuentra entre los 0px y 50px y que la segunda imagen (cara sonriente) se encuentra entre los 50px y 100px de la nueva imagen.

Podemos usar esta información para posicionar las imágenes correctamente en nuestra página web. En esencia, vamos a ver la mitad superior de la imagen cuando queramos mostrar el megáfono y la mitad inferior de la imagen cuando queramos mostrar la cara sonriente. Se trata de cómo vamos a hacerlo.

2. Posicionar las imágenes en la página.
Para este ejemplo vamos a utilizar las imágenes como imágenes de fondo en DIV’s. Esto significa que vamos a crear etiquetas DIV vacías en el código HTML para mostrar las imágenes.
Imágenes combinadas por el método CSS sprites.
Imágenes combinadas por el método CSS sprites.
Si queremos que aparezca el megáfono en algún lugar de nuestra página podemos crear una clase CSS llamada “megaphone” como se indica a continuación:
.megaphone {width:50px; height:50px; background:url(images/sprite.png) 0px 0px;}
El código CSS anterior nos indica el ancho y el alto de la imagen (megáfono), 50px por 50px. También está cargando la imagen “sprite.png” que es la imagen combinada. Por último, nos indica “0px 0px” que es cómo funciona el método sprite. Al declarar la imagen con el valor “0px 0px” se está indicando que la imagen debe visualizarse desde 0px en X y 0px en Y. No dejes que te asusten estos términos algebraicos. Realmente lo que esto significa que es se comienza a mostrar la imagen de “izquierda a derecha” y de “arriba a abajo”.

Dado que definimos el ancho y el alto de la imagen en el CSS, la imagen sólo muestra de 0px a 50px hacia abajo (el megáfono) y se detiene sin mostrar la imagen de la cara sonriente en absoluto. Ahora vamos a hacer la cara sonriente y ver cómo cambia nuestro código. Vamos a crear una clase CSS llamada “smile”:

.smile {width:50px; height:50px; background:url(images/sprite.png) 0px -50px;}
Como puedes ver todavía se indica el mismo ancho y alto, se carga la misma imagen (sprite.png) pero lo que ha cambiado es “0px -50px”. Esto se debe a que ahora le estamos diciendo a la imagen que se debe iniciar en otro lugar. Específicamente, estamos declarando que la imagen debe comenzar a cargarse 50 píxeles más abajo (-50px). Esto es debido a que la imagen de la cara sonriente se encuentra a partir de la mitad inferior de la imagen combinada, 50 píxeles hacia abajo desde la parte superior.

Ahora que tenemos el CSS declarado, podemos simplemente llamar un DIV en formato HTML, siempre que queramos que las imágenes aparezcan.

Dónde queramos ver un megáfono, agregamos un DIV vacío llamado “megaphone”:

<div class="megaphone"></div>
Dónde queramos ver una cara sonriente, agregamos un DIV vacío llamado “smile”:
<div class=" smile"></div>
Estas son las bases para combinar imágenes en CSS sprite pero hay muchas maneras de hacerlo y vale la pena explorarlas teniendo en cuenta lo que es mejor para tus páginas. El tutorial anterior era sólo para mostrar cómo funciona el método sprite en general y de ninguna manera es una discusión a fondo sobre este método.

¿Quieres más?

No te pierdas las actualizaciones del blog y recibe mas información en tu email sobre el correcto “Posicionamiento en Google“.

¡Suscríbete y mantente al día!

Suscríbete…

¿Me Compartes?
Me gustaría conocer tu opinión sobre este artículo en la sección de comentarios que encontrarás a continuación y que lo compartas para que otras personas lo puedan disfrutar. Gracias.
Share on Facebook0Tweet about this on TwitterShare on Google+0

Deja un comentario

Los campos marcados con * son obligatorios.

Borrar formularioEnviar Comentario