Crear CSS sprites

Sabemos que una de las mejores para optimizar una página web es reducir las peticiones que hace al servidor, crear un sprite de imágenes es una de las opciones a las que se esta recurriendo últimamente para reducir esto. Cuando hablamos de crear un sprite de imágenes estamos hablando de unirlas todas en una única imagen de forma que solo tengamos que realizar una petición, el problema viene después, ¿cómo mostramos cada una de las imágenes si las tenemos todas juntas? CSS nos da una solución a este problema, se trata de propiedad background-position junto con height y width, podremos ir indicarle la posición y después la altura y el ancho que queremos abarcar con height y width.

Aunque el rendimiento de la web mejora considerablemente hacer esto lleva mucho tiempo por lo que en muchas ocasiones no compensa, ahora gracias a la página web CSS Sprites podrás facilitar mucho esta tarea, solo tendremos que seleccionar las imágenes que queremos unir y después el programa automáticamente nos indica su posición y sus medidas en CSS.

CSS sprites

Aunque no lo creáis esta técnica viene ya de hace unos cuantos años de los juegos en 2D donde se usaban los sprites de imágenes del personaje para generar los movimientos.

Puedes hacer para continuar leyendo o ¡Puedes dejar un comentario en respuesta al artículo aquí!


Frobee – Crear slide de imágenes
Frobee – Crear slide de imágenes
Crear fichero .htaccess de forma sencilla.
Crear fichero .htaccess de forma sencilla.
Script para crear un hosting de imágenes
Script para crear un hosting de imágenes


Artículos relacionados

Plugins para crear una tienda virtual en tu WordPress
Plugins para crear una tienda virtual en tu WordPress
Crear efecto Matrix con 9 iPhones
Crear efecto Matrix con 9 iPhones
Crear efectos y animaciones en Flash online
Crear efectos y animaciones en Flash online
Debianpackagemaker, Un simple y sencillo creador de paquetes .deb (Debian)
Debianpackagemaker, Un simple y sencillo creador de paquetes...