css-sprites-cover

CSS Sprites, pequeño gran truco para mejorar la velocidad de carga

Adoramedia
Menú

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.

zoom CSS Sprites

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.

css sprites editado photoshop

:: 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;} 
Compartir

Tu comentario

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

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de privacidad y protección de datos, pinche en el enlace para más información. ACEPTAR

Aviso de cookies