en CSS, Performance

CSS Sprites. Mejora el rendimiento de tu web (I)

Con este artículo empezaremos una serie de posts que tratarán de diversas técnicas y consejos que podemos seguir para mejorar el rendimiento y los tiempos de carga de nuestra página web. Y es que el rendimiento de una aplicación web no sólo depende de la programación del lado del servidor, si no también del marcado, el uso que hagamos de hojas de estilo, de imágenes, de nuestra programación javascript… Todos ellos campos que afectan directamente al desarrollador web en su faceta de maquetador/diseñador.

Hoy empezaremos desarrollando una técnica CSS muy sencilla y efectiva: Los CSS Sprites.

La problemática.

Una de nuestras máximas prioridades a la hora de optimizar nuestra aplicación web debe ser reducir las peticiones que ésta hará al servidor una vez el HTML se haya cargado en el navegador del cliente. Cada archivo de hoja de estilos, cada archivo Javascript, cada imagen… cada elemento externo en definitiva, se solicita de forma separada y aumenta por tanto la transferencia y el tiempo de carga, esto resulta obvio. Lo que no resulta tan evidente es que ese aumento no es proporcional a la suma del tamaño de los archivos externos, es decir, la carga de 10 elementos de 5 KB no es igual de rápida que la de un elemento de 50 KB.

Además de sumar los tiempos de transferencia para cada archivo, deberemos sumar por un lado el tiempo que tarda en realizarse la propia conexión+petición+respuesta y el tamaño correspondiente a las cabeceras del archivo. Recordemos, en relación a las cabecera, que éstas se adjuntan a cada petición al servidor y que si, además, nuestra aplicación usa cookies, éstas también se adjuntarán a cabeceras para cada archivo. Podría darse el caso, por ejemplo en un archivo de imagen pequeño, en qué el tamaño de las cabeceras + cookies ¡superara al tamaño del propio archivo!

La solución.

Este sería un claro ejemplo de una técnica antigua retomada para solucionar un problema moderno. Y es que para encontrar el origen de los CSS Sprites debemos mirar atrás hacia los antiguos juegos en 2D ( o los actuales juegos para móviles ), que usaban los “sprites” para las animaciones de sus personajes u otros elementos del juego.

37249-34955.jpg

Como ves, los sprites no eran más que imágenes que contenían a su vez varias imágenes pequeñas, que en el caso de los videojuegos se utilizaban para recrear una animación. En nuestro caso, la solución a las múltiples peticiones para imágenes en nuestras hojas de estilo pasará por el uso de imágenes grandes que contengan a su vez varias imágenes más pequeñas. De esta forma, para mostrar diversos fondos o varios iconos, estaremos realizando una única petición al servidor, con el correspondiente ahorro en tiempo de carga y transferencia.

Implementación.


El “truco” en esta técnica está en el uso correcto del posicionamiento de backgrounds para mostrar sólo aquella parte de la imagen que nos interesa
. Pongamos como ejemplo un menú, en el que queremos mostrar un icono diferente por cada opción.

Nuestro HTML podría ser algo parecido a:


<ul>
<li class="option1">Opción 1</li>
<li class="option2">Opción 2</li>
<li class="option3">Opción 3</li>
</ul>

y para el CSS usaríamos


.option1, .option2, .option3 { padding-left:20px; }
.option1 { background:url(iconos.png) 0 0 no-repeat;
.option2 { background:url(iconos.png) 0 -30px no-repeat;
.option3 { background:url(iconos.png) 0 -60px no-repeat;

Como verás, hemos jugado con el posicionamiento vertical de la imagen para mostrar sólo aquella parte de la misma que nos interesa, la que contiene el icono en cuestión:

37249-34957.jpg               37249-34969.jpg

A partir de aquí podemos aplicar esta técnica de trabajo a muchos otros casos, ya no sólo iconos, sino fondos de imagen, pestañas, u otros elementos gráficos de interfaz.

Es fácil hacerse una idea del ahorro conexiones que podemos conseguir: una página con 20 iconos y 3 fondos de imagen diferentes para distintos contenedores pasaría de 23 peticiones de imágenes desde las CSS a sólo 2: una imagen conteniendo todos los iconos y otra conteniendo los fondos.

Más información.

  • […]br /> Yahoo – AOL Mas Información aquí Tags: CSS, Diseño, sprites Categorias: CSS[…]

  • Hola. Veo q sabes mucho de sprites y demas… disculpa el Spam pero me gustaria invitarte a nuestro foro http://timesprites.zzl.org Espero q t des una vuelta por ahi y si t interesa, t quedes. Gracias por tu atencion y sigue asi n-n

  • muy buen post, de mucha ayuda!

  • […]blog/app/uploads/sites/7/2009/07/rounded_corner.png” alt=”Imagen Final” width=”12″ height=”12″ /> ahora utilizando una técnica llamada sprites, la cual consiste en posicionar correctamente los backgrounds de la imagenes y un poco de CSS para ordenar los divs tendremos una caja contenedora con esquinas redondeadas, a continuación el CSS #box { margin: 0 auto; width:200px; } .corner_left, .corner_right { height:6px; width:6px; } .center { height:5px; width:188px; float:left; } #to[…]

  • […]avegadores de internet más usados como Interner Explorer y Firefox y tal vez con Chrome y Safari. Aquí también se puede considerar el uso de CSS Sprites. Programación del lado del servidor (Backend), algo muy recomendable para esta parte es el uso de la arquitectura MVC (Modelo Vista Controlador), lo cual se nos facilita con el uso de frameworks como por ejemplo: Rub[…]

  • disculpa pero quisiera saber si hay forma de crear un conjunto de imagenes (sprite) para usarlo como fondo  en el blog,?? (todas las imagenes q componen el fondo de mi blog..

  • http://www.goomanias.com/
    Aquí puedes cambiar el logo de Google por tu nombre o frase que quieras y si lo
    deseas puedes bloquear la pornografia pensando en tus niños seleccionando la opción 1.
    Disfrútalo y si piensas que es importante comentaselo a tus amigos que tambien tienen niños en casa.

  • chancho

    Bien cabro, bien ..

  • muy buen aporte, gracias por compartirlo

  • Hola! he echo una pagina web http://www.yoxtu.com y ahora estoy implementando los sprites, y la verdad antes no lo conocia, gracias a la herramienta de speed page, igualente ahor an dia se esta empesando a usar los Data URI, son mas rapidos el problema que no los suporta todos los navegadores solo las ultimas versiones que son:

    Firefox 2+
    Opera 7.2+ (no más de 4.100 caracteres)
    Chrome
    Safari
    Internet Explorer 8+ (menor de 32 KB)

    pueden buscar mas info en google sobre los Data URI

  • muy buen aporte! Fácil, sencillo y muy bien explicado

    Te felicito por la web 🙂

  • Gran aporte para reducir las imagenes que tantos quebraderos de cabeza nos dan al intentar mejorar el tiempo de carga de nuestras webs.

    Un saludo