Utilizar sprites CSS para cargar más rápido una web

El uso de sprites en lugar de imágenes es una práctica bastante extendida y muy eficaz de cara a mejorar el rendimiento y la carga de un site. Tanto la experiencia de usuario como el SEO se verán recompensados por la aplicación de esta solución.

En esta técnica CSS básica lo que hacemos es sustituir la carga individual de imágenes de un site por la carga de una sola imagen en mosaico con todas las imágenes que queramos sustituir. Para ello deberemos de generar previamente dicho mosaico y contar con distintas clases CSS con las coordenadas de cada imagen en dicho mosaico. Es una solución muy ingeniosa y para la que existen muchas herramientas online que hacen realmente sencilla su implementación.

El código HTML

Para este ejemplo vamos a realizar un listado de idiomas que posteriormente podemos utilizar en un selector de menú por ejemplo para cambiar el lenguaje de la página. Supongamos que queremos que al lado de cada entrada de menú nos aparezca una bandera.

Primero crearemos un fichero con el siguiente código HTML.

<!doctype html>
<html>
<head>
  <title>Menú con sprites</title>
  <meta charset="utf-8">
</head>
<body>
    <h1>Lista de idiomas</h1>
    <ul>
      <li>Inglés</li>
      <li>Francés</li>
      <li>Alemán</li>
    </ul>
</body>
</html>

Obtengamos las imágenes

En Internet tenemos multitud de recursos en donde obtener imágenes para utilizar en nuestros proyectos, como Iconfinder. Ahí podremos buscar y descargar las imágenes individuales para nuestro ejemplo.

Elijamos por ejemplo tres banderas: inglesa, francesa y alemana y las guardaremos con su correspondiente nombre: ENG.png, FRA.png, GER.png. Una vez las hayamos descargado las comprimiremos todas en un .ZIP que llamaremos por ejemplo flags.zip. Enseguida averiguareis porqué.

Generemos el mosaico

Para esta tarea contamos en la red con varios recursos. Yo generalmente utilizo el Generador de Sprites del Proyecto Fondue. Ahora es cuando enviaremos el .zip generado en el paso anterior con todas las imágenes de nuestro mosaico. Como podeis ver es un formulario bastante completo, pero no difícil de manejar.

Podéis utilizar el formulario con las opciones tal y como aparecen en la capturas. No asignaremos ningún prefijo a la clase CSS y dejaremos una separación de 5px entre cada imagen en el mosaico.

Una vez validado el formulario y enviado el .zip podremos descargar una imagen con el mosaico de los ficheros enviados y las reglas CSS a aplicar. Estas son las reglas CSS a aplicar en nuestro fichero:

.flag {
    background: url(flags.png) no-repeat top left;
}
.ENG { 
  background-position: 0 0;
  width: 23px; 
  height: 17px; 
} 
.FRA { 
  background-position: 0 -22px; 
  width: 23px; 
  height: 17px; 
} 
.GER { 
  background-position: 0 -44px; 
  width: 23px; 
  height: 17px; 
}

Incorporar las clases CSS, modificar el HTML y añadir la imagen al directorio

Así pues añadiremos las clases CSS dentro de los tags <style> y </style> dentro del HEAD de nuestro fichero. A continuación copiaremos el fichero del mosaico (no olvides renombrarlo a flags.png igual que en el código CSS anterior).

Por último deberemos de modificar el código HTML para incluir las imágenes con las clases.

Seguramente a estas alturas deberéis de estar pensando cómo referenciar las imágenes en nuestro código… Muy fácil. Tanto a nivel de corrección sintáctica en el HTML como semántico lo más correcto es utilizar un tag <img> dado que realmente lo que queremos utilizar es un imagen. ¿Y qué incluimos en el atributo src? Podríamos dejarlo vacío y probablemente funcionara en la mayoría de navegadores, pero no es correcto dado que es un campo obligatorio en la norma de la W3C. ¿Entonces qué incluiremos? Muy sencillo. Previamente crearemos un fichero .GIF o .PNG transparente (lo podéis crear con vuestro editor favorito), lo más pequeño posible y al cual apuntaremos en dicho atributo src. De ese modo cumpliremos la especificación. En nuestro caso lo llamaremos void.gif.

