Técnica de sprites con CSS

En esta ocasión vamos a ver un ejemplo práctico de la utilización de una vieja técnica llamada sprites que solía utilizarse mucho en la programación de videojuegos y que, si bien nunca se dejó de usar, en los últimos años se ha revitalizado por su utilidad en el desarrollo web y además, por la reaparición de muchos videojuegos con el mismo estilo que los antiguos solo que rejuvenecidos para dispositivos móviles.

Esta técnica consiste en juntar muchas imágenes en una única que las incluya a todas para luego, mediante programación seleccionar de la imagen grande cuál de las que la componen se quiere utilizar.

En el desarrollo de videojuegos, se solían utilizar sprites para realizar las animaciones de los personajes, como ven en el siguiente ejemplo.

megaman-sprite

En programación web, la utilización de sprites sirve para ahorrar tiempo de carga del servidor web. Si se tienen varias imágenes separadas y se las quiere mostrar en una web, el servidor deberá ir a buscar y descargar una por una. El costo de ir y venir hace que ese sitio web sea más pesado al cargar. Si se utilizan sprites, el servidor solo debe ir a buscar una imagen, con lo cual se ahorra mucho tiempo. El trabajo de mostrarlas por separado lo realiza el equipo cliente utilizando una combinación entre CSS y HTML.

El tiempo de carga de una web se ha vuelto algo muy importante a optimizar. Google mide el tiempo de carga de las páginas y le asigna una mejor posición en sus resultados de búsqueda a aquellas que lo hacen más rápido, por supuesto que este no es el único factor que Google analiza, pero sí es uno de los más importantes.

Los sprites sirven para juntar íconos, la totalidad de imágenes de una web o para hacer botones con hover.

Un ejemplo práctico con CSS y HTML

Ahora que explicamos el objetivo y la importancia de los sprites, vamos a ver un ejemplo práctico.

En mi web Mentes Liberadas, tengo un widget para WordPress que lo único que hace es mostrar unas imágenes con enlaces. Cada una es de 48px x 48px y están en formato PNG porque tienen que tener el fondo transparente en caso de que las quiera ubicar en algún otro lugar del sidebar. Aquí las verán por separado.

FaceBook_48x48Youtube_48x48Twitter_48x48

A continuación, debemos juntarlas y convertirlas en una sola imagen. Este trabajo se le puede encomendar a un diseñador, pero yo les aconsejo a todos los programadores web que no le tengan asco a los programas de diseño y que aprendan a usarlos porque si no van a depender siempre de otra persona. En este caso, yo las junté utilizando GIMP y me llevó menos de cinco minutos. El resultado es el siguiente:

sprite-social

Si se fijan con Firebug o el Insperctor de Google Chrome verán que la anterior es una única imagen a diferencia de las otras, que estaban por separado. Al armar el sprite no hace falta definir un orden porque luego tendremos libertad de mostrar las partes que necesitemos. También hay que tener en cuenta que se podrían haber puesto las imágenes en vertical o incluso en filas de dos. El objetivo es que se desaproveche el menor espacio posible.

Como les dije, estas imágenes forman mi widget. Veamos su código HTML.

Consiste en un <div>, un encabezado <h4> y una serie de enlaces <a>. Si alguno se está preguntando donde estan las etiquetas <img> la respuesta es que no se utilizan. En cambio, se hace uso del atributo background-image de CSS.

El estilo CSS es el siguiente:

Lo que más interesa analizar en este caso es la regla #mentes-social a. Es al elemento <a> al que se le da un ancho y un alto, recuerden que se trata de un bloque y que se lo puede tratar de esta manera. Además, le asignamos una imagen de fondo que será el sprite. Esta regla se aplicará a todos los enlaces que teníamos en el HTML. El margen derecho es para que no queden todos pegados.

Luego, lo último que se define en el código es la posición de la imagen de fondo para cada enlace. Esto se realiza con background-position. El primer parámetro indica a partir de qué coordenada x de la imagen vamos a empezar a seleccionar. El segundo parámetro es lo mismo pero para la coordenada y, en este caso no influye puesto que el sprite está hecho de forma horizontal y es por eso tiene un cero.

El ancho y el alto de las imágenes ya habían quedado definidas en la regla que analizamos primero. Los números que tienen el background-position salen de observar el sprite y ver donde empiezan y donde termina cada una de las imágenes que lo componen. La coordenada (0,0) de la imagen es la esquina superior izquierda. Si se usan números negativos para indicar la posición del fondo  quiere decir que se selecciona hacia la derecha y si son positivos, hacia la izquierda. Por ejemplo, el ícono de YouTube es el segundo del sprite y aparece a partir del píxel 48, como se selecciona hacia la derecha de la coordenada 0, se le pone el signo menos adelante.

Tal vez piensen que hacia la izquierda no hay nada. En realidad la imagen se repite a continuación de sí misma hacia los dos lados, a menos que le agreguemos a la regla #mentes-social a la propiedad background-repeat: no-repeat. De esta manera la imagen de fondo aparecerá una sola vez y la única forma de seleccionar correctamente los íconos será utilizando esos números que pusimos.

Conclusiones

La técnica de sprites es bastante fácil de utilizar. Se necesita conocer nada más que HTML y CSS. Con apenas unas líneas se logra el resultado deseado. Hay algo de diseño en el medio, hay que saber cortar y pegar imágenes con algún software de diseño, pero nada avanzado.

Como programador web, subestimé durante mucho tiempo esta técnica hasta que fui testigo de lo que producen: webs más rápidas, lo que a su vez genera una mejora en el posicionamiento de los sitios. Desde entonces, paso tiempo repasando viejos proyectos y construyendo sprites donde en su momento decidí omitirlos. Aún me quedan varios para hacer, pero a su debido tiempo, completaré la tarea.

Si van a comenzar un sitio web desde cero, no piensen en los sprites como un lujo o algo que hace perder tiempo. Al contrario, inclúyanlo en sus proyectos de entrada.

Utilicen sprites y verán los resultados.

Soy programador web y me desempeño como Líder Técnico y de Proyectos en Polar Bear Development. Trabajo con tecnologías como PHP, Javascript, MySQL y HTML5 para el desarrollo de sitios y sistemas web. Me especializo en Zend Framework 2 y otros frameworks MVC, como también en WordPress y otros CMS. Lidero equipos de desarrolladores trabajando con Scrum. Vivo en Buenos Aires, Argentina.
 

2 thoughts on “Técnica de sprites con CSS

  1. A mí me da la sensación de que en algunos casos lo último que carga es el sprite de imágenes, por lo que se hace un poco molesto esperar a que carguen todas las imágenes, que aparecen de golpe. De todas formas es una técnica que siempre intento utilizar y en general con buenos resultados, aunque es tedioso cuando el sprite es muy grande!
    muy buen post! un saludo!

  2. La idea es que el sprite no tenga demasiado mayor tamaño que todas las imágenes juntas. Pero siempre es recomendable incluirlos porque se minimizan las peticiones al servidor para ir a buscar las imágenes, especialmente las más pequeñas.

    ¡Gracias por tu comentario!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*