En el desarrollo web, uno de los puntos más importantes a tener en cuenta a la hora de evaluar la calidad del trabajo es la optimización del peso de la web. De ello dependerá el tiempo de carga de la misma. Es por ello por lo que se utilizan técnicas de optimización de tiempo de carga, y una de ellas son los Sprites CSS.
Pero antes de contaros su aplicación en la web, voy a contaros sobre su uso en videojuegos. Un sprite es una imagen donde están incluidos todos los movimientos del objeto en cuestión. Si observáis la siguiente imagen, veréis que incluye todos los movimientos de Sonic. Utilizando una máscara y cambiando la posición de la misma sobre el sprite en cuestión, dará entonces la sensación de movimiento.
Sprite de Sonic
Os invito a visitar la siguiente web, donde podréis encontrar multitud de sprites de videojuegos muy conocidos. http://spritedatabase.net/
Sprites CSS
Ahora si, ¿cómo aplicamos esta técnica a la web?
La idea es la misma, es agrupar todas las imágenes/iconos de la web, en una sola. De esta forma, en una sola petición web, tendremos a nuestra disposición todas las imágenes de la web. Es mucho más óptimo hacer una petición de una imagen un poco mas pesada, que hacer una por imagen. Y si, es una técnica utilizada por los más grandes como podéis ver a continuación.
Este sprite es utilizado por Amazon, y como podéis ver contiene muchas de las imágenes que utiliza como logotipos, iconos, carrito de la compra,…
Como os podréis imaginar, esta técnica se utiliza normalmente para imágenes estáticas pequeñas, logos, iconos,… pero sería inviable hacerlo para una galería de imágenes donde la calidad tuviera que ser grande. Una vez tenemos nuestro sprite, utilizando técnicas CSS y ajustando algunas propiedades, podremos mostrar una imagen u otra.
Crea tu propio Sprite
Vamos a ver como podríamos crear nuestro propio sprite para utilizar en nuestra web. Tenemos varias opciones, una podría ser utilizar cualquier herramienta de diseño, añadir las imágenes manualmente, calcular su posición y crear nuestro CSS a mano… Pero claro, como ya sabéis, ya existen herramientas para todo y por supuesto hay varias que ya hacen ese trabajo por ti.
Os presentamos CSS Sprite Generator (https://spritegen.website-performance.org/), una herramienta web donde podremos crear nuestro sprite y nos devolverá el CSS ya listo para copiar y pegar en nuestra web. Vamos a crear un sprite de Surática, y veremos su comportamiento. Basta con arrastrar todas las imágenes que queramos y nos irá generando tanto la imagen como el css listo para usar.
Aquí tendríamos una pequeña muestra de lo que podría ser, incluyendo logo, iconografía,…
El CSS generado sería el siguiente:
.sprite {
background-image: url(spritesheet.png);
background-repeat: no-repeat;
display: block;
}
.sprite-aplicaciones-m_viles {
width: 100px;
height: 100px;
background-position: -5px -5px;
}
.sprite-marketing-online {
width: 100px;
height: 100px;
background-position: -115px -5px;
}
.sprite-monument-icon {
width: 48px;
height: 48px;
background-position: -5px -115px;
}
.sprite-pin-_1_ {
width: 64px;
height: 64px;
background-position: -63px -115px;
}
.sprite-suratica-logo-square {
width: 150px;
height: 129px;
background-position: -225px -5px;
}
Si observamos el código CSS generado, lo que hace es crear una clase general, donde incluye la imagen de fondo y alguna propiedad mas. Y luego lo que hace es generar una clase por cada imagen… cambiando tan solo el width, height y background-position. El efecto sería el siguiente para el caso de .sprite-monument-icon:
Y lo siguiente, sería el HTML y como usarlo:
<i class="sprite sprite-aplicaciones-m_viles"></i> <i class="sprite sprite-marketing-online"></i> <i class="sprite sprite-monument-icon"></i> <i class="sprite sprite-pin-_1_"></i> <i class="sprite sprite-suratica-logo-square"></i>
De esta forma, si queremos usar una imagen basta con aplicar la clase general (sprite) y la clase de la imagen que queramos (sprite-monument-icon).
Así que ya sabéis, ¡a optimizar vuestra web!
Imágenes extraídas de:
https://ya-webdesign.com/image/bird-sprite-png/852160.html
http://spritedatabase.net/
