We're building the features page for our web product (online investment management service). We'd like to showcase some of the features by displaying short clips of user interactions with that feature (eg. here or here)
What we've found is that most of these interactions are basically screen recordings in mp4 or gif format. So, as bitmap formats, they have a particular resolution, usually relatively low, and they inevitably occupy between 250kb and 2-3 mb, which can add up if you want to have 10 of these on a page. So you have large file size and low quality.
Given that we have the PSDs and the HTML/CSS/JS, is there some way to easily create a vector based animation of some sort instead to replicate the user interaction? Maybe HTML or canvas animation or something? If this animation was described as a vector, we could probably achieve each animation in 20-30kb, creating huge load time savings (we're in India, where people are still on pretty slow connections) AND much better quality (because vector). Unlike real life videos, user interactions with a software product are by default great candidates for vector-based representation no?
Any ideas or solutions? Thanks!