Agilizar la carga de imágenes con miniaturas

Desde la creación de la página web, nos estamos encontrando con un problema muy evidente. Este es la tardanza al cargar la lista de reportes, donde aparecen las distintias incidencias acompañadas de una imagen descriptiva de la misma. El problema es que esta imagen se carga a resolución completa y retrasa la carga de la página web, perjudicando la experiencia del usuario.

Para solucionar esto, hemos creado una imagen en miniatura o thumbnail de 300px de ancho por cada imagen que se sube al servidor. Esta miniatura tiene tamaño de archivo muy inferior al original como podemos ver en la siguiente captura del directorio de archivos subidos del servidor:

Comparativa tamaños de archivo de imágenes originales con miniaturas (-min)

Implementación

Para la implementación, hemos decidido que se encargue el servidor a través de un script en PHP, para no sobrecargar más la aplicación móvil.

Tras informarnos, vimos que PHP cuenta con una serie de funciones para el procesado de imágenes, llamadas PHP-GD. Hemos hecho uso de una implementación compartida por el usuario @pquina en GitHub y la hemos adaptado simplificándola para que funcione en nuestra aplicación web, creando el archivo miniatura.php.

El funcionamiento es el siguiente: al subir una foto, la aplicación web guarda la imagen original y genera una miniatura de la misma de 300px de ancho. Ambas rutas de las imágenes se guardan en la base de datos para poder ser accedidas a la hora de listar reportes (miniatura) o ver un reporte detallado en la sección de mapa (original).

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s