Ironically, this is meant to show MP4(left) vs GIF(right) advantages in a visual way, but it’s all a GIF...
The other day I came across someone asking how to make smaller-sized GIF files to showcase on their site. GIFs are awesome! No sounds, the autoplay on repeat, and there are no annoying controls when you hover over them. However, there’s a downside: the file size.
As cool as they are, GIFs tend to be a bit heavy, especially compared the same clips in MP4 version. I’ve seen 700kb MP4 videos become several mb GIFs! And when you try to reduce the file size, you run into artefacts and the quality goes down a lot. When making a website, you want to make sure that it is light enough so that your clients & friends don’t have to spend half a minute loading it. That’s why, by using MP4’s instead of GIFs for your animations -and a few lines of code- you can get similar results, with a fraction of the file-sizes!
This is personally what I do on my site, which you can see here. I haven’t optimised my MP4’s much but it’s already much better in terms of quality and file-size than doing the same with GIFs.
In order to embed an MP4 onto a website through HTML, you just need
<aside> 💡 If you are already getting a server/host for your website, you should be able to upload any videos onto the server and obtain a link. Personally -and since I use Squarespace- I opened an account on Amazon S3 where I host all my media.
</aside>
<aside> ⚠️ Theoretically, you could even use Dropbox links as a way to host the video. However, I haven’t tested that thoroughly and if the link ever changes, the code won’t be able to fetch the video anymore. If you want to try/test out using Dropbox, just replace the “dl=0” at the end of the link with “raw=1”.
</aside>