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

Packs de recursos a precios increíbles
Aprovecha la ocasión y hazte con alguno de estos packs con recursos de calidad para profesionales, ahora a precios muy rebajados:
Pack rebajado un 99%1000 fotos rebajadas un 64%

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