tutorial creación de sprites css

¿Cómo crear un sprite css? Ejemplo paso a paso

8 septiembre, 2015 0 comentarios

Vivimos en una sociedad en la que se valora mucho el tiempo. Todo aquello que nos ayuda a ahorrar tiempo o que nos ofrece lo que buscamos de manera rápida, nos gusta y lo preferimos frente a opciones más lentas.

La web está poblada de estudios acerca de cómo la rapidez de una página para mostrar información está directamente relacionada con la cantidad de tráfico que recibe. Por tanto, el tiempo de carga de un sitio web es un factor SEO cada vez más relevante.

Muchos son los factores que determinan la velocidad de una página web. En este artículo nos centraremos en mejorar el tiempo de carga de nuestra web optimizando la descarga de las imágenes mediante el uso de Sprites CSS.

¿Qué son los sprites CSS?

Un sprite, en términos de diseño web, es una imagen en formato PNG o GIF compuesta por la combinación de varias imágenes en una sola.

El siguiente ejemplo explica el uso de los sprites CSS en un sitio web que muestra los iconos de las redes sociales asociadas.

Iconos mediante img

Iconos mediante img

La solución tradicional para crear la página anterior consiste en utilizar dos elementos <img> en el código HTML y disponer de dos imágenes correspondientes a los dos iconos. El código de nuestra página index sería:

<html>
  <body>
    <h1>REDES SOCIALES</h1>
    <a href="https://linkedin"><img src="img/in.png" /></a>
    <a href="https://twitter"><img src="img/tw.png" /></a>
  </body>
<html>

Aunque es una solución sencilla y que funciona muy bien, es ineficiente. El navegador debe descargar dos imágenes diferentes para mostrar la página, por lo que debe realizar dos peticiones al servidor.

Utilizando la técnica de los sprites CSS se va a rehacer el ejemplo anterior para conseguir el mismo efecto con una sola imagen y por tanto, una sola petición al servidor.

Para que la web sea más atractiva, aprovechando que podemos añadir en un sprite varias imágenes, en este ejemplo se añadirán también animaciones en los iconos. Al pasar sobre ellos, cambiarán su apariencia con un atractivo efecto de movimiento.

Por tanto en este tutorial veremos:

  • Montaje de las imágenes que generan el Sprite
  • Programación en HTML y creación del CSS Spritting
  • Generación de la transición que da efecto de movimiento

Paso 1: Montaje de las imágenes que generan el Sprite

El primer paso consiste en crear una imagen grande que incluya las cuatro imágenes individuales.

Usando tu programa habitual de edición de imágenes, genera una imagen PNG con 2 iconos en la parte superior y justo debajo, los mismos iconos con la apariencia que tendrán una vez que nos coloquemos encima de ellos con el ratón.

En nuestro caso, cuando el ejemplo esté terminado, al situarnos sobre el icono, éste se verá más claro, por eso las imágenes de abajo son iguales que las de arriba pero una opacidad del 80%.

Sprite con 2 redes sociales

Sprite

Decidimos que el tamaño del icono es de 31px tanto de alto como de ancho. Y entre cada imagen individual, hemos dejado dos píxeles de separación. Por tanto, la imagen PNG resultante es de 64×64 píxeles. La hemos llamado rrss.png

Anchura
Icono Linkedin Separación Icono Twitter Total
31 2 31 64

 

Altura
Icono Normal Separación Icono 80% opacidad Total
31 2 31 64

Si en lugar de 2 iconos, se quisieran 3

Sprite con 3 redes sociales

Sprite

La anchura se vería incrementada en 33px, mientras que la altura sería la misma

Anchura
Icono Linkedin Separación Icono Twitter Separación Icono Facebook Total
31 2 31 2 31 97

Paso 2: Programación HTML y CSS Spritting

La clave de la técnica de los sprites CSS consiste en mostrar las imágenes mediante la propiedad background-image en lugar de mostrarlas directamente con la etiqueta img. Para poder usar esta propiedad, vamos a cambiar ligeramente el código HTML de index. Vamos a eliminar la imagen del código HTML añadiéndola en su lugar en la hoja de estilos CSS. La estructura de archivos y carpetas es la siguiente:

Estructura sprite

Estructura

FICHERO INDEX

El código del fichero index será el siguiente:

<html>
 <head>
   <link rel="stylesheet" href="./css/estilo.css" type="text/css" />
 </head>
 <body>
   <h1>REDES SOCIALES</H1>
   <div class="contenedor">
      <a class="linkedin" href="https://linkedin"></a>
      <a class="twitter" href="https://twitter"></a>
   </div>
 </body>
</html>

 

FICHERO CSS

Disponemos de una sola imagen, el Sprite, compuesto por los 4 iconos y con una dimensión de 64×64 píxeles. Esta imagen se mostrará mediante la propiedad background-image del CSS.

En la siguiente imagen se muestra en qué coordenadas está la esquina superior izquierda de cada uno de los iconos que componen el sprite

Coordenadas de los iconos

Coordenadas de los iconos

Icono Linkedin Icono Twitter
0, 0 0, 33
Icono Linkedin al 80% Icono Twitter al 80%
33, 0 33, 33

Para mostrar cada vez un icono diferente, en lugar del sprite completo, se utiliza la propiedad background-position que desplaza el sprite teniendo en cuenta la posición de cada icono individual dentro del sprite. Lo desplaza hacia la izquierda o hacia arriba.

El código CSS resultante será el siguiente:

.linkedin{
  width: 31px;
  height: 31px;
  background: transparent url("./../img/rrss.png");
  background-position: 0px 0px;
  float:left;
}
.twitter{
  width: 31px;
  height: 31px;
  background: transparent url("./../img/rrss.png");
  background-position: -33px 0px;
  float:left;
}
.linkedin:hover{
  background-position: 0px -33px;
}
.twitter:hover{
  background-position: -33px -33px;
}
/* Dejamos una separación entre los enlaces */
.contenedor a{
  margin: 10px;
}

Paso 3: Dar efecto de movimiento con una transición

Hasta el momento, teniendo sólo la hoja de estilos, hemos conseguido mostrar, para cada red social, un icono que cambia su comportamiento al pasar sobre él gracias a la pseudo-clase :hover.

Ahora vamos a mejorar nuestro ejemplo aplicando una transición para que cuando se desencadene la acción del hover, en lugar de que aparezca directamente la imagen más clara, ésta aparezca progresivamente, dando sensación de cambio gradual de opacidad.

Tenemos dos formas de especificar las transiciones. Una forma más extensa:

transition-property: PROPIEDAD-QUE-SE-MODIFICA;
transition-duration: TIEMPO;
transition-timing-function: TIPO-DE-EFECTO;

O bien, directamente:

transition:PROPIEDAD-QUE-SE-MODIFICA TIEMPO TIPO-DE-EFECTO;

En nuestro caso, la propiedad a modificar es background-position.
Tipos de efectos hay muchos. Puedes explorarlos por ti mismo en el siguiente enlace de w3c schools.

En nuestro caso, nos decantamos por ease-out, donde se consigue que la velocidad de la transición decrezca.

Esta modificación se añade a las clases linkedin y twitter, no en sus homólogas hover. Por lo que el código definitivo de nuestra hoja de estilos será:

/* Icono likedin con TRANSICIÓN opción 1 */
.linkedin{
  width: 31px;
  height: 31px;
  background: transparent url("./../img/rrss.png");
  background-position: 0px 0px;
  transition-property: background-position;
  transition-duration: .1s;
  transition-timing-function:ease-out;
  float:left;
}
/* Icono twitter CON TRANSICIÓN opción 2 */
.twitter{
  width: 31px;
  height: 31px;
  background: transparent url("./../img/rrss.png");
  background-position: -33px 0px;
  transition:background-position .1s ease-out;
  float:left;
}
.linkedin:hover{
  background-position: 0px -33px;
}
.twitter:hover{
  background-position: -33px -33px;
}
.contenedor a{
  margin: 10px;
}

¿Cuándo usar sprites CSS?

Las imágenes susceptibles a combinarse en una única imagen sprite son aquellas que forman parte del diseño de nuestra página web. Es decir, no se debe emplear la técnica CSS spritting para imágenes de contenido de nuestra página web, como podrían ser las fotografías de nuestros productos o servicios.

Alternativas y complementos a los sprites

Aunque los sprites suponen una mejora considerable en el tiempo de carga de una web, la mejor opción para optimizar la velocidad es emplear varias técnicas combinadas para mejorar el rendimiento, en lugar de una sola.

Puesto que la tendencia actual es usar cada vez más tipos diferentes de dispositivos para acceder a Internet, ¿cómo renderizar la misma imagen igual de bien en una pantalla pequeña que en las pantallas de equipos de sobremesa, sin olvidar todos los dispositivos intermedios, incluyendo las pantallas retina?

La solución está en las denominadas icon fonts. Las fuentes de iconos (o fuentes tipográficas) son grupos de vectores gráficos agrupados en una fuente personalizada. Las icon fonts se escalan estupendamente para cualquier resolución de pantalla y puesto que se comportan como cualquier otra fuente, crear estilos con ellas es mucho más sencillo que actualizar sprites.

Links para saber más sobre sprites y velocidad de carga

Para terminar, me gustaría compartir con vosotros algunos enlaces de interés para profundizar más en temas de optimización de velocidad de carga.

Toma nota de las diferentes técnicas de optimización del rendimiento web (conocidas por sus siglas en inglés WPO: “Web Performance Optimization”)

Consulta la ayuda de Google Analytics para saber más acerca de la velocidad de un sitio web
Echa un vistazo a diferentes icon fonts como:

Espero que este ejemplo paso a paso os haya servido de ayuda para reducir el tamaño de las imágenes de vuestra web y mejorar la velocidad de carga. Si queréis compartir ideas, dudas o sugerencias, ya sabéis: justo aquí abajo está el formulario de contacto  ^_^

Además, si queréis descargar el código completo de este ejemplo podéis hacerlo gratis simplemente siguiéndonos en Facebook mediante este enlace (si no ves la imagen a continuación, desactiva los complementos tipo addblockplus)


Por favor, pulsa el botón Me gusta de facebook para hacerte seguidor de KadumWeb y poder acceder a los archivos descargables

Gracias por hacerte seguidor, pulsa aquí para acceder a los archivos descargables. Descomprime el archivo con la clave: kadum




Nota: La imagen de la portada está tomada de Wanda Kamarga.

Volver al blog

Deja un comentario