Linwind

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.

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.