Cómo crear Sprites CSS de forma rápida y muy sencilla

Si te interesa comparte ! Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

El uso de sprites CSS  permite reducir el tiempo de carga de páginas web que contengan varias imágenes, ya que mediante esta técnica es posible agrupar las correspondientes a iconos de redes sociales, botones, elementos decorativos, etc. en una sola imagen que será la única que deba ser descargada, evitándose con ello la necesidad de realizar una petición al servidor web por cada una de ellas.

Sin embargo, la creación manual de estos sprites suele requerir de una cierta cantidad de tiempo y su elaboración resulta algo engorrosa.

Por suerte existen varias herramientas que nos facilitan esta tarea, si bien de entre las que he probado la que más me ha convencido debido a su simplicidad ha sido la pequeña aplicación web de Instant Sprite, la cual no requiere de registro previo para ser utilizada.

Su uso es bien sencillo, debiendo primeramente seleccionar las imágenes que deseamos agrupar haciendo clic en Select multiple image files:

Seleccionar imágenes

En nuestro ejemplo usaremos las siguientes imágenes:

Iconos

Una vez cargadas indicaremos el número de píxels de separación entre ellas, así como si deben agruparse en horizontal o vertical (lo más común) o bien en diagonal, además del tipo de archivo de imagen final que deseamos obtener:

Opciones

Tras seleccionar dichas opciones haremos clic con el botón derecho sobre la imagen de la sección Sprite (que en este punto es una sola) y la guardaremos con el nombre de sprite.png.

A continuación copiaremos el código CSS y el HTML necesario para visualizar las imágenes individuales y lo pegaremos en nuestra página:

Código CSS y HTML

¿Mejor verlo con un ejemplo completo, no?:

Ejemplo con sprites CSS

Al cargar la página en nuestro navegador web veremos que las imágenes quedan una debajo de la otra:

Página con sprites

Por supuesto, será posible colocar cada una de estas imágenes en la posición que deseemos de la página. En el siguiente ejemplo hemos modificado un poco el código CSS de dos de ellas para posicionarlas de forma absoluta:

Otro ejemplo

Una vez guardados los cambios, al recargar la página los veríamos distribuidos del siguiente modo:

Página con sprites

Como puedes ver, utilizando esta herramienta podrás ahorrar bastante tiempo en la generación de sprites CSS y en su inserción en nuestras páginas web.

Si necesitas aprender más sobre CSS quizás te resulte de interés nuestro tutorial.

Si te interesa comparte ! Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn
*** Escribe tu correo electrónico para recibir nuestras novedades ***
[ haz click aquísi aún no has visto nuestros cursos de informática gratis

Deja un comentario

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

*