El código final

Bueno, con las modificaciones antes indicadas el código con el HTML, los nuevos tags <img> y el CSS quedaria de la siguiente manera:

<!doctype html>
<html>
<head>
  <title>Menú con sprites</title>
  <meta charset="utf-8">
  <style type="text/css">
    .flag {
        background: url(flags.png) no-repeat top left;
    }
    .ENG { 
      background-position: 0 0;
      width: 23px; 
      height: 17px; 
    } 
    .FRA { 
      background-position: 0 -22px; 
      width: 23px; 
      height: 17px; 
    } 
    .GER { 
      background-position: 0 -44px; 
      width: 23px; 
      height: 17px; 
    } 
  </style>
</head>
  <body>
    <h1>Lista de idiomas</h1>
    <ul>
      <li><img class="flag ENG" src="void.gif" />Inglés</li>
      <li><img class="flag FRA" src="void.gif" />Francés</li>
      <li><img class="flag GER" src="void.gif" />Alemán</li>
    </ul>
  </body>
</html>

Tal y como hemos comentado anteriormente hemos incluido el el tag <img class="flag ENG" src="void.gif" />, incorporando las clases flag y el nombre de la bandera así que realmente estamos viendo el background del elemento, porque si recordáis el atributo src apunta a una imagen transparente.

Aquí teneis una captura de pantalla del código anterior:

Resumiendo

El uso de sprites CSS es una mágnífica práctica que redunda en beneficio de nuestra página por las siguientes razones:

Con una sola petición resolvemos varias imágenes simultáneamente lo que redunda en un importante ahorro de tiempo de carga. Recuerda que las peticiones de ficheros entre tu equipo y el servidor se realizan secuencialmente y ello lleva cierto tiempo que nos ahorramos con esta técnica.
El ahorro de tiempo no solo beneficia al usuario sino también al posicionamiento de la página dado que hace mucho que en todos los algoritmos de posicionamiento de todos los buscadores el tiempo de carga de la página es fundamental. Así que ya lo sabéis. Si queréis un buen posicionamiento, sed rápido.
Se pueden combinar imágenes de distintos tamaños. Aunque en este ejemplo hemos utilizados imágenes de las mismas dimensiones en pixels podemos combinar imágenes de diferentes tamaños dado que cada una tiene asignada una clase diferente.

Sin embargo tiene como inconveniente que cuando queramos modificar o añadir una imagen deberemos de volver a realizar el proceso de generación, lo que lleva cierto tiempo. Además dado que los navegadores cuentan con caché y algunos servidores utilizan proxies es posible que en ocasiones tardemos un tiempo en ver los cambios que realicemos en la imagen.

Espero os sea de utilidad.

Fuentes

http://www.w3schools.com/css/css_image_sprites.asp

http://es.spritegen.website-performance.org/

Comparte si te ha gustado

Autor: Oscar Gascón Arjol
Última actualización: 15 de noviembre de 2013

Deja una respuesta Cancelar la respuesta

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

De acuerdo con lo dispuesto en el Reglamento (UE) 2016/679 de 27 de abril de 2016, consiento que mis datos sean tratados bajo la responsabilidad de Oscar Gascón Arjol para recibir respuesta a consultas. publicación de comentarios del blog y que las conserve mientras haya un interés mutuo para ello. Me doy por informado que tengo derecho a revocar este consentimiento en cualquier momento y a ejercer los de acceso, rectificación, portabilidad y supresión de mis datos y los de limitación y oposición al tratamiento dirigiéndome por email a me@oscargascon.es. También estoy informado de que puedo reclamar ante la autoridad de control a www.agpd.es.