Deciding on the right video dimensions to use for the web can be difficult. Unfortunately, there is not a one fits all size because it depends largely on your target audience. Usually, your best bet is to offer multiple sizes to ensure your video works for most of your website’s visitors. Now that devices like the iPhone and iPod are gaining in popularity, you may want to also offer a compatible size for these devices as well. To make things even more complicated, your video sizes should be evenly divisible by 16 to ensure the best possible output.
The following frame sizes should work well for the large majority of websites whose visitors are on broadband connections. If you need to target users on slower connections or other devices, you will need to create additional versions. Since most videos are either 16:9 (HD) or 4:3 (SD), I will provide dimensions based on both. Keep in mind that video does not scale up well to larger sizes, so if you source video is smaller than any of these sizes, you should only use the ones at the same sizes or smaller.
16:9 HD
1280×720 – iPad compatible*
512 x 288 – iPhone/iPod Touch compatible*
256×144 – If you do not need to support users with connections lower than 1mbps, you can omit this option.
4:3 SD
1024×768 – iPad compatible*
640×480 - iPhone/iPod Touch compatible*
320×240 - If you do not need to support users with connections lower than 1mbps, you can omit this option.
Note about SD video: If your source video is NTSC/DV, you should scale non-uniformly to 640×480/320×240 since the pixel aspect ratio of NTSC/DV is not designed for computer monitors.
* iPad/iPhone/iPod Touch compatible resolutions also require special encoding settings and a compatible video player to work correctly.
If you have any questions about these dimensions or need recommendations for your unique circumstances, please be sure to post in the comments!
4 Comments
say i have a video that was encoded in a multiple of 16 and is in a 16:9 aspect ratio.
i want to embed or put the video on my website. should the embed size also be a multiple of 16? is there any difference if my multiple is 8 or 4 as long as i stay within the same aspect ratio 16:9?
@Jeet – Ideally, you should keep the video dimensions evenly divisible by 16. If this isn’t possible, the next best alternative would be to ensure they are evenly divisible by 8 or 4. Can you tell me a bit more about your website requirements?
I have some video that was shot at NTSC/DV in 16:9. What would be the correct dimension size to encode to? Most of my videos usually get posted to YouTube. I had been encoding them to a dimension size of 872×480 and it seems to display correct, but I’ve noticed that it’s not divisible by 16 like you suggested. Have I been doing it wrong the whole time?
@Derick – You should be able to encode to any valid 16:9 resolution that is equal to or smaller than your source video. Normally I would not recommend using a larger than source resolution unless you use a special upsampling tool. Using divisible by 16 resolutions is more of a best practice than a right or wrong situation. For NTSC 16:9, I would recommend 640×360 or 512×288.