Ahora se carga un poco más rápido, gracias al expermiento CSS anterior

Resultados en firebug y borrando la caché en cada prueba:

Antes:

26 requests - 170 - KB - 6.61s

Después:

10 requests - 145 KB - 3.18s

Diferencia:

16 requests - 25 KB - 3.43s

Nueva característica:

Se muestra una descripción al pasar por encima de una pestaña, petición de Pablo

Nota: puedes activar o desactivar la ayuda en la pestaña configuración:

Nueva sección Hall of Fame (salón de la fama)

No me quiero poner todas las medallas, muchos de vosotros me habéis ayudado enviando ideas y notificando bugs.

La URL es la misma:

GoTube

La idea consiste en agrupar todas las imagenes que tengan un tamaño parecido, para reducir el número de llamadas HTTP.

Por ejemplo, los iconos de la siguiente imagen tienen un tamaño aproximado de 16×16 pixeles:

Código CSS:

#primer_icono{
background:url(grupo_iconos.png) no-repeat scroll 0 0;
}
#segundo_icono{
background:url(grupo_iconos.png) no-repeat scroll 0 -16px;
}
#tercer_icono{
background:url(grupo_iconos.png) no-repeat scroll 0 -32px;
}

Código HTML:

<img src=”imagen_transparente.gif” id=”primer_icono”/>
<img src=”imagen_transparente.gif” id=”segundo_icono”/>
<img src=”imagen_transparente.gif” id=”tercer_icono”/>

Resultado:

Lo podéis ver en GoTube

Descargar ejemplo:

Curiosidad:

Puede que con este ejemplo al tener pocos iconos no se noté la diferencia en el tiempo de carga, el ejemplo es para enseñar la técnica, pero si se nota con agrupaciones de muchos iconos.

La siguiente imagen se usa en GoTube: