Desde hace algún tiempo, el Responsive design (diseño web adaptable) es un requisito indispensable para cualquier página web. Se espera de un site que sea accesible y adaptable a todos los dispositivos: ordenador, móvil y tablet. Por este motivo, en Omatech decidimos crear una herramienta propia que nos permitiera llevar a cabo todo el proceso de optimización y adaptación de imágenes de forma automática para los distintos dispositivos: Imaginator.
Empecemos por el principio: ¿cómo nació Imaginator?
Recurrentemente estábamos buscando soluciones de optimización para dar respuesta al concepto responsive. Durante la fase de Maquetación debíamos plantear cuál iba a ser el ancho del dispositivo desde el que se iba a acceder al site con tal de adaptar el contenido a éste, en especial las imágenes. Por ejemplo, si la página web se iba a visualizar desde un ordenador, el ancho de las imágenes debía ser más grande que si lo visualizáramos desde un móvil, que cuenta con un espacio más estrecho. Además, detectamos que si dejábamos las imágenes en su tamaño real y tan solo adaptábamos el ancho para que encajaran con las medidas de cada dispositivo, la velocidad de carga de la web se veía disminuida.
Por lo tanto, para solucionar el problema de optimización debíamos crear nuevas imágenes para el proyecto dependiendo de la resolución específica de cada dispositivo. De no hacerlo así, la lenta velocidad de carga comportaría una mala experiencia de usuario y, a su vez, una penalización de posicionamiento en buscadores (Google).
Con el objetivo de agilizar todo este proceso, decidimos desarrollar un módulo software para la gestión y optimización de imágenes. Esta herramienta propia la bautizamos con el nombre de Imaginator. Su función principal es optimizar las imágenes a los diferentes dispositivos, resoluciones y formatos. Dicho módulo está incorporado en el gestor de contenidos (CMS) propio de Omatech, pero también se puede utilizar de forma autónoma mediante un desarrollo técnico a medida.
¿Cómo funciona?
La herramienta crea automáticamente la versión responsive del html que se necesita para mostrar la imagen en el frond-end, así como la réplica de ésta en diferentes resoluciones y formatos. El funcionamiento se basa en que, a partir del propio html, se ofrece al navegador todas las posibles combinaciones de formatos y dimensiones de la imagen en cuestión. De esta forma, el navegador decide qué imagen obtener del servidor en base a la resolución del dispositivo en el que se esté trabajando y de las capacidades técnicas de compatibilidad de formato. Una vez la petición llega al servidor, el request es procesado por la herramienta Imaginator, la cual primero comprueba si la combinación de tamaño y formato de la imagen ya se había generado previamente. En caso afirmativo, la devuelve del directorio de caché. En caso contrario, realiza las transformaciones de tamaño, crop y formato y devuelve la imagen resultante, almacenándola finalmente en la caché para posibles futuros usos.
En resumen, el módulo Imaginator da solvencia a la problemática de la optimización en los desarrollos responsive, proporcionando así una carga más rápida y una mejor experiencia de usuario. Además, al automatizar el proceso, resulta mucho más sencillo para la persona encargada de subir nuevo contenido a la web o editar el existente.
