ASP.NET WebForms 4.8: Optimización de carga de imágenes en GridView y problemas de memoria

[Kiquenet]

Tengo una aplicación ASP.NET WebForms 4.8 que muestra imágenes en un GridView. Los usuarios navegan rápidamente entre registros utilizando el teclado para visualizar las imágenes.

Situación actual

• Aplicación ASP.NET Framework 4.8.
• Aproximadamente 20 usuarios concurrentes.
• Cada fila del GridView puede mostrar una imagen.
• Los usuarios se desplazan continuamente por el grid con el teclado.
• Estamos observando problemas de rendimiento y, en algunos casos, errores relacionados con consumo de memoria.

Evolución de la solución Versión inicial

Las imágenes se enviaban al navegador codificadas en Base64 dentro del HTML:

<img src="data:image/jpeg;base64,..." />

Problemas detectados:

• Incremento considerable del tamaño de la página.
• Mayor consumo de memoria en servidor y navegador.
• Mayor tráfico de red.
• La página se volvía lenta al navegar por muchos registros.
  
  

Versión actual

Las imágenes se sirven mediante un Handler (.ashx):

<img src="ImageHandler.ashx?id=123" />

La situación ha mejorado, pero seguimos teniendo dudas sobre posibles cuellos de botella y optimizaciones adicionales.

¿Qué mejoras recomendaríais para optimizar al máximo este escenario?

Aspectos que me interesan especialmente:

Servidor

• Caché de imágenes (MemoryCache, Redis, etc.).
• Configuración de caché HTTP.
• Uso eficiente de streams.
• Evitar cargar imágenes completas en memoria.
• Configuración IIS para contenido estático.
• Compresión.

Imágenes

• Generar miniaturas y no cargar el tamaño original.
• Conversión a formatos más eficientes (WebP, AVIF).
• Redimensionado previo.
• Calidad óptima para reducir peso.

Cliente

• Lazy loading.
• Precarga de imágenes adyacentes.
• Virtualización del GridView.
• Carga asíncrona.
• Evitar recargas completas de página.

Arquitectura

• CDN.
• Almacenamiento en disco vs base de datos.
• Uso de Output Cache.
• Estrategias para escenarios con múltiples usuarios simultáneos.

Datos adicionales

• Framework: ASP.NET WebForms 4.8.
• Concurrentes: ~20 usuarios.
• Las imágenes se consultan frecuentemente.
• Actualmente las imágenes se sirven mediante Handler (.ashx).

Los 3 problemas más probables son:

1. Imágenes servidas a resolución original

   • Es el error más común.
   • Si una imagen pesa 3 MB y en pantalla se ve a 200x200 px, se está transfiriendo y procesando información innecesaria.
   • Solución: generar miniaturas persistentes.

2. Ausencia de caché HTTP

   • Si al moverse por el grid el navegador vuelve a solicitar imágenes ya vistas, se genera carga innecesaria en IIS y la base de datos.
   • Añadir:
   Cache-Control: public ETag Last-Modified Expires

3. Imágenes almacenadas en Base de Datos y convertidas constantemente

   • Si el .ashx realiza continuamente:
   BBDD -> byte[] -> MemoryStream -> Response

   el GC tendrá mucha presión.

   • Mejor almacenar en disco u objeto storage y servir directamente cuando sea posible.

Mejoras con mayor impacto (ordenadas)

1. Generar miniaturas optimizadas.
2. Caché HTTP agresiva.
3. Evitar Base64.
4. Lazy loading.
5. Precarga de la siguiente imagen y la anterior.
6. WebP.
7. Cache en memoria de imágenes más consultadas.
8. Virtualización/paginación del GridView.
9. Almacenar imágenes fuera de la BBDD.
10. CDN (si hay usuarios remotos).

De todas ellas, miniaturas + caché HTTP + eliminar Base64 suelen proporcionar más del 80% de la mejora de rendimiento en este tipo de aplicaciones.

¿Alguien ha tenido experiencias similares o puede compartir qué optimizaciones tuvieron mayor impacto en consumo de memoria, velocidad de carga y escalabilidad?

Lecciones aprendidas ??