« anterior | siguiente »

Home > 2008 > Julio > Miércoles, 09 de Julio 2008 > 5 consejos para reducir la carga de la página enfocado a imágenes
Blogs Media: CSS Mania | VivirLatino | Sentido Web | Apps Mania

Publicidad

Mié09Jul2008

5 consejos para reducir la carga de la página enfocado a imágenes

11:00 H (CET)| Temas: Desarrollo web

Una cosa es realizar una aplicación o tener un blog y otra es que el número de visitas aumenten y tengamos que optimizar la carga de la página. Hay que intentar ganar rendimiento de cualquier forma, y una de estas formas es mediante imágenes, por eso estos consejos (que quizás sean un poco obvios) no vienen mal:

  • Evita usar imágenes complejas o grandes: cuanto más ligeras sean antes cargarán.
  • Optimiza las imágenes: existe diferentes formatos, y cada cual es conveniente en un caso. Los más usados son GIF, PNG y JPEG. JPEG y PNG tienen un valor de calidad de la imagen, reducirlo puede hacernos ganar algunos Kb y no perder en calidad.
  • Indica el tamaño de las imágenes en el HTML: así el navegador sabrá como repartir el espacio para la imagen antes de que cargue por lo que el render de la página será más rápido.
  • Precarga imágenes: aquí el autor dice un consejo un tanto peculiar, no sé si bueno o malo, pero sí interesante. Se trata de cargar imágenes grandes en páginas anteriores y asignarle el tamaño 1x1 para que no se vean y así esté cargada anteriormente. Eso sí, forzaría a que tire de caché para que no te la cargue dos veces.
  • Animaciones flash: si tienes que usar una animación no uses GIFs animados (sí, algunos te encuentras aún), usa flash, pero tampoco te pases.

Top 5 tips to decrease the load time of your websites via images

Relacionados

1. demogar ~ Jueves, 10 Jul 2008 | 06:06H:

Muy interesante.... a lo de las imagenes seria bueno agregar que en vez de utilizar 2 imagenes para los hover en CSS que se utilice una imagen sola con dos funciones (conocido como CSS Sprites)...
Saludos y gracias por compartir

2. Josep Viciana ~ Jueves, 10 Jul 2008 | 09:30H:

demogar, haciendo lo que comentas (los css sprites) la mayor ventaja es que es todo más ordenado, en ficheros y código : ), el tiempo de carga no mejora... la diferencia es que lo carga todo a la vez.

Una vez pensé en utilizar una sola imagen para toda la web, a modo expermento x'D

3. demogar ~ Jueves, 10 Jul 2008 | 15:15H:

Tenia entendido que el uso de CSS Sprites hacia que el tiempo de carga de una pagina se redujera ya que:
1. con menos imagenes a ser cargadas, se reduce la cantidad de request que le haces al servidor, haciendo que cargue de manera mas rapida.
2. una imagen sola tiende a tener menor tamaño que dos imagenes separadas, lo que hace la misma funcion que reduciendo la cantidad de imagenes.
Hay un muy buen articulo sobre el uso de sprites, tendria que buscarlo, de momento recuerdo que esta en la web de David Walsh.

He hecho mis propios experimentos y he visto muy buenos resultados (pequeños, pero significativos) de que se reduce el tiempo de carga de una pagina gracias a los sprites en general.

Voy a tener que hacer la prueba de la pagina completa con una imagen jaja, aunque no creo q sea buena idea ya que el tiempo de carga sera obviamente mayor.

Saludos y suerte! :)