CSS Sprites

1083339_97489970El tamaño de las páginas web es un aspecto fundamental a tener en cuenta cuando creamos una web, puede repercutirnos con grandes cantidades de visitantes perdidos debido a la lenta carga por la gran candidad de scripts, imágenes y tamaño de estas. Cuanto más rápido cargue nuestra web más contentos tendremos a nuestros visitantes.

Una de las formas con las que podremos ahorrar archivos y tamaño en las imágenes es usando CSS Sprites, que consiste en tener varias imágenes en una sola, de forma que en vez de tener 50 imágenes a 3 kb  cada una de los iconos de nuestra web, tendremos una con una parrilla de iconos que pesa 10 kb, de esta forma reducimos considerablemente el tamaño de carga de imágenes y la cantidad de imágenes cargadas.

Lo que haremos será mostrar solo la parte de la imágen que deseemos, y en la web se verá como si de una imágen única se tratase.

Veamos un ejemplo de su utilización, para que quede más claro.

Para el ejemplo utilizaré Bootstrap, con una plantilla de serie que sería la siguiente.

spritesEn el menú, queremos mostrar los iconos correspondientes al lado del texto. Para ello utilizaremos la siguiente imágen que utilizaremos.

glyphicons-halflings

Empezamos editando el HTML, creando un div para nuestro icono al lado del texto de Home.

<ul class="nav">
                <li class="active"><a href="#"><div class="icon-home"></div>Home</a></li>
                <li><a href="#">Projects</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Downloads</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
</ul>

El div con la clase “icon-home” será el que mediante CSS mostraremos el icono del Home.

El el archivo CSS de nuestra página, crearemos la siguiente regla para la clase icon-home:

  display: inline-block;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  *margin-right: .3em;
  line-height: 14px;
  vertical-align: text-top;
  background-image: url("../img/glyphicons-halflings.png");
  background-position: 0 -24px;
  background-repeat: no-repeat;

En el ancho y alto le indicamos el tamaño que tiene el trozo de imágen que queremos mostrar de nuestra parrilla de iconos. El background-image indica el archivo que tiene que cargar, y el background-position es a partir de donde empezará a contar el alto y ancho de nuestra imágen.

Y el resultado será el siguiente:

sprites2Ahora os preguntaréis, ¿y tengo que crear todo ése CSS para cada icono que tenga? Pues no, podréis ahorrar código y tiempo estableciendo la clase icon con todos los parámetros menos el background-position, y en otra clase, como por ejemplo home establecéis estos valores, de tal forma que al icono del Home le llamaríamos a la clase “icon home” (sin el guión que he utilizado en el ejemplo, porque estamos utilizando dos clases).

Y así añadiremos todos los “background-position” de los iconos de nuestra parrilla de iconos.

¿Te ha gustado? Compártelo y Comenta! Puedes darme tu opinión o consultar tus dudas, de esta forma mantendremos la blogosfera viva.

    Deja un comentario

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


    *

    © 2018 Soy Autodidacta | Design Theme by: D5 Creation | Powered by: WordPress