Como crear sprites en CSS online

3 de Octubre - en HTML/CSS

Una de las técnicas para la optimización de páginas web más empleada, es el uso de sprites CSS, la cual consiste en la agrupación de imágenes e iconos en un único archivo, y recortarlas mediante código CSS para mostrarlas por separado. En este tutorial veremos la forma más fácil de crear sprites y cómo implementarlos.

Sprite CSS

 

¿Qué es un sprite CSS?

La unificación de varias imágenes en una sola, para su posterior uso solo extrayendo la parte que representa la imagen deseada.

 

¿Qué mejoras aporta?

Cuando una página web se carga y esta contiene en su interfaz pequeñas imágenes como logos e iconos, cada uno de estos representa una petición al servidor para ser descargados y mostrados, cada una de estas descargas tomara tiempo y recursos del servidor, si se unifican todas estas imágenes en un solo archivo elp proceso será mas eficiente.

 

¿Cómo crear un sprite CSS online?

Existen varias herramientas tanto locales como online para generar sprites, en este tutorial utilizaremos una utilidad Online debido a que tiende a ser mas practica al no requerir de la descarga de software adicional y no depende de una plataforma en concreto, además esta herramienta nos permitirá generar el código CSS y HTML necesario para su rápida implementación. 

Para acceder a la utilidad, ingresaremos al siguiente enlace: Generador de sprites CSS

 

Daremos clic en el botón agregar imágenes o las arrastramos y soltamos en la caja punteada:

 sprite CSS

Esperamos a que se carguen y aparezcan en verde:

 Sprite CSS

Damos clic en el botón generar sprite y esperamos a que el proceso termine:

 Sprite CSS

Una vez terminado, aparezca el sprite listo para ser descargado, además, veremos que también se genera el código CSS y l HTML para implementarlo. En esta parte tenemos algunas opciones para la generación de código:

- Nombre de la clase: es el nombre que tendrá la clase principal en la cual se cargara el sprite.

- Nombre de subclases enumeradas: por defecto nombra a las subclases de cada icono con el nombre original del archivo, si queremos que en vez de eso se nombren por la letra “e” seguido del número de elemento marcaremos estas opciones.

- Incluir como base64: en vez de tener que cargar el archivo por separado, convierte la imagen a base64 para incluirla directamente en el código CSS, esto hace aún más eficiente esta técnica (aunque aumenta el peso de la imagen en un 20% por la codificación).

 

El codigo generado

Este primer bloque pertenece a la clase principal, la cual cargara la imagen con los iconos, además de declarar algunas configuración para el contenedor el cual será un <DIV>, en este caso al ser todos los iconos de una tamaño idéntico (64x64 pixeles), se declara el tamaño en la clase primaria, el cual será igual para todas las demás imágenes, en caso de que las imágenes fuesen de distintos tamaños, se ajustarían los tamaños de manera individual.

 

.sprite {
    width: 64px;
    height: 64px;
    margin: 0;
    padding: 0;
    background: url("sprite.png") no-repeat;
}



En los bloques de código siguientes veremos que se declaran subclases para cada uno de los iconos ajustando la posición del sprite, de modo que solo sea visible la parte de la imagen que queremos mostrar.

/* Image alert-icon.png */
.sprite.alert-icon {
    background-position: 0px 0px;
}

/* Image folder-icon.png */
.sprite.folder-icon {
    background-position: 0px -64px;
}

/* Image delete-1-icon.png */
.sprite.delete-1-icon {
    background-position: 0px -128px;
}

/* Image information-icon.png */
.sprite.information-icon {
    background-position: 0px -192px;
}

 

Para mostrar una imagen, solo tendremos que crear un contenedor <DIV>en el archivo HTML, el cual tendra como clase principal a "sprite" seguido de la subclase de la imagen mostrar:

 

<!-- Image alert-icon.png -->
<div class="sprite alert-icon" ></div>

<!-- Image folder-icon.png -->
<div class="sprite folder-icon" ></div>

<!-- Image delete-1-icon.png -->
<div class="sprite delete-1-icon" ></div>

<!-- Image information-icon.png -->
<div class="sprite information-icon" ></div>

 

Resultado final:

 

Sprite CSS

Compartir