The poster image is the image that is displayed while a video is loading. There are even online services that will optimize video. If you're more technical, you can optimize videos using the command line using ffmpeg.
#Html optimizer for mobile webpage how to
When exporting your video, make sure to omit the audio channel.Īs far as how to optimize the video, we use a free Mac app called Handbrake, which has been around for many years and has a number of presets and settings that give you lots of control. 3) Remove the Audio Channelīackground videos won't autoplay with sound anyway, so an audio channel is not necessary. We're not producing a Hollywood movie, after all! Fewer frames means a smaller file size. 2) Keep The Frame Rate LowĪ frame rate of 24 or 25 frames per second is adequate. There really is no reason to export a background video in Full HD (1920 x 1080) - that's simply overkill and wastes bandwidth.
#Html optimizer for mobile webpage 720p
Your video can be HD (high definition), which is 720p video (1280 x 720 pixels). There are three main things to do here: 1) Keep Dimensions Standard HD Also, there may be text or a call to action link over the video, and a lot of motion will make that harder to see and interact with. You do not want to give your visitor a sense of vertigo when they visit your site if there is fast motion. If you need to show 60 seconds worth of content, maybe you need an actual promotional or marketing video! Reduce Motion and Speed A smaller duration clip keeps the size reasonable, and can begin streaming quicker. There is no reason for video to be longer than 15 or 20 seconds. Remember, this is a background video, not a product or instructional video.
Your team eating lunch, your office, people putting sticky notes hither and thither - news flash: your user has probably already read your value proposition and either desired to keep scrolling, clicked away, or closed the tab. No one is going to sit and watch a 60 second background video.
In this post I'll cover the main points you need to know when creating a background video for a website. The issue is that these videos can be large and degrade the user experience if not optimized correctly. There is no denying that a well done background video can really set the tone of your website and add impact to your page and message. Usually located at the top of a page, they bring life and motion to what might otherwise be another boring value proposition. You've seen them everywhere: large, full-width background videos on websites.
0 kommentar(er)
