Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Cargar web (con imagenes) mas rapido
#1

Encontre este pequeño tutorial y lo quise compartir con ustedes, con esto podras cargar las imagenes tu web un poco mas rapido, es logica esta solucion Sonrisa

La mayoria de las veces las web tarda en cargar porque 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 JPG

GIF: 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 JPG

GIF: 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ápido

El 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? SI

Es 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.jpg"> 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 mientras le reservo este espacio de tal altura y tal anchura a la imagen para cuando me la envie el servidor y mientras continuo cargando codigo en vez de esperar a que me llegue la imagen y comprovar el tamaño etc etc...

¿Es logico no? ¿que opinas?
No me dejan poner mis web Triste
WWW
#2
No lo había pensado de esa manera, aunque es apenas un primer paso, está bien para las imágenes estáticas de la web, pero cuando hablamos del post de un usuario con imágenes alojadas en varios servidores es más difícil obtener las dimensiones, también la mayoría de veces los gifs de usuarios son más pesados que sus jpg, he entrado a foros en los que ocupan de avatar un gif de más de 10 megas. Hay mucho, yo hacía que todas las imágenes las alojaba en mi web y cargaba el tamaño de db sql...
#3
Yo lo que hago es intentar reducir el tamaño al maximo de las imagenes , siempre la suelo poner en png o gif, para que no den problemas con los fondos, y le bajo bastante la resolucion, Y si aun asi me  quita velocidad, la quito y pongo otra.
ÁngelEnfadado
#4
(08-02-2016, 06:37 AM)Kiichi escribió: No lo había pensado de esa manera, aunque es apenas un primer paso, está bien para las imágenes estáticas de la web, pero cuando hablamos del post de un usuario con imágenes alojadas en varios servidores es más difícil obtener las dimensiones, también la mayoría de veces los gifs de usuarios son más pesados que sus jpg, he entrado a foros en los que ocupan de avatar un gif de más de 10 megas. Hay mucho, yo hacía que todas las imágenes las alojaba en mi web y cargaba el tamaño de db sql...

Claro, mas que todo es paea las imagenes de la web, como el logo y otras cosas!
No me dejan poner mis web Triste
WWW
#5
(08-02-2016, 06:34 PM)JOHN SUAREZ escribió: Buen aporte lo tendre en cuenta a la hora de insertar mi imagenes, gracias.

Jje, ok, gracias por pasarte!
No me dejan poner mis web Triste
WWW
#6
Yo lo que nunca he entendido es para los que guardan las imágenes en SQL, las codifican pero no le veo mucho sentido, hasta pesan más...
también está que en lugar de usar un gif para los íconos usar un font
hay webs que en lugar de usar css para rellenar o usar gradient o shadows todo lo hacen en psd y acomodan los gifs, fue más una tendencia de hace unos 7-3 años yo creo :/
con diseño minimalista ni necesitas gifs.-.
#7
(11-02-2016, 04:51 AM)Kiichi escribió: Yo lo que nunca he entendido es para los que guardan las imágenes en SQL, las codifican pero no le veo mucho sentido, hasta pesan más...
también está que en lugar de usar un gif para los íconos usar un font
hay webs que en lugar de usar css para rellenar o usar gradient o shadows todo lo hacen en psd y acomodan los gifs, fue más una tendencia de hace unos 7-3 años yo creo :/
con diseño minimalista ni necesitas gifs.-.

Tienes razon nunca entendi apra que usan imagenes en vez de usar css o.o
No me dejan poner mis web Triste
WWW
#8
(13-02-2016, 12:14 AM)CarlosAlberto escribió:
(11-02-2016, 04:51 AM)Kiichi escribió: Yo lo que nunca he entendido es para los que guardan las imágenes en SQL, las codifican pero no le veo mucho sentido, hasta pesan más...
también está que en lugar de usar un gif para los íconos usar un font
hay webs que en lugar de usar css para rellenar o usar gradient o shadows todo lo hacen en psd y acomodan los gifs, fue más una tendencia de hace unos 7-3 años yo creo :/
con diseño minimalista ni necesitas gifs.-.

Tienes razon nunca entendi apra que usan imagenes en vez de usar css o.o

Porque antes no se usaba tanto el css antes las página se hacían con imágenes.
WWW
#9
Buenos tips para que nuestras páginas carguen más rápido, esto nos ayuda cuando estamos creando una galería de imagenes, es importante optimizarlas para que no se ponga pesada nuestra página web. Gracias por compartir esta valiosa información.
WWW
#10
Lo del  tamaño de la imagen es muy importante. Yo todas las imágenes las paso por una web que me quita peso a las imágenes manteniendo la calidad.
Por otra parte, también es cierto que las etiquetas width y height es recomendable ponerlas aunque la imagen vaya a ser del mismo tamaño. Esto hace que la web sepa el tamaño y cargue las imágenes mejor.
Un saludo por la información.
[Imagen: logo_300.png]


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  jQuery: ocultar imágenes rotas Jvh_22 10 865 03-01-2017, 09:26 PM
Último mensaje: gassip
  Como subir Archivos, Imagenes PHP MysQL gassip 0 1,650 24-10-2016, 06:59 AM
Último mensaje: gassip
  No se puede cargar archivos de DBF a JIRA en Windows Aguinigaje 2 508 02-04-2016, 06:41 PM
Último mensaje: DaveNPlay
  Subir imagenes con PHP y class.upload.php cmascreativo 0 419 18-02-2016, 05:54 PM
Último mensaje: cmascreativo
  Codigo Imágenes que cambian automáticamente tucine 8 931 19-05-2015, 03:36 PM
Último mensaje: betiko2424
Bombilla [PUBLICO] Imágenes con descripción animada CSS3 AngelKrak 1 637 20-01-2015, 06:29 AM
Último mensaje: garcon
  script bueno para secuencia imagenes canpios 7 955 19-12-2014, 06:01 AM
Último mensaje: amplox
  Problema con imagenes othgeg 14 1,137 01-09-2014, 12:43 AM
Último mensaje: romeho
  No puedo renombrar imágenes con PHP Samo30 6 1,706 16-08-2014, 06:34 AM
Último mensaje: AbaddonOrmuz
  [Tutorial] Aumentar el Tamaño Máximo al Cargar Archivos con PHP y Apache papanoel 0 831 22-01-2014, 04:38 AM
Último mensaje: papanoel



Usuarios navegando en este tema: 1 invitado(s)