Cuando se incrustan múltiples instancias de las mismas imágenes en un HTML, ¿eso carga la imagen una vez?

Question

Si utilizo la misma imagen varias veces en una sola página, ¿cada una se cargará por separado, ocupando el ancho de banda y el tráfico, o solo se cargará una y el código de reencauche reutilizará la imagen?

Por ejemplo, digamos que lo hice:

<img src = 'http://img.to/image.jpg"/> 
<img src = 'http://img.to/image.jpg"/> 
<img src = 'http://img.to/image.jpg"/> 
<img src = 'http://img.to/image.jpg"/> 
<img src = 'http://img.to/image.jpg"/> 
<img src = 'http://img.to/image.jpg"/> 
... 
<img src = 'http://img.to/image.jpg"/> 
<img src = 'http://img.to/image.jpg"/> 

y imagen.jpg es 100kb. Cuando el navegador carga esta página, ¿desperdiciará (100Kb * # de etiquetas img) de tráfico? ¿o solo cargará una imagen.jpg y la reutilizará para el resto de las etiquetas?

Answer 1

Pruébelo: cuando se analizan problemas de almacenamiento en caché, una herramienta como Firebug para Firefox o las herramientas para desarrolladores de Chrome son muy beneficiosas. Si abre el panel 'Net' en cualquiera de las páginas y vuelve a cargar una, verá qué código de estado HTTP se envió para cada elemento. 304 (No modificado) significa que el elemento se recuperó localmente de la memoria caché.

Como dthorpe dice arriba, los encabezados de caché son importantes aquí. Además de asegurarse de que no se haya establecido "no-caché", si tiene acceso a la configuración de su servidor, debe ser proactivo; si sabe que un recurso no va a cambiar, debe asegurarse de configurar un encabezado 'Expira' (que indica a los navegadores una fecha después de la cual la copia en caché debe considerarse obsoleta) o un encabezado 'Cache-Control: max-age' (que da una cantidad de días/horas en lugar de una fecha establecida).

También puede establecer diferentes escalas de tiempo para diferentes tipos de mime/carpetas, lo que le permite obtener datos de clientes para actualizar contenido HTML a menudo, pero las imágenes y hojas de estilo rara vez.

Aquí hay un bonito intro video/article de Google que vale la pena echarle un vistazo.

Answer 2

Puede depender de la implementación específica del navegador, pero esperaría que la primera referencia a la imagen llegue al servidor y las referencias subsiguientes a la misma URL de imagen para que se sirvan desde el caché del navegador. Entonces, solo una solicitud de red para la imagen.

Es decir, SI los encabezados de caché HTTP establecidos por el servidor en la respuesta de imagen permiten que el navegador guarde en caché la imagen. Si el encabezado del caché está configurado en algo así como "no-caché", entonces el navegador debe volver a buscar la imagen para cada referencia. Puede verificar para ver qué son los encabezados HTTP en la respuesta de imagen usando un analizador de paquetes de red como Fiddler.

Si el navegador no completa la URL de la imagen en la memoria caché del navegador hasta que la imagen se haya descargado por completo, entonces podría ver varias solicitudes de la misma imagen, pero eso parece muy poco probable.

Answer 3

Los navegadores que implementan 5th version of HTML specification pueden reutilizar imágenes independientemente de los encabezados HTTP relacionados con la caché. Probablemente solo se realizará una única solicitud de red.

La especificación define la clave de la imagen.

7.2 Let key es una tupla que consiste en la URL absoluta resultante, el modo de atributo crossorigin del elemento img y, si ese modo no es No CORS, el origen del objeto Document.

Cuando el navegador descarga la primera fuente de imagen, la agrega a la lista de imágenes disponibles mediante la tecla.

Si la descarga se ha realizado correctamente y el agente de usuario era capaz de determinar el ancho de la imagen y la altura

1. Ajuste el elemento img al estado completamente disponible.
2. Agregue la imagen a la lista de imágenes disponibles con la tecla.

Cuando el navegador ve otra imagen con misma clave que lo tomará de una lista de imágenes disponibles.

7.3 Si la lista de imágenes disponibles contiene una entrada para la clave, establezca el elemento img en el estado completamente disponible, actualice la presentación de la imagen apropiadamente, ponga en cola una tarea para activar un evento simple llamado load at the img element, y aborte estos pasos.

Sin embargo, el navegador puede eliminar la imagen de la lista de imágenes disponibles en cualquier momento.

Cada objeto de documento debe tener una lista de imágenes disponibles. Cada imagen en esta lista se identifica mediante una tupla que consiste en una URL absoluta, un modo de atributo de configuración CORS y, si el modo no es No CORS, un origen. Los agentes de usuario pueden copiar entradas de una lista de imágenes disponibles de un objeto de documento en cualquier momento (por ejemplo, cuando se crea el documento, los agentes de usuario pueden agregarle todas las imágenes que se cargan en otros documentos), pero no deben cambiar las claves de entradas copiadas de esta manera al hacerlo. Los agentes de usuario también pueden eliminar imágenes de dichas listas en cualquier momento (por ejemplo, para guardar la memoria).

Para obtener más información, consulte How does a list of available images used when parsing document with multiple img nodes with same src? problema en el repositorio de HTML estándar en GitHub.