Sprites: Mejora la velocidad de carga de tu web

css-sprite

Poco a poco la importancia del tiempo de carga web ha ido aumentado.  Hoy en día Google utiliza nuestro tiempo de carga para decidir en que posición de su ranking nos pone. Por lo que cada vez mas, es un aspecto a tener en cuenta si queremos que nuestra web esté bien vista. De hecho, el tiempo que tarda una web en cargar en nuestro smartphone nos hace ver de una manera u otra una página web.

Una de las cosas que deberíamos tener en cuenta a la hora de reducir nuestro tiempo de carga, es el uso de sprites, dejando de usar un archivo diferente por cada icono o imagen que queramos que aparezca en nuestra web. De esta manera lograremos hacer que nuestro diseño web sea mucho mas ligero, reduciendo las peticiones que se generan en cada visita.

Para crear un sprite fácilmente, os recomiendo usar una herramienta online para creación de sprites , una forma rápida, sencilla y accesible desde cualquier lugar y dispositivo.

Podríamos decir que su uso esta basado en coordenadas, que indican en que sección de la imagen se encuentran y que tamaño tienen, en cada una de las imágenes que hayamos insertado en el sprite. Un ejemplo vale mas que mil palabras, o no era así?

CSS:

#localidad1, #localidad2, #localidad3, #localidad4 {
  padding-left: 38px;
  height: 32px;
  line-height: 32px;
  background-image: url("images/sprite.png");
  background-repeat: no-repeat;
}

#localidad1 {
  background-position: 0 0;
}
#localidad2 {
  background-position: 0 -32px;
}
#localidad3 {
  background-position: 0 -64px;
}
#localidad4 {
  background-position: 0 -96px;
}

HTML:

<h3>Previsiones meteorológicas</h3>
<p id="localidad1">Localidad 1: soleado, máx: 35º, mín: 23º</p>
<p id="localidad2">Localidad 2: nublado, máx: 25º, mín: 13º</p>
<p id="localidad3">Localidad 3: muy nublado, máx: 22º, mín: 10º</p>
<p id="localidad4">Localidad 4: tormentas, máx: 23º, mín: 11º</p>

Más información | Generador de Sprites

Mejora el rendimiento de tu web
Te enseñamos cómo crear tu web con WordPress y cómo conseguir mucho tráfico en poco tiempo:
Crear un blog con WordPressPasa de 0 a 5.000 visitas en tu web

Categorías

CSS

Sergio Ródenas

Con 16 años, autodidacta y con cierta experiencia a la espalda, Sergio Ródenas, conocido en la web como Rodenastyle, es un joven español cuya... Ver perfil ›

Escribe un comentario