Sprites CSS: qué son, por qué son geniales y cómo usarlos | Programar Plus

Este artículo ha sido revisado y reescrito varias veces desde su primera publicación en 2007, para mantener la información actualizada. Flip Stewart realizó la revisión más reciente en enero de 2015.

¿Qué son los Sprites CSS?

Alerta de spoiler: no son hadas las que escriben tus hojas de estilo por ti. Deseo. En resumen: CSS Sprites es un medio de combinar varias imágenes en un solo archivo de imagen para usar en un sitio web, para ayudar con el rendimiento.

Sprite puede parecer un nombre poco apropiado teniendo en cuenta que estás creando una imagen grande en lugar de trabajar con muchas pequeñas, pero la historia de los sprites, que se remonta a 1975, debería ayudar a aclarar las cosas.

En resumen: el término “sprites” proviene de una técnica en gráficos por computadora, que se usa con mayor frecuencia en los videojuegos. La idea era que la computadora pudiera recuperar un gráfico en la memoria y luego mostrar solo partes de esa imagen a la vez, lo que era más rápido que tener que buscar continuamente nuevas imágenes. El sprite era el gran gráfico combinado.

CSS Sprites es prácticamente la misma teoría: obtén la imagen una vez, muévela y solo muestra partes de ella. Esto reduce la sobrecarga de tener que buscar varias imágenes.

¿Por qué utilizar CSS Sprites?

Puede parecer contradictorio agrupar imágenes más pequeñas en una imagen más grande. ¿No tardarían más en cargarse las imágenes más grandes?

Veamos algunos números en un ejemplo real:

Imagen	Tamaño del archivo	Dimensiones
canada.png	1,95 KB	256 x 128
usa.png	3.74 KB	256 x 135
mexico.png	8,69 KB	256 x 147

Eso suma un total de 14.38KB para cargar las tres imágenes. Poner las tres imágenes en un solo archivo pesa 16,1 KB. El sprite termina siendo 1,72 KB más grande que las tres imágenes separadas. Esta no es una gran diferencia, pero debe haber una buena razón para aceptar este archivo más grande … ¡y la hay!

Si bien el tamaño total de la imagen (a veces) aumenta con los sprites, varias imágenes se cargan con una sola solicitud HTTP. Los navegadores limitan la cantidad de solicitudes simultáneas que puede realizar un sitio y las solicitudes HTTP requieren un poco de protocolo de enlace.

Por lo tanto, los sprites son importantes por las mismas razones por las que la minificación y la concatenación de CSS y JavaScript son importantes.

¿Cómo usas CSS Sprites?

Aquí hay un sprite de ejemplo, con tres banderas de países diferentes combinadas en una sola imagen:

Tu pones lo mismo background-image en varias clases de CSS y establezca la posición de fondo y las dimensiones de las clases individuales para mostrar una sola porción del sprite. Aquí hay un código que demuestra el concepto:

.flags-canada, .flags-mexico, .flags-usa {
  background-image: url('../images/flags.png');
  background-repeat: no-repeat;
}

.flags-canada {
  height: 128px;
  background-position: -5px -5px;
}

.flags-usa {
  height: 135px;
  background-position: -5px -143px;
}

.flags-mexico {
  height: 147px;
  background-position: -5px -288px;
}

Si está pensando que tiene que haber una manera de automatizar esto para que no esté creando manualmente estos sprites y luego ajustando su hoja de estilo para que coincida, tiene razón, ¡y está de suerte!

Genera Sprites con Grunt / Gulp / Node

Si está utilizando Grunt, Gulp o Node en general, css-sprite (ahora llamado sprity) es un maravilloso paquete de nodos que crea sprites a partir de un conjunto de imágenes. Sprity tiene muchas características excelentes, incluido el formato de salida como PNG, JPG (o URI de datos de esos) y la generación de hojas de estilo en CSS, LESS, Sass y Stylus.

Para compilar sprites a través de la línea de comando, instale css-sprite globalmente con:

$ npm install sprity -g

Luego, para generar sprites y la hoja de estilo correspondiente, ejecute:

$ sprity ./output-directory/ ./input-directory/*.png

Para obtener más información sobre el uso de css-sprite con Grunt o Gulp (o muchos otros entornos), diríjase al repositorio del proyecto en GitHub.

Genera Sprites con Compass

La generación de sprites con Compass requiere una configuración y un mantenimiento adicionales, pero si ya está utilizando Compass, se adapta bien a su flujo de trabajo existente.

Comience creando un directorio dentro de su directorio `images` (sí, necesita estar dentro de su directorio` images` para funcionar) con un nombre que corresponda a los sprites que le gustaría crear. Asegúrese de que las imágenes que está convirtiendo a sprites sean PNG y colóquelas en su nuevo directorio. Estoy creando sprites de bandera, así que nombré las banderas de mi directorio y coloqué tres PNG en el directorio.

En un nuevo archivo SCSS que llamé `flags.scss` (el nombre aquí no es importante), las siguientes tres líneas, en orden, importarán las herramientas de creación de sprites de Compass, importarán glob los PNG para convertirlos en sprites ( observe que la ruta aquí no incluye imágenes /), y luego genere el CSS para los sprites. Ten en cuenta que La palabra intermedia de la instrucción @include debe coincidir con el directorio en la línea anterior..

@import "compass/utilities/sprites";
@import "flags/*.png";
@include all-flags-sprites;

Este es un proceso bastante simple para generar sprites, pero tiene algunos inconvenientes / rarezas:

• El CSS generado no incluye anchos ni alturas para los sprites.
• No hay una clase compartida entre los sprites; la imagen de fondo se aplica a cada clase.

Generando Sprites con ImageMagick

ImageMagick se puede utilizar para crear una hoja de sprites desde la línea de comandos con los siguientes comandos:

convert *.png -append sprites.png # append vertically
convert *.png +append sprites.png # append horizontally

Esto tomará todos los archivos PNG seleccionados por el glob y los concatenará en un solo archivo, pero no creará la hoja de estilo correspondiente. Si usa ImageMagick para crear sus sprites, es posible que desee leer la sección a continuación sobre el uso de Sprite Cow.

Usando Sprite Cow con tus Sprites

Sprite Cow es una herramienta alojada para generar una hoja de estilo correspondiente a tus sprites. No crea el sprite por ti, solo te ayuda a obtener los números que necesitas para usar el sprite (el ancho, la altura y la posición de fondo de las partes individuales del sprite). Cuenta con compatibilidad de imágenes 2x y una interfaz simple para designar rápidamente qué áreas del sprite componen cada imagen para crear CSS. Simplemente haga clic en la parte que necesita y le brinda el CSS que necesita.

Genera Sprites con Spritepad

Spritepad es otra solución alojada para crear sprites. Con Spritepad, subes imágenes individuales, las colocas como quieras y el CSS se actualiza en tiempo real. Cuando haya terminado, descargue la imagen y copie el CSS en su proyecto.

Genera Sprites con SpriteMe

SpriteMe es un bookmarklet que genera un objeto basado en lo que encuentra en la página actual. Entonces, esencialmente, desarrollarías sin usar sprites en absoluto, luego usarías esto para hacer sprites juntos al final. Aquí hay un flujo de trabajo que explica cómo funcionaría.

¿Mis sprites deberían ser horizontales o verticales?

Una opción es ninguna. Compactarlos en una cuadrícula, haciendo el tamaño más pequeño, dimensionalmente posible. El tamaño dimensional de una imagen influye en la cantidad de memoria que ocupará la imagen cuando se utilice, por lo que cuanto menos, mejor. Si terminas diseñando tu propio objeto, Sprite Cow es una buena herramienta para ayudarte con la parte de generación de CSS.

Si, por simplicidad, va a elegir uno u otro, una forma de hacerlo es mirar el ancho más grande y la altura más grande de sus archivos de imagen. Si el ancho más grande es mayor que la altura más grande, la hoja de sprites debe colocarse horizontalmente. Si la altura mayor es mayor que el ancho mayor, verticalmente. Si está utilizando una herramienta de generación, generalmente tomarán esta decisión por usted.

En algunas situaciones, puede tener sentido colocar un objeto en diagonal. Esto puede hacer posible el uso de un objeto en un área de ancho y alto desconocidos, lo cual es bastante bueno.

Aunque otra forma posible de evitarlo es utilizando un pseudo elemento.

Alternativas

Hay algunas alternativas a los sprites CSS, pero, como era de esperar, cada una tiene sus propias ventajas e inconvenientes.

URI de datos

Los URI de datos le permiten incrustar los datos de la imagen directamente en una hoja de estilo. Esto evita solicitudes HTTP adicionales de imágenes, por lo que es esencialmente lo mismo que un objeto, sin el posicionamiento elegante.

Fuentes de iconos

Las fuentes Icont son similares a los sprites en que logran lo mismo: combinar varias imágenes en una sola solicitud.

SVG

Las imágenes SVG también se pueden combinar en un objeto y usarse como un sistema de iconos. Sin embargo, es un enfoque ligeramente diferente, que utiliza la sintaxis y las fortalezas de SVG. Sin embargo, es posible que deba pensar en un sistema de respaldo, ya que SVG no tiene un soporte de navegador tan profundo como la imagen de fondo de CSS (que esencialmente no tiene problemas de soporte del navegador).

Grunticon e Iconizr son posibilidades para trabajar con sprites SVG que ayudan con los fallbacks.

Usando y object-position

Robin Rendle tiene una excelente publicación sobre esta ingeniosa técnica aquí.

Ejemplos de

• Mozilla Developer Network utiliza sprites para cambiar entre diferentes estados al alternar su navegación de nivel superior.
  
• Mailchimp usa sprites (imagen de fondo SVG) para la navegación de la barra lateral en varios estados.
  
• Mapbox usa una fuente de íconos para los íconos más pequeños que se usan en todo el sitio, pero usa sprites de resolución bastante alta para las redes sociales y los logotipos de prensa.
  

Otras lecturas

• Sprites de imagen CSS en Mozilla Developer Network
• Sprites CSS con posicionamiento en segundo plano en el blog Treehouse
• Hojas de Sprite CSS: mejores prácticas, herramientas y aplicaciones útiles en Tuts +
• Animaciones de hoja de Sprite CSS con steps() en el Blog Treehouse