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 (link muerto) -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