entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

1voto

Duda sobre rendimiento usando imágenes en HTML

Hola a todos.

Os explico: en una app web que estoy haciendo necesito usar 2 veces la misma imagen en el misma página, pero en distintos tamaños. Entonces mi duda es ¿Qué es más optimo? ¿En el src de cada imagen pongo la ruta a la misma imagen y la que quiero más pequeña la redimensiono con css? ¿O uso dos ficheros de imagen cada una con las dimensiones que necesito?

Mi duda viene a que no sé si en HTML, si uso dos imágenes con el mismo src, ésta se carga solo una vez o dos veces. Ya que si solo se cargara una vez, me convendría poner el mismo src en las dos etiquetas img. Si por el contrario se carga dos veces si convendría tener 2 imágenes de distinto tamaño.

Gracias por vuestras futuras respuestas :)

1 Respuesta

2votos

carlossevi Puntos63580

Si usas en las dos etiquetas de imagen el mismo src el archivo original sólo se descargará una vez.

Por lo general, no es una buena práctica enlazar imágenes en una resolución más grande de la que se van a mostrar, pero como toda regla general, tiene excepciones. Quizá en ese caso de uso tan específico que comentas es mejor que compartan source, pero antes veamos:

A tener en cuenta ¿cuál es tu prioridad?

  1. Que termine cuanto antes la carga completa de la página
  2. Que termine cuanto antes la carga de la parte fundamental de la página

Te pongo un ejemplo del punto 2 según el cual convendría tener imágenes diferentes: ficha de producto con imágenes en diferentes vistas. Aunque la foto en miniatura y la grande sean la misma y se carguen en la misma página, interesa que se muestre cuanto antes la miniatura y compesa cargar dos imágenes con distintas resoluciones.

¿Cual es tu caso específico? ¿Estamos hablando de un logo que sólo se carga una vez? ¿De imágenes de fichas de productos, artículos...?

0voto

Joseda85 comentado

Pues sí, es algo muy parecido a lo de los productos. Las imágenes se cargan primero con una resolución más o menos pequeña y al pulsar sobre ellas se abre una presentación con slideshow con las imágenes a mayor resolución, usando jquery. En principio había puesto las imágenes grandes y pequeñas con el mismo src (el de la imagen grande, para que no perdieran calidad), pero cargándolas todas a la vez en la página. Pero es cierto que estaría mejor que se cargaran antes las pequeñas con su resolución adecuada para que la página se cargue antes, y una vez que ésta se cargue, con jquery, añadir el código que contiene las imágenes de la presentación slideshow (alta resolución).
Gracias por tu ayuda. He aprendido mucho :)

0voto

Leonardo-Tadei comentado

Hola Joseda85,

al muy buen planteo de @carlossevi, le agregaría un par de detalles:

Podrías aligerar un poco más la carga haciendo que la imagen grande sea del 90% del tamaño final a mostrar, y luego mostrarla más grande. Ese 10% de diferencia no tiene consecuencias visibles (salvo muy raras exepciones) y el archivo queda mucho más chico.

La otra cosa a probar es, en vez de usar la etiqueta IMG para mostrar las imágenes, poner un DIV y que la imagen sea el fondo definido en el CSS. Los navegadores cachean mejor el CSS y el contenido relacionado, por lo que deberías tener una leve mejora más.

Por último, dado que la cuestión no es compleja, siempre está bueno hacer 2 o 3 variantes y ver luego los tiempos de descarga (con la herramienta de perfilado de red de Firefox o de Chrome).

Tal vez estés queriendo optimizar algo que no sea tan grave y descubrís alguna cosa inesperada... no por nada se dice que uno de los enemigos del buen software es la optimización prematura.

Saludos cordiales!

0voto

Joseda85 comentado

Muchas gracias a tí también, Leonardo. Lo tendré también en cuenta. :)

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta