Los nuevos diseños cada vez usan más imágenes, y es normal ya que la vistosidad de los sitios web es un factor determinante a la hora de llamar la atención de usuario. Pero esto también, penaliza la carga de la página, principalmente por que ha de realizar N peticiones al servidor de aplicaciones para que este sirva las imágenes que hemos definido en nuestras aplicaciones.
En la página de resultados de Google he encontrado una técnica, que ya hemos comentado previamente, que nos ayuda a mitigar este número de peticiones.
La idea es muy sencilla. Y si nos fijamos en la imagen superior, veremos como la imagen nav_logo4.png engloba todas imágenes visibles de la página. Veámosla:
Después, usando background-position haremos que únicamente se vea la porción que nos interesa en cada posición de la página.
Actualización
He montado un ejemplo para comparar la diferencia entre usar 100 imagenes frente a usar una sola imagen con las 100 en ella.
Revisar los tiempos con Firebug.
Resultados
100 imagenes
<?php for ($x=0; $x<100; $x++):
$file = "img".$x.".jpg";
?>
<img src="<?=$file?>" alt="img" />
<?php endfor;?>El tamaño de todas las imágenes por separado es de 93kb (siendo cada una de ellas de 906 Bytes).
1 sola imagen
<img src="bigs.jpg" alt="img" />La imagen pesa 48KB y la he creado copiando el resultado anterior y guardándola con el máximo de calidad posible.
La diferencia es increíble, 599ms (100 imágenes) frente a los 81 ms de 1 sola imagen. Interesante para tenerlo en cuenta a la hora de usar sprites en nuestras aplicaciones.
15 comentarios, 1 referencias
+
#