Background Sprites con CSS

sprites con css

Background Sprites con CSS

La técnica de los Background Sprites con CSS consiste en tener en una imagen grande, varias imágenes pequeñas que vamos a usar en nuestro sitio Web. Si en una página vinculamos muchos archivos (CSS, JavaScript, imágenes, etc…) la carga de la página será más lenta. Es por ello que esta técnica permite reducir el número de archivos vinculados y por lo tanto el número de peticiones HTTP*, haciendo que las páginas de nuestro sitio web carguen más rápido, ya que una vez descargada la imagen que contiene todas las imágenes pequeñas, ya no se tendrá que descargar ninguna imagen pequeña adicional. Es el mismo concepto que se usa cuando utilizamos imágenes de una fuente como Font Awesome (en un único archivo, la fuente, tenemos múltiples imágenes), con la diferencia que en el caso de la técnica de los sprites las imágenes pueden ser más coloridas. Esta técnica surge con el desarrollo de videojuegos

NOTA(*): en el protocolo HTTP 2.0 el número de peticiones ya no es tan importante para una carga rápida de la página.

La siguiente imagen es un ejemplo que nos servirá para mostrar cómo funciona la técnica de los sprites con css. Tal y como se puede observar, está formada por varias imágenes más pequeñas.

imagen de un sprite

Ejemplo de sprite (sprites.png)

¿Cómo funcionan los sprites con css?

Supongamos que de la imagen anterior (sprites.png) nos interesa usar el icono del ordenador y el del teléfono. Para ello tenemos que crear un par de elementos sin contenido. Lo recomendable es usar un <div> si queremos un elemento en bloque y un <span> si queremos un elemento en línea. En realidad podemos usar cualquier elemento, pero es recomendable usar uno de estos dos ya que no son elementos semánticos.

index.html

[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sprites</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>

<div id="ordenador"></div>

<!— ejemplo de elemento en bloque –>
<span id="movil"></span> <!— ejemplo de elemento en linea –>

</body>
</html>
[/html]

A cada uno de estos elementos le indicaremos un atributo ID, y en el CSS indicaremos que tienen como imagen de fondo la imagen con todos los sprites. Como son elementos que no tendrán contenido, debemos de indicar un ancho y un alto (yo he indicado el tamaño de la imagen), ya que de lo contrario tendrán 0 pixeles de tamaño. En el caso del <span>, al ser un elemento en línea, deberemos de convertirlo a un elemento en línea con propiedades de bloque (display: inline-block) para que las propiedades CSS width y height funcionen correctamente. Para poder trabajar de forma más cómoda, también nos resultará útil indicar un borde que más tarde eliminaremos. Finalmente, añadiremos la propiedad background-position con el valor 0 para la horizontal y el valor 0 para la vertical. Esa será la posición del fondo respecto a la esquina superior izquierda.

main.css

[css]
#ordenador {
background-image: url(../img/sprites.png);
border: 1px solid red;
width: 960px;
height: 715px;
background-position: 0 0;
}

#movil {
background-image: url(../img/sprites.png);
border: 1px solid red;
width: 960px;
height: 715px;
background-position: 0 0;
display: inline-block;
}
[/css]

Una vez cargado el ejemplo nos aparecerá lo siguiente.
sprite cargado en el navegador
Como ya hemos dicho, nos interesa utilizar los sprites con css del ordenador y móvil. Vamos a empezar con el ordenador. Abrimos el Inspector de nuestro navegador y seleccionamos el elemento <div>.

Inspector abierto en el navegador

En el inspector nos aparecerá el código CSS de ese <div>. Situaremos el cursor encima de la primera coordenada (la horizontal) de la propiedad CSS background-position y con la tecla de la flecha hacia abajo, iremos desplazando hacia la izquierda el sprite, hasta colocar el icono del ordenador en el lateral izquierdo.

primera coordenada de background-position

Como vemos el valor obtenido de la coordenada horizontal es -498px.

numero de pixeles de width

Una vez tenemos el icono situado en la esquina superior izquierda, solo no hace falta saber el ancho y el alto para terminar. Nos posicionaremos encima del número de pixeles de width, como se indica en la imagen anterior (circulo en rojo) y con la flecha hacia abajo, iremos disminuyendo el ancho del elemento.

número de pixeles de height

En nuestro caso, lo dejaremos con un ancho de 90px. Haremos lo mismo con la propiedad height hasta conseguir el tamaño de icono deseado.

coordenadas del icono obtenidas

Ahora modificaremos el código CSS con los valores obtenidos (marcados en amarillo en la imagen anterior) y quitamos el borde.

[css]
#ordenador {
background-image: url(../img/sprites.png);
width: 90px;
height: 90px;
background-position: -498px 0px;
}

#movil {
background-image: url(../img/sprites.png);
border: 1px solid red;
width: 960px;
height: 715px;
background-position: 0 0;
display: inline-block;
}
[/css]

Ya tenemos listo el icono del ordenador. Repetiremos el mismo proceso para el icono del móvil.

coordenadas segunda del otro icono

Nos colocaremos en la segunda coordenada (la vertical) de la propiedad background-position, y reduciremos su valor para que la imagen del móvil suba hasta arriba del todo.

coordenada primera del segundo icono

Una vez tengamos el icono del móvil arriba, lo desplazaremos hasta situarlo en la esquina superior izquierda, para ello modificaremos la primera coordenada (la horizontal) de background-position (circulo en rojo).

reducir tamaño con las coordenadas

Una vez tenemos el icono del móvil en la esquina superior izquierda del elemento <span>, tan solo nos falta modificar reducir el tamaño indicado en las propiedades width y height para que el elemento <span> tenga el tamaño adecuado para la imagen del móvil.

propiedad width

La propiedad width la dejaremos en 60px, y la propiedad height, a 95px.

propiedad height

Modificaremos el código de main.css con las posiciones obtenidas y quitamos el borde.

[css]
#ordenador {
background-image: url(../img/sprites.png);
width: 90px;
height: 90px;
background-position: -498px 0px;
}

#movil {
background-image: url(../img/sprites.png);
<strong>      width: 60px;</strong>
<strong>      height: 95px;</strong>
<strong>      background-position: -765px -245px;</strong>
display: inline-block;
}
[/css]

¡Y aquí está el resultado: Sprites con CSS!

iconos definitivos

Todo este proceso tan manual nos permite visibilizar de forma clara el funcionamiento de los sprites con css, pero puede volverse lento y pesado. Si ya conocemos la posición y tamaño de cada imagen pequeña dentro de la imagen grande, el proceso es mucho más rápido. Tan solo hemos de indicar en la propiedad CSS background-position la posición de la imagen pequeña dentro de la grande pero con los valores en negativo, y las propiedades width y height con los tamaños de la imagen pequeña.

Estos valores los podemos averiguar rápidamente con un editor de imágenes como Adobe Photoshop, o con el mismísimo Paint de Windows usando la herramienta seleccionar.

Escribe un comentario