¿Quien no a entrado a una Web y al ver que tardaba un montón la Web se a ido?
La mayoria de veces esto se debe a que las imagenes tardan mucho en llegar del servidor ya sea porque pesan mucho o hayan muchas.
Os voy a hacer unas aclaraciones sobre que formato de imagenes utilizar, porque y después iremos a lo de cargar rapido la web aunque tenga imagenes muy pesadas o tenga muchas.
GIF vs JPGGIF: Su peso es muy inferior al JPG, alcanza como máximo los 256 colores.
JPG: Su peso es muy superior al de GIF, alcanza millones de colores, tantos que podria contener más colores de los que nuestro ojo no podria ver.
Cuando usar GIF y cuando usar JPGGIF: Cuando hagamos un titulo de una Web o una imagen para nuestra Web. Es decir si nosotros creamos una imagen seguro que no alcanzara los 256 colores, para que queremos hacer que pese más la imagen si tenemos el GIF, además con este podemos aplicar transparencias que se verian en la Web.
JPG: Cuando queramos colgar una fotografia, paisaje, imagen real. Ya que superara los 256 colores y necesitaremos que sea JPG porque sino la imagen perderia muchisimos colores, además JPG tiene un sistema de compresión de colores matematico, y pensareis imagen, matematicas... no me cuadra :S. Pues si, tiene una alta compresión pero eso no hace que nos sea util para imagenes menores de 256 colores.
Como cargar nuestra Web más rápidoEl sueño de todo programador es que su Web se cargue al instante y poder navegar y con darle un clic a un enlace en milesimas de segundo se cargue la Web solicitada.
¿Es posible?
SIEs muy sencillo
Un navegador cuando esta leyendo el codigo para mostrar el resultado por pantalla y se encuentra algo como: <img src="ruta_de_la_imagen.extensión"> lo que en realidad hace es parar de mostar el resultado de codigo por la pantalla, pedir la imagen al servidor y posteriormente cuando recibe la imagen y la carga continua cargando codigo y mostrando el resultado.
¿Como lograr que no se pare el navegador y siga mostrando el codigo de la Web mientras espera y carga las imagenes?Tan sencillo como colocar los parametros
width y
height en la etiqueta <img>
Por lo tanto si tenemos una imagen llamada
titulo.gif que tiene
500 de amplio y
200 de alto. Deberiamos colocar el siguiente codigo:
<img width="
500" height="
200" src="
titulo.gif">
¿Porque esta solución? ¿Que gano con eso?
Pues cuando el navegador llegue a esa linea dira vale tengo que mostrar titulo.gif con tal altura y tal anchura, se la pido al servidor pero de mientras le reservo este espacio de tal altura y tal anchura a la imagen para cuando me la envie el servidor y de mientras continuo cargando codigo envez de esperar a que me llegue la imagen y comprovar el tamaño etc...
