What is the smallest / best file format for animated product demos on a landing page?
I'm building a webapp which for now is B2C. I'm keen to give visitors a sense of the various features of the webapp with some visuals on the landing page.
Does anyone have experience doing this and can I have your views on how to best go about it?
What's the best tool to capture these product demos (im on Mac)?
What file format should I be creating or converting to in order to keep file size and page load speeds low?
Trending on Indie Hackers
What you could do is to have an image that is the first frame of video as the placeholder and then load video in background and replace image with video. This will not affect page load speed.
Make sure to also check the image size. Sometimes I get a 4k x 4k image but a 1k x 1k is sufficient. In that case, just resizing reduces the size by 16x. Typically jpg image sizes are, if properly compressed, significantly lower than png. If you're too worried about the size of your assets, you can also use a cdn for your assets which will reduce your server load, as well as load the assets faster
MP4 video tag?
If you can, do an interactive demo, see Pintura landing page hero for example.
Thanks Rik. The interactive demo is fantastic on Pintura. I wish I could do that with mine but will have to settle with animated demos for now. Also, see that my day job firm is your list of companies :-)
That’s awesome ;)
Hey Mark, you might find AirBnB lottie interesting - https://airbnb.design/introducing-lottie/
You're overthinking this. PNG or jpeg should be fine. So would video or gif to show a demo.
Just make sure you compress your files a bit to avoid serving a 20mb page and you'll be fine.