Sustainable Web Design: Optimizing Video for the Web

Posted by in Digital Marketing, Digital Media, Sustainability tagged with

Online video can be an impactful marketing and communications tool. In this post, we’ll examine common video file formats and how to optimize them. We will also explore how to use video on your website in ways that are both user- and environmentally-friendly.

Hosting and watching online videos isn’t as green as you might think. With large file sizes, videos require more energy for hosting and playback than images or text. Unless you’re serving videos from a green hosting provider, most of this energy does not come from renewable sources. Plus, serving videos to users who can’t watch them undermines why you invested in video in the first place.

While video can offer effective ways to convey key messages about your business or organization, you should consider several important things when serving them to users.

Prioritize Video User Experience (UX)

When optimizing videos for the web, the most important thing to remember is to prioritize a good experience for users. Good UX will improve user engagement with your videos, so make sure it remains a top priority. Some things to keep in mind:

  • Ditch the autoplay: Most video platforms include an option to autoplay your files. Don’t do this. Let users control when videos play.
  • Give low-bandwidth users options: Not everyone will view your videos on a high-speed broadband connection. Offer viewers on slower connections an option to view a more compressed version of your file or bypass the video altogether.
  • Resize video for mobile: If your page content resizes for mobile devices, your video content should too. Be sure to embed videos that adjust responsively based on the user’s display capabilities.
  • Respect screen real estate: Similarly, don’t interrupt a user’s video experience with pop-ups or ads that use precious screen real estate.

Not sure if users actually watch your videos? You can test this using standard conversion rate optimization techniques like A/B Testing. This will help you make more educated decisions about where to invest and how to prioritize your video efforts. Remember, most people watch online videos to be entertained or learn something (or sometimes both). Respect this and your users will thank you.

Common Video File Types

There are many different video file types, some of which will play better than others depending on different use cases. Also, matching your file type to the optimal platform reduces compression and playback issues, therefore using less energy. Here are five of the most common video formats:

  1. .mp4 compression provides good quality video with a small file size.
  2. .mov, the native QuickTime format, creates high quality video file size but requires QuickTime for playback.
  3. .wmv is a good quality video, also with large file size. It is also hard to play this format on Mac machines unless you have cross-platform media player like VLC.
  4. .avi was developed in the early 90s by Microsoft. With huge files sizes, it is not useful for web playback.
  5. .flv, the Flash video file format, was once used all across the web but with the popularity of Flash content dwindling—it doesn’t even play on most mobile devices—this is not recommended.

These aren’t, of course, all the available video formats, but they are some of the most widely used. Try to stick with the standards when creating, editing, and compressing video. Any proprietary formats will just cause additional, often unnecessary, headaches. This is especially relevant for playback. If your chosen format requires users to download something first, they’re out.

Optimizing Your Videos

Just like images, videos should be optimized for the web to ensure speedy playback. Many video uploads—especially self-hosted videos—fail to stream quickly and often pause during playback. Fortunately, there are plenty of programs that will reformat videos, rearranging file settings for faster playback, which helps them stream more smoothly across a multitude of devices. Handbrake, for example, is a popular open source video transcoder used for optimizing video, converting video files, and ripping DVDs.

Handbrake is extremely easy to use. To optimize a video for the web using Handbrake:

  1. Select your video by clicking “source”
  2. Set the destination of where the video gets saved in the “file” box
  3. In the “Quality” field set it to “Constant quality” of about 20 (good) to 25 (decent). This feature automatically sets a good video quality
  4. Check the small “Web optimized” box
  5. Now click the “Start” button and start encoding
screenshot of HandBrake Web Optimized Video
Handbrake’s video optimization settings

Video Length

One of the most important things you can do to both improve user experience and reduce video content’s environmental impact is to minimize video length. Even when optimized, video files are very large. The easiest way to reduce their size is to edit the content so that your primary message is front and center. If you want people to share your content, remember: don’t say in 10 minutes what you can say in two!

Where to Host Your Video

Once you have optimized your videos for the web, consider where you’re going to host them. Most people choose one of three options: hosting the video on their own site, uploading the video to a video platform like YouTube or Vimeo, or using an enterprise video platform. Since enterprise video platforms are cost-prohibitive for many organizations, we’ll focus on self-hosting and YouTube/Vimeo.

Self-Hosted Videos

Hosting a video on your own site is the least viable option for a number of reasons:

  1. Most shared hosting accounts are not configured to serve video files, which can slow down performance.
  2. If you see a spike in video traffic and overshoot your hosting account, it could shut down your website.
  3. Unless you have a hosting account specifically optimized to serve video content, videos will download rather than stream. This can cause choppy playback (see good UX above).

While adding a video to your own website might be viable if, for instance, you only want to share it with a few people who you know have speedy connections, we generally don’t recommend it.

YouTube vs. Vimeo for Video Hosting

There are, of course, many other video hosting platforms, but for the purposes of this post we’ll stick to these two. Both YouTube and Vimeo offer “share” options that allow you to embed a video on your site without actually hosting it there. You can change the dimensions of the video embed under the YouTube and Vimeo share options:

Image of YouTube's Share Embed settings
YouTube allows users to customize embed settings to place videos on your own website.

The question as to whether to host your video on Vimeo or YouTube depends on the goal of your video or campaign. Each has its pros and cons related to findability and playback. YouTube, which is owned by Google, is the second largest search engine on the planet, so its videos naturally show up often in search results.

However, perhaps privacy and security are concerns. While both platforms let you create private videos, managing permissions and privacy settings then becomes a big administrative issue. Or maybe you want a branded experience. YouTube’s videos are full of ads. These are all things to consider.

Video Platform Sustainability

Perhaps, like us, you want to host videos on servers powered by renewable energy. Google has made significant commitments to sustainability. In fact, they’re the largest non-utility investor in renewable energy in the world. By contrast, Vimeo currently has no sustainability policy in place. This means hosting your video on YouTube, at least for the time being, is a more sustainable option.

Good Data Cleanup Practices

Finally, good data cleanup practices are key to implementing a good corporate digital responsibility discipline within your organization. Unused data takes up unnecessary server space which costs money and wastes energy. Plus, if the software you use to manage the data is out-of-date or the data includes customer information it could be a privacy and security risk as well.

Be sure to remove videos from your online library that are outdated or only have a few views. Your sustainability and marketing efforts are both served when you’re smart about the content you share, keeping only the most relevant, useful, and best-performing videos.

Optimizing Video: Final Thoughts

Online video is a powerful tool in your marketing arsenal. However, success requires careful planning and consideration. By following good UX, hosting, and video optimization practices, you can be sure that your video not only keeps users engaged but also reduces its environmental impact as well.

Interested in learning about your website’s environmental impact? Check Mightybytes’ free website sustainability tool, Ecograder.

Mightybytes is a Chicago-based digital agency and Certified B Corporation. Connect with us on Twitter or get in touch via our contact form.