El Spriting, la técnica que permite que Gmail ahora cargue más rápido

Hace algunas horas volvimos a la Civilización con la gente de Larva Internet luego de andar en terreno revisando algunos nuevos negocios y nos pareció curioso que nuestros correos cargaran de esta forma…

Navegando por ahí dimos con que la gente de Google ha optimizado algunos de sus principales sitios web -comenzando con code.google.com y terminando con Gmail aunque también creemos se cambiará más de un sitio- usando un truco de CSS que a muchos les debe parecer interesante.

¿Cómo funciona el Spriting en CSS?

Leyendo un poco, “alguien”, redactora de este blog, no comprendió qué hacía esta técnica, y es bastante simple: se trata de que teniendo una imagen completa, se “recorte” literalmente, para crear pequeñas imágenes de un tamaño deseado, es decir, una web que pueda tener 100 imágenes en una impresión, podría pasar a tener 1 sóla que contenga a todas las anteriores en un mismo plano y que se recorte a necesidad del desarrollador -aunque, claro, una sóla imagen en una web sería un trabajo de chinos para su desarrollador-.

Si la idea no se entiende, te la ponemos más fácil: supongamos que quieres hacer un rollover de imágenes para que, al pasar el mouse por un elemento determinado, este cambie para mostrar otra imagen y quieres, eventualmente, reducir la cantidad de solicitudes de una imagen a un mismo servidor… (Respiramos…) Entonces, decides meter todas las imágenes que componen este rollover en una sóla imagen que quede como la de a continuación…

Como verás, la imagen superior contiene dos formas, una un tanto más oscura que la primera con unas líneas que indican un determinado lugar, mientras que la superior sea la que el visitante vea cuando la web se imprima en su navegador…

Ahora dirás: Eso lo entiendo, pero ¿cómo “cortas” las imágenes para el gusto del cliente?, entonces recordarás que tienes por ahí un manual de CSS que dice que puedes configurar el alto y ancho de una determinada imagen recortándola con la función “width” y “height”, es decir, que sólo tomemos parte de la imagen haciéndole creer al usuario que es sólo una fracción de la misma, aunque como vemos en la imagen superior, está contenida en la misma imagen.

Y lo que queremos lograr hacer recortando las imágenes es algo como lo que la Gente de A List Apart ha realizado en un ejemplo de su web al que puedes acceder haciendo click en este enlace -para quienes leen desde el Reader y no quieren entrar a la web, les hemos hecho una imagen porque sí, también pensamos en ellos-…

Como verás en la imagen anterior, este rollover está hecho integramente en una sóla imagen… ¿No me lo crees? Pes si usas Firefox, clickea con el botón derecho y prueba a ver el código fuente…

#panel1b a:hover {background: transparent url(test-3.jpg) 0 -200px no-repeat;}
#panel2b a:hover {background: transparent url(test-3.jpg) -96px -200px no-repeat;}
#panel3b a:hover {background: transparent url(test-3.jpg) -172px -200px no-repeat;}
#panel4b a:hover {background: transparent url(test-3.jpg) -283px -200px no-repeat;}

Si te fijas, la imagen es la misma en cada div de Panel.

¿En qué nos beneficia esta técnica?

Tienes varias cosas:

1. Se reduce el tiempo de carga de las imágenes (literalmente) ya que estás cargando sólo una que contiene el contenido completo a usar.
2. Apuesto a que muchas veces has tenido que esperar en un rollover para poder mostrar la imagen de a continuación -si no me explico bien, ingresa a www.zonadevideos.com y posiciona el mouse sobre el menú superior y verás que deberás esperar para que se cargue la imagen de fondo-, pues con esto tendrás la imagen cargada anteriormente por lo que no habrá un desface de muestreo de la misma y tu rollover tendrá el mismo formato siempre.
3. Reduces CONSIDERABLEMENTE la solicitud de cargas de imágenes al servidor en que te hospedas -aquí algunos comenzarán a pensar en tener el Spriting como opción-.
4. Tu web quedará de una buena calidad y rápida -¿o creías que cualquiera hace spriting de imágenes en CSS? Pues no, tendrás que buscarte a un diseñador/desarrollador que haga algo decente-.

Ahora, volviendo a lo que aquí nos trae, Gmail ha agregado este interesante truco desde ya hace algún tiempo a code.google.com -no creo necesite presentación- y también ha probado otras técnicas con su Motor de Búsqueda de Imágenes y ahora con Gmail.

En su blog oficial cuentan que han reducido considerablemente la carga de sus sevidores y el tiempo de espera de los usuarios -un 20% aproximadamente- cosa que, para una de las webs más visitadas, supone una baja de carga considerable.

Y tu, ¿te animas a probarlo en tu web para reducir la carga y que no te bloqueen tu cuenta?

Más Información | Wikipedia (En Inglés)
Sitio Oficial | Official Gmail Blog
Vía | Google Dirson

1. perfumes comentó:
   20 de Mayo del 2008 a las 5:01 PM (Responder ↓)

   No conocía esa técnica, la han explicado muy bien.
   Debo confesar que no entiendo por que motivo cargar una imagen grande va mas rápido que varias chicas, por ejemplo si tengo que mostrar tres imágenes mientras veo la primera se cargan las otras y de esa manera gano tiempo.
   Debo pensarlo un poco para entenderlo, pero gracias!
   Saludos,
   Vivi
   Perfumes para Hombre

2. Fernanda Cruzalegui comentó:
   29 de Junio del 2008 a las 11:54 PM (Responder ↓)

   HOla muy interesante el articulo. Qusiera saber tambien como colocar una imagen de fondo a la hora de crear un email en gmail. por favor dejeme saber su repuesta. Besos

3. Marlex comentó:
   30 de Junio del 2008 a las 4:51 PM (Responder ↓)

   Fernanda, lamentablemente no puedes hacerlo a menos que manejes el correo con plantillas desde Outlook o Thunderbird.

   Saludos!

4. Fernanda Cruzalegui comentó:
   1 de Julio del 2008 a las 10:09 PM (Responder ↓)

   Muchas gracias Marlex, gracias por tu tiempo en responder mi pregunta, la verdad es para una empresa, ellos quieren enviar correos con una imagen de fondo, ya veo lo que tengo que hacer. Besitos

Nombre (requerido)

Correo-e (No será publicado aquí) (requerido)

Sitio Web (Si no posees, déjalo vacío)

Condiciones de Uso | Política de Privacidad | Publicidad | Acerca de | Contacto | Administración