Las imágenes son unos elementos muy interesantes: nos gustan mucho, máxime si están muy elaboradas. La parte mala consiste su gasto de memoria en el servidor y las llamadas al mismo. Es chocante pedir rapidez por parte de usuarios y buscadores, pero es díficil casar con una web visual y atractiva. Es decir, muchas imágenes implican ralentizar una página y ya sabemos cómo medir el tiempo de carga en una web. Para paliar este problema que se nos presenta, vienen a nuestro rescate los CSS sprites. Qué son, su utilidad y cómo generaros es el objetivo de esta guía.
Qué son los CSS sprites
Repasando un poco de historia, los videojuegos fueron el motivo de que surgieran. Los juegos que tantas enseñanzas trasmiten: desde idiomas, expresiones hasta historia o acertijos lógicos. Los sprites consisten en la agrupación de varias imágenes en una sola. Así cuando deseamos visualizar una «imagen indivual» llamamos a la parte correspondiente dentro de la global llamada sprite. Por tanto, si tenemos 30 imágenes en una página, se realizaría una sola llamada al servidor. Es verdad que por cada llamada al servidor se ralentiza poquito, pero sumando muchos poquitos da como resultado un desfase considerable.
Veamos un ejemplo gráfico para comprenderlo mejor.
Tenemos tres imágenes en la izquierda: boton_normal, boton_hover y boton_activo. Juntamos todos los pngs y lo llamamos sprite. Como ya habréis deducido sirve para un botón. En muchas ocasiones al pasar el ratón por encima la imagen del botón tiene un un efecto visual y cuando hacemos clic tiene otro distinto. Por tanto, en vez de hacer tres llamadas al servidor lo reducimos a una sola. También, para las redes sociales es sumamente útil. Imaginad que tenemos 6 redes sociales con los efectos del botón anteriores (normal, hover y activado) pero adaptado a cada red social. Tendríamos en total 18 imágenes, es decir, 18 llamadas al servidor. ¡Y si es una categoría de un blog con 5 artículos obtendríamos 90 llamadas al servidor! Una animalada aunque las imágenes no sean muy grandes, 90 peticiones son 90 peticiones. Si lo hacemos con un sprite, sólo serían 5 llamadas al servidor. ¡Lo cual se traduce en un ahorro de consumo del 94’4%! No está nada mal la reducción. Eso no es todo todo. Miremos la parte de memoria en el servidor. Una imagen normal en nuestro ejemplo ocupa 515kb y el sprite 735kb. Por tanto, si multiplicamos por tres cada imagen para obtener el espacio total, las cuentas nos salen que ahorramos para cada uso del sprite un 53% de espacio.
Claro, la desventaja mayor que tienen los css sprites consiste en su función sólo con imágenes estáticas que ya sepamos con antelación su sitio y lugar. Para imágenes «dinánimas», verbi gratia, para los posts más populares o lo usuarios más activos no sirven proque varían con el paso del tiempo y a priori no podemos saber cómo evolucionará. No obstante, sólo quitándonos el peso de las imágenes estáticas ahorraremos mucho tiempo y espacio.
Para nuestra página de inicio, es práctico combinar el mayo número posible de imágenes para reducir el tiempo de carga y no hacer esperar a usuarios ni a bots. Iconos, redes sociales, botones no pueden quedar fuera en la optimización de nuestro sitio.
Creación de los sprites
La inmensa mayoría de nosotros no sabemos programar, diseñar o tener conocimientos para crear manualmente los sprites. Pero no hay problema porque existen varias aplicaciones que automatizan el proceso. Sólo tenemos que insertar las imágenes que ellas nos crean la imagen sprite y el código necesario para su implementación en la web. Algunas herramientas online que recomiendo son las siguientes:
- CSS Sprites generator: sencillo y fácil de usar. Lo empleé hace tiempo para el sprite de mis redes sociales.
- Instant Sprite: es más visual y moderno que el anterior. Igualmente es intuitivo.
- Generador de Sprite CSS: está en español, es algo más complicado pero más completo si sabemos de HTML y CSS.
- Stiches: una gran aplicación dinámica que vemos directamente cómo va quedando el sprite.
Como observaréis no es tan complicado usar los CSS sprites si nos dan el código. Es una idea sencilla pero muy eficiente. Además, si herramientas nos hacen el trabajo pesado y complicado, es lo ideal. ¿Conociáis la existencia de los CSS Sprites? ¿Los usáis en vuestra web? ¡Dejad vuestras experiencias!
Como información extra os dejo el link a un programa gratuito para reducir el tamaño de las imágenes sin perder calidad. Si no tenemos WordPress con plugins para imágenes o, simplemente, queremos reducir el peso de nuestras fotos, es una buena alternativa.
