Contenido

Optimiza la carga de imagenes de tus aplicaciones web

4 Abr

+ 16

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.

background-position-power
(Ver Imagen)

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:

nav_logo4
(Ver Imagen)

Después, usando background-position haremos que únicamente se vea la porción que nos interesa en cada posición de la página.

background-position-power2
(Ver Imagen)

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.

100 imagenes / 1 sola imagen

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).

100-imagenes
(Ver Imagen)

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.

1-imagen
(Ver Imagen)

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.

Más información

  1. Gimenete nos muestra como generar estos CSS Sprites.
  2. Generador de sprites y CSS online.

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.