What's the optimal file size for a HTML5 background loop?
My research:
The only related question I could find is specific to JWPlayer. My question is not specific to JWPlayer:
Optimal file size for html5 background video stream using JWPlayer?
Search engine results don't seem to make recommendations.
My question is:
Before answering that there is no optimal and the world is too beautiful and rife with variations to understand the answer, keep in mind that I am basing my question on average or most common internet connections.
In other words, if I wanted to reach most of the internet users without having significant download / performance issues, what should be the maximum file size limit?
source to share
According to Akami Internet Speed Rating 2014, the average internet speed in the world is 3.9 Mbps (roughly 500 KB per second or half a megabyte) .However, I would strongly suggest not aiming for averages, but aiming below average for optimization so that even more people have pleasant experience on your website. I would suggest optimizing for speed around 1.5 Mbps (around 185 KB per second). This means that if you want your page to load in a reasonable 10 seconds on a slow 1.5MB connection, it gets disconnected (the first time someone visits your site, it will speed up as the images are cached), your total the page must be less than 2MB. So you have to ask yourself, how much of the 2MB are you willing to use for the background image? I would suggest targeting around 150-300Kb for a background image. Use the programlike Photoshop, and Publish to Web to play with the background image settings and file types to resize it to whatever you want. I suggest avoiding Jpeg and targeting PNG.
source to share