CSS Sprites – School ~ CosasParaMiBlogs

Ahora que parece queBlogger se preocupa por la velocidad de carga de nuestros blogs y quediversas noticias indican que estefactor va a ser determinante en el posicionamiento de todas las web, quizás sea especialmente interesante conocer esta técnica que sirve para aligerar la carga de una página.

Elorigen de los sprites está en los videojuegos. Con ellos, a partir de unos gráficos maestros y una serie de instrucciones, se consigue irdibujando los distintos elementos animados de un juego.

Por extensión, losCSS sprites son un conjunto de imágenes contenidas a su vez dentro de una sola y que mediante CSS podemos mostrar individualmente.

El de la derecha es elsprite que el archi-conocido buscador Google utiliza actualmente para sus páginas de resultados. Creo que podeis reconocer fácilmente los distintos elementos gráficos que componen una de esas páginas.

La imagen de la izquierda es una captura del pie de página. Si accedeis a una página real y vais seleccionando las distintas letras de la palabra Goooooooooogle, así como la flecha azul, podreis comprobar que no es una sola imagen, sino varias montadas una al lado de la otra.

La idea es la siguiente:

- tenemos una sola imagen con todos los gráficos que necesitamos
- allí dónde queramos mostrar una de las imágenes (o un trozo cualquiera del conjunto), creamos una capa con determinadoID
- mediante CSS asignamos a cadaID un ancho y alto concreto e igual al tamaño de la imagen a mostrar
- como fondo de todas las capas creadas para este fin, usamos la misma imagen... la que contiene todos los gráficos
- mediantebackground-position desplazamos el fondo para que se vea el trozo que necesitamos

Esto se puede utilizar tanto para las imágenes principales que forman la estructura del blog como para pequeños elementos que utizamos repetitivamente.

VENTAJAS

Las solicitudes son las peticiones que un navegador hace a un servidor para obtener los datos necesarios para ir montando una página. Cuando el HTML ordena visualizar el texto de una entrada, se produce una petición y por tanto una solicitud. Adicionalmente, si la entrada contiene una imagen, se realiza otra petición/solicitud para obtener esa imagen, ya que esta tiene su propia dirección y por tanto es un ente independiente. Cada imagen más que haya, cualquier llamada a un script, a un archivo flash, etc. se corresponde con una nueva solicitud y así hasta completar la página.

Cada solicitud, además de los datos propios del contenido que se quiere mostrar, incluye otros necesarios para el transporte y control de los propios datos. Por tanto, no ocupa los mismos recursos hacer una solicitud que hacer siete, a pesar de que la suma de contenidos sea la misma.

Imaginemos siete imágenes con sus respectivas conexión-datos de control-contenido-desconexión frente a una sola imagen con lo mismo. Los datos de contenido podrían ser más o menos equivalentes, pero los demás se reducirían divididos casi por siete.

Sobre esto, los datos de los contenidos podría pensarse que son más pesados en una imagen maestra -mucho más grande- que en siete individuales -más pequeñas-, pero esto ni es siempre así ni es relevante el posible incremento. Sólo hice una prueba, pero en ella, ocho imágenes individuales de 200x40 px pesaban un total 25,07KB, mientras que un solosprite con las mismas imágenes de 800x80 (4x2) con las mismas ocho imágenes, pesaba tan sólo 13,10KB.

Además, podemos optimizar nuestrosprite ajustando los espacios vacíos y utilizando imágenes que podrían dar lugar a diversas imágenes dependiendo del trozo que cojamos. No es un ejemplo fácil de aplicar, pero de las siguientes imágenes, la de la izquierda podría servir perfectamente para mostrar todas las fechas posibles con una tipografía especial, con imágenes y sin utilizar otro tipo de aplicaciones. Sin embargo, con algo más de programación, pero la de la derecha también podría servir. La primera ocupa 28,19KB y la segunda 8,38KB. Es cuestión de ir valorando si merece la pena teclear más código para reducir la carga de imágenes.

Conviene no ajustar demasiado los espacios vacíos, por si posteriormente necesitamos añadir algún gráfico más y, sobre todo, alojar la imagen correspondiente dónde podamos cambiarla sin que varíe su dirección. De lo contrario, cualquier modificación nos obligaría a modificar todas las direcciones de los correspondientesbackgrounds.

En botones es dónde mejor se puede apreciar la diferencia. Unrollover con JavaScript produce una doble petición al servidor (onmouseover,onmouseout), una para cada imagen, además de que toma su tiempo cargar la segunda con eldesagradable efecto de no visualizarse hasta pasados unos instantes. Por otra parte, no se necesitan solicitudes adicionales para realizar efectoshover,active ofocus, porque la imagen estará cargada desde el principio.

Más adelante veremos cómo se hace en la práctica todo esto.

Por cierto que, sin querer, me ha quedado un curioso efecto óptico ¿No parecen más grandes las letras y dígitos de la derecha que los de la izquierda? Pues son exactamente iguales.

Actualización: Sobre esto último, no os molesteis siquiera en comprobarlo. Las imágenes se redimensionaron automáticamente y realmente la de la izquierda es más pequeña de lo que debería en este post :D

CosasParaMiBlogs

miércoles, 14 de abril de 2010

CSS Sprites – School

Popular Posts

Blogger news

Labels

Blog Archive