CSS Sprites
CSS Sprites es una técnica que se utiliza para optimizar la carga de imágenes en tu Web.
Simplemente se trata de una antigua técnica que al comienzo fue utilizada por los desarrolladores de videojuegos, y que principalmente consiste en utilizar una sola imagen compuesta por varias y que haciendo uso de las propiedades background-position de CSS se visualice cada imagen de forma individual.
¿No se entiende muy bien? No hay problema, vamos con una empresa que seguramente conoces y que los utiliza desde hace mucho tiempo, Google. Si realizas cualquier búsqueda en Google verás que se muestran varias imágenes, por ejemplo en la paginación de resultados, lo que muchos no se dan cuenta es que detrás de todas estas imágenes se encuentra solo un archivo y no un archivo por imagen.
Esto acelera significativamente la descarga, y todos sabemos lo rápido que es Google.
La utilización de la técnica de CSS Sprites tiene principalmente dos ventajas: por un lado tendremos más velocidad en la descarga y renderizado de nuestro sitio web por parte de los navegadores y por otro lado tendremos una significativa reducción de consumo de recursos del servidor.
Dos claras ventajas y que son mas que suficientes para que amerite aprender un poquito mas sobre esta técnica.
Vamos a ver un ejemplo donde seguramente quedará más claro como y para que se utiliza esta técnica. Imaginemos que queremos introducir estas 4 imágenes en nuestra Web.
Para utilizar esta técnica, lo primero que necesitamos es generar un único archivo que contenga las 4 imágenes, en este caso los iconos sociales, y aunque lo podemos hacer de forma manual, para estos casos se recomienda utilizar el sitio csssprites que por un lado nos pide que subamos las imágenes y por otro lado nos genera la imagen resultado junto con el código CSS necesario para mostrarlas de forma individual.
El archivo generado puede elegirlo entre los formatos png y gif. En la imagen se puede ver que todas las imágenes quedan con cierto orden, esto esta diseñado principalmente para que luego su posicionamiento con la propiedad background-position sea mas simple.
Ahora solo falta colocar el nuevo CSS, el código HTML es idéntico y no tiene absolutamente ninguna diferencia con el anterior que no utilizaba los sprites.
<style type="text/css">
.facebook {
background: url('images/social.png');
background-position: -0px -0px;
width: 32px;
height: 32px;
float: left;
}
.twitter {
background: url('images/social.png');
background-position: -42px -0px;
width: 32px;
height: 32px;
float: left;
}
.youtube {
background: url('images/social.png');
background-position: -84px -0px;
width: 32px;
height: 32px;
float: left;
}
.gplus {
background: url('images/social.png');
background-position: -126px -0px;
width: 32px;
height: 32px;
float: left;
}
</style>
Y dentro del <body>:
<div class="facebook"> </div> <div class="twitter"> </div> <div class="youtube"> </div> <div class="gplus"> </div>
En el código CSS esta todo el asunto, al utilizar una sola imagen lo único que tenemos que hacer es ir jugando con la posición de fondo para mostrar cada imagen de forma individual. Es bastante fácil de aplicar, quizás comprenderlo lleva un poquito de mas tiempo al principio pero cuando lo hagan la primera vez entenderán de inmediato como funciona.
Autor
¿Buscas trabajo de programador?
Una respuesta a “CSS Sprites”
Deja una respuesta
54 artículos que te podrían interesar
Ver más sobre
We wish to thank you yet again for the beautiful ideas you gave Jesse when preparing a post-graduate research and also, most importantly, with regard to providing every one of the ideas within a blog post. In case we had known of your web site a year ago, we will have been saved the nonessential measures we were choosing. Thank you very much.