El origen de los sprites está en los videojuegos. Con ellos, a partir de unos gráficos maestros y una serie de instrucciones, se consigue ir dibujando los distintos elementos animados de un juego.
Por extensión, los CSS 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 el sprite 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 determinado ID
- mediante CSS asignamos a cada ID 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
- mediante background-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 solo sprite con las mismas imágenes de 800x80 (4x2) con las mismas ocho imágenes, pesaba tan sólo 13,10KB.
Además, podemos optimizar nuestro sprite 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 correspondientes backgrounds.
En botones es dónde mejor se puede apreciar la diferencia. Un rollover 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 el desagradable efecto de no visualizarse hasta pasados unos instantes. Por otra parte, no se necesitan solicitudes adicionales para realizar efectos hover, active o focus, 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
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
En cuatro palabras EX CE LEN TE :D Muy, muy interesante post, de verdad.
ResponderEliminar¡Saludos desde la Luna!
Otro apunte (dejame hacer algo de spam :P) es que hablando de rollovers, depende de cómo lo apliques tardará algunos segundos en efectuarse el cambio a otra imágen o no, puede que sea automático, yo por ejemplo fijándome en rollovers de otras webs/blogs he conseguido que la mascota de mi blog, se mueva al pasar el puntero por encima de forma automática, sin tener que esperar a llamadas ni cargas de ningún tipo.
ResponderEliminarEl ejemplo en mi web y cómo aplicarlo al blog:
http://espineli.es/2010/04/03/nueva-mascota-del-blog/
Perdona por el spam y Salu2!!
Son más grandes los de la derecha.
ResponderEliminarUna simple comprobación con una regla de píxels te lo indica.
Goefry, saludos desde la Tierra
ResponderEliminarEspineli, perdonado. El retraso en la carga es cuando se usa el mismo código pero con dos imágenes distintas. Con una sola, tal y como hiciste tú, es mucho mejor.
Jose, me puse a buscar en internet dónde comprar una regla de esas. No sabía que existieran :D De todas formas tienes razón. Las imágenes que diseñé tenían el mismo tamaño de fuente, pero la redimensión automática me jugó una mala pasada.
Yo lo he hecho con una regla de software, como estas: http://www.portablefreeware.com/index.php?q=ruler&m=Search
ResponderEliminarEn realidad en este caso lo hice con un widget que tengo descargado para el navegador Opera.
Hola Oloman,
ResponderEliminarVerás en mi blog tengo un gadget de texto con frases célebres de fotografía y me preguntaba si habría alguna forma de que estas se fueran cambiando automáticamente.
$$$--Gracias--$$$
Muy buena la info!!! Yo en mi caso intente usar muy munimamente las imagens en mi blog porque me preocupaba bastante la carga de la pagina. Una pregunta que fuente de letras utilizaste para las letras de las fechas que muestras en este post???
ResponderEliminarJavierlota, a ver si te sirviera este script de frases aleatorias.
ResponderEliminarBilosony2, lo de las imágenes es una asignatura pendiente que tengo, pero es que me cuesta prescindir de ellas. La fuente por la que preguntas es la Angryblue
Pues esa es la primera parte supongo.
ResponderEliminarLo interesante viene ya en la práctica, sinceramente de momento no le doy una aplicación real a mi blog pero espero leer lo siguiente y mientras ir pensando que hacer con esto de los refrescos, perdón: los sprites, jeje.
Hola Oloman!! esta consulta no tiene que ver con el presente post, pero como le hago para poner dentro de una publicación un fragamento del post con la opción +/-, por ejemplo tu utlizas el "leer más", al pinchar he visto en algunos de tus entradas que si los codigos del truco a utilizar son muy largos pones 2 opciones: 1- la Caja Textarea y 2- El +/-. Pues presisamente me interesa la opción 2.
ResponderEliminarTambien queria darte gracias pues el día de hoy he publicado mi entrada 100, en esta entrada http://transformersg.blogspot.com/2010/04/entrada-no-100.html le doy gracias a los maestros bloggeros por compartir sus conocimientos y trucos.. bueno Gracias!!
Te voy a perdonar lo de "maestros bloggeros" y te pasaré un enlace para que veas como se hace lo de desplegar una parte ;)
ResponderEliminarhttp://oloblogger.blogspot.com/2008/02/elementos-que-aparecen.html
Saludos
Muchas gracias Oloman ya lo he incluido en mi blog.
ResponderEliminar