Remontémonos a 1985 y visualicemos a Super Mario iniciando su carrera para conseguir la seta. Esa animación en 2D del personaje estaba realizada en “sprites”, una técnica que sirvió de inspiración para que los diseñadores y desarrolladores Web de principios del siglo XXI buscasen alternativas en los efectos onmouseover y onmouseout. A día de hoy, supone un requisito casi indispensable capaz de mejorar el rendimiento de las páginas web.
Este rendimiento, en muchas ocasiones viene determinado por el tiempo de carga de la Web. Mediante la reducción del número de peticiones que se hacen al servidor es posible optimizar la velocidad de carga del site, ya que cada uno de los elementos externos que configuran su funcionamiento (hojas de estilo CSS, archivos Javascript, imágenes en .jpg, .png o.gif, etc) solicitan su carga por separado, siendo procesadas en varias transferencias.
10 elementos de 3kb = (conexión + petición + respuesta) x 4
1 elemento de 30kb = (conexión + peitción + respuesta) x 1
David Shea promulgó el concepto de CSS Sprites, en el cual se combinan varias imágenes de tamaño reducido en una sola, para que posteriormente se aplique la regla CSS background-position, que permite encuadrar una imagen de fondo mostrando tan solo aquello que queremos que sea visible.
Una vez explicado el concepto, pasemos a la práctica para aprovechar este “truco” en nuestra Web:
:: CREACIÓN DE IMAGEN
Creamos la imagen contenedora en nuestro editor de imágenes particular (por antonomasia Photoshop) o a través de plataformas online como CSS Sprite Generator o Sprite Box.
:: UBICAR ARCHIVO
Colocamos el archivo creado en nuestro servidor FTP para que exista un referente que pueda ser enlazado desde la hoja de estilos.
:: ESCRIBIR CÓDIGO
Creamos un contenedor genérico para la imagen, atribuyéndole una clase o id. Relacionamos el código HTML con los estilos CSS y delimitamos la posición de la imagen, tal que así:
#contenedor a{ background-image: url('img/iconos-sprite.png') no-repeat; text-indent: -9999px; height: 16px; width:16px; display: block; float: left; padding-left: 5px; }
Código HTML básico
<div id="contenedor"> <a class="icono-twitter" href="http://twitter.com/bitmarketing">Twitter</a> <a class="icono-facebook" href="http://www.facebook.com/bitmarketing">Facebook</a> <a class="icono-pinterest" href="http://pinterest.com/bitmarketing/">Pinterest</a> </div>
Código CSS básico
#contenedor a.icono-twitter{background-position: -32px 0px;} #contenedor a.icono-facebook{background-position: -54px 0px;} #contenedor a.icono-pinterest{background-position: -78px 0px;}