Delivering a consistent user experience across a range of constrained marine hardware without rewriting the application
The challenge
The application targeted marine MFD devices (including Garmin TD50s and similar constrained hardware) running legacy Chrome-era browser environments. The problem was not connectivity or download speed. The app ran locally, so the bottleneck was what the browser had to do with the media once it had it: decode, scale, allocate memory and repaint every asset on hardware with a fraction of the CPU and memory available on a desktop. Animated GIFs made this significantly worse. Each frame introduced another round of decode and repaint on devices already under pressure. A single source-asset strategy was not appropriate for this estate. The application needed a controlled way to prepare media for different runtime tiers, and a frontend model that could consume those outputs predictably without relying on modern browser features unavailable in the target environment.
The solution
Rather than asking constrained hardware to handle media it was never designed for, we built a Node.js media processing pipeline integrated into CI, transforming centrally managed source assets into runtime-ready outputs as part of normal engineering delivery.
Discovery, validation, media processing and manifest generation organised into clear stages. Output widths, GIF tuning parameters, placeholder generation and quality thresholds are driven by configuration, allowing the media strategy to be tuned per device class without changing the pipeline logic.
Static images processed into width-specific variants per frontend tier. GIFs optimised with a pluggable encoder abstraction (supporting gifsicle and compatible tools), alongside static poster variants and LQIP data for progressive rendering. The result cuts decode and repaint cost on constrained hardware.
The Angular frontend consumes a deterministic manifest to resolve each image entry, select the appropriate variant, render an LQIP or poster state first, preload the optimised asset, then promote it into view. The frontend has explicit control over rendering cost rather than relying on browser-led image selection.
Schema validation, configuration-to-output checks, file size budgets and perceptual image-difference scoring built into the pipeline. Optimisation settings can be assessed against measurable likeness to the original rather than visual inspection alone.
The outcome
The application now delivers a consistent visual experience across its full device range. Marine MFDs receive assets shaped for their capabilities rather than desktop-grade media they cannot render efficiently. The frontend controls image staging through the manifest, reducing repaint cost and improving perceived performance on the most constrained hardware in the fleet. The pipeline runs as part of CI/CD, so media preparation is repeatable, versioned and enforceable as part of normal delivery. The optimisation work happens upstream once, but the value is realised continuously downstream whenever a marine MFD renders the application.
Conversational Intelligence for Healthcare
A multi-modal conversation analysis product that combines acoustic, text and facial emotion AI to surface deeper patient insight and support more emotionally intelligent healthcare interactions.
View case study
The Digital Ecosystem for Eye Care
A scalable clinical platform supporting glaucoma monitoring, patient onboarding, clinician workflows and national service delivery for specialist eye care.
View case study
Digitising Health Report Quality Assurance
A SaaS quality assurance platform used by over 60 local authorities across the UK to improve EHCP auditing, replacing manual spreadsheet processes with structured digital workflows that support measurable improvement in plan quality for children and young people.
View case study A quick conversation is usually enough
to understand your needs and confirm a path forward.
