Infotectura

Sprites CSS: una técnica más eficiente para mostrar imágenes

30 de Octubre, 2009 Comentar

El uso de sprites CSS es una tecnica común para desplegar gráficas usando CSS de forma eficiente. Nos permiten crear páginas web que cargan más rápido, y por ende ofrecer a nuestros usuarios una mejor experiencia en el web.

En el pasado, los llamados a imágenes desde CSS se hacían usando imágenes individuales. Por ejemplo, cuando un diseñador quería implementar un botón con dos estados (normal y apretado), creaba dos imágenes separadas, una para cada estado. Esto era ineficiente, ya que el browser debía generar un llamado HTTP-Request separado para cada imagen.

Usando sprites, el diseñador crea una sola imagen que contiene ambos estados del botón. Luego, al llamarla desde la hoja de estilo, especifica la ubicación de cada sprite (o sección) de la imagen que quiere utilizar.

Veamos un ejemplo, un encabezado de un portlet generado por jQuery UI:

Cada portlet tiene un un icono que permite expandir o cerrarlo; en el pasado, estos iconos hubieran sido generados como imágenes individuales. jQuery UI incluye muchos otros iconos como parte del interfaz, y es ineficiente crear una imagen para cada uno. Es mucho mejor cargarlos todos desde una misma imagen:

Una vez cargada esta imagen en la memoria del browser, es cuestión de especificar cuál de los iconos se quiere emplear para un DIV u otro elemento del DOM. Esto se hace especificando su posición en el CSS. Por ejemplo:

.ui-icon { width: 16px; height: 16px; background-image: url(imagenes/iconos.png); }
.ui-icon-plusthick { background-position: -32px -128px; }

La primera línea especifica el nombre de la imagen y el tamaño del ícono, y la segunda la ubicación (en pixeles) del icono en la imagen.

Esta técnica reduce considerablemente la cantidad de llamadas que tiene que hacer el browser al servidor, y el resultado final es una experiencia mucho más rápida y fluida. De paso, si quieres experimentar con tus propios sprites, el CSS Sprites Generator es una aplicación en línea que te puede ayudar a generar los archivos necesarios.