CSS sprites tutorial y ventajas

Vamos a hablar de los CSS Sprites, primeramente ¿que son? pues una técnica para reducir peticiones al servidor y mejorar así la velocidad de carga de nuestro sitio.

Se utiliza normalmente para agrupar imagenes pequeñas: iconos de 16×16, logos, botones, flechas… todo el material que se repite durante la navegacion y de pequeño tamaño.

Con CSS Sprites lo que haremos será agruparlos en una sola imagen y utilizar el parametro background-position para mostrar cada imagen de forma individual.

CSS Sprite de ejemplo:

El código CSS que deberíamos utilizar sería del estilo de:

 #sprite {background: #fff url(‘images/sprite.png’) no-repeat;}
 .imagen_1 {background-position: -9px -153px !important;}
 .imagen_2 {background-position: -9px -45px !important;}
 .imagen_3 {background-position: -9px -81px !important;}
 

Algunas herramientas que nos facilitarán generar nuestros propios CSS Sprites:

Por supuesto puedes hacerlo por tu propia cuenta con un poco de photoshop, contando pixels y algo de paciencia :)

4 comentarios
  1. Marcos
    Marcos Dice:

    Los CSS sprites son muy utiles para webs que utilizan bastantes imagenes, sobre todo de tamaño pequeño que obligan al servidor a hacer más peticiones de las necesarias. No se donde lei que las peticiones no deberían sobrepasar de 50. Utilizad firebug o el debug de chrome para verlo.

  2. leiva
    leiva Dice:

    los css sprites, como dijeron antes, generalmente se usan para optimizar tiempos de carga en sitios grandes cuando los servidores han llegado a los limites de ancho de banda permitidos.

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir!

Deja una respuesta

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