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

¿Necesitas contratar un hosting para tu web?
En SiteGround tienes disponible una amplia oferta de hostings para todo tipo de bolsillos y necesidades. Encuentra el hosting que estás buscando al mejor precio, con las últimas tecnologías en velocidad y seguridad web y soporte en español 24h:
HostingHosting WordPress

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 ›

Deja un comentario

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