Publishing & Settings, SEO

Optimizing Video files for the Web

Optimizing Video files for the Web

Optimizing Video files for the Web

·

5:34

·

12K views

·

About this lesson

Learn how to optimize video files for Framer to keep your websites fast, lightweight, and high-performing. In this tutorial, we’ll show you how to use tools like Adobe Media Encoder and HandBrake to compress video, choose the best format, and set the right bitrate and resolution. You’ll also learn simple best practices for background videos, product demos, and motion elements so they look sharp, load quickly, and deliver a smooth user experience. Optimizing videos for the web not only improves site speed but also boosts SEO and performance across devices.

https://www.youtube.com/watch?v=tg5nSMAkWZE&t=0s Introduction

https://www.youtube.com/watch?v=tg5nSMAkWZE&t=28s Video Types

https://www.youtube.com/watch?v=tg5nSMAkWZE&t=56s Why Optimize

https://www.youtube.com/watch?v=tg5nSMAkWZE&t=116s Optimization Tools

https://www.youtube.com/watch?v=tg5nSMAkWZE&t=160s Format, Bitrate & Quality

https://www.youtube.com/watch?v=tg5nSMAkWZE&t=247s Resolution

https://www.youtube.com/watch?v=tg5nSMAkWZE&t=282s Best Practices

https://www.youtube.com/watch?v=tg5nSMAkWZE&t=306s Outro

Sign up: https://framer.link/yt

Follow: https://framer.link/yt-x

Learn: https://framer.link/yt-academy

0:00Adding video to your framer site is one0:02of the fastest ways to make it feel0:04alive, [music] grab attention, and add0:06energy you can't always get from static0:08images. But if those videos aren't0:10optimized, they [music] can slow down0:12your site, eat up bandwidth, and create0:14a slower, more frustrating [music]0:16experience. So, we're going to break0:18down the why and the how of keeping your0:21videos looking great while [music] still0:23performing smoothly in Frame.0:29In Framer, videos fall into two buckets.0:32The first are embedded videos from0:34thirdparty platforms like YouTube or0:36Vimeo, which are best for long- form0:39content, but the second are video files0:42that are directly inside of our framer0:44projects. And that's what we're going to0:46focus on in this lesson. These types of0:49videos often get used for short0:51background loops, UI demos, or quick0:53displays of complex animation. It's0:56important to know that while Framer0:58automatically optimizes any images we1:00upload to our site, videos are a bit1:03different. Framer helps how they load,1:05but it doesn't shrink or optimize the1:07file size itself. That's on us, the1:10designer. And while a 10 megabyte video1:12might sound pretty lean, it can still1:14drag down your site's loading speed,1:17especially if it's sitting in your1:18header. The goal is to keep videos at 51:21megbytes or less since larger video1:24files also eat up bandwidth. The good1:27news is Framer only loads videos when1:29they're near the viewport. So extra1:31videos further down the page won't1:34impact initial load. This allows us to1:36load multiple videos on a page without1:38worrying about blocking interactions.1:41Optimizing video files also gives us two1:44easy wins. Search engines reward fast1:47sites with better SEO and mobile1:49visitors get a smoother experience even1:52on slower networks. All right, so now1:54that we've covered the why, let's move1:56into the how. Starting with a few tools1:59that you can use to optimize your videos2:01before bringing them into Framer. First2:04up is Adobe Media Encoder, which is a2:07part of Adobe Creative Cloud and a2:09natural fit if you're already working in2:11Premiere or After Effects. It has a ton2:13of flexibility for exporting multiple2:15formats and resolutions and is a great2:17option if you're already part of the2:19Adobe ecosystem.2:21Then there's Handbreak, an open-source2:24video transcoder that's free,2:26crossplatform, and really easy to use.2:29It's perfect for quick exports and2:31dialing in your file size without any2:33extra hassle. And for most cases,2:36Handbreak is more than enough to get2:37your videos optimized for the web.2:40Whichever tool you go with, the key is2:42choosing the right settings before you2:44export your video. Things like format,2:46compression, and resolution have the2:49biggest impact when it comes to2:50optimization.2:52So, let's start with file format, which2:54is important because it determines two2:56things. How compatible your video is2:58across browsers and devices, and how3:01efficiently the video is compressed.3:04Choosing the right format makes sure3:06your video looks good, plays everywhere,3:09and stays lightweight. H.264 is the3:13safest choice because it's supported by3:15almost every browser and device, while3:17H.265 and WebM can shrink file sizes3:20even further, but the support is less3:23universal. Then there's bit rate, which3:25is basically how much data your video3:27uses per second. Higher bit rate means3:30better quality but heavier files and3:33lower bit rates shrink the size but risk3:35making your video look blurry or blocky.3:38For most web video, the sweet spot is 23:41to 4 megabits per second. Handbreak and3:44media encoder both make it easy to3:46adjust bit rate and even give us some3:48options to optimize files specifically3:51for playback on the web. Here's the3:53thing. There isn't a universal setting3:55that works for every video. Some clips3:58can be compressed more aggressively than4:00others. The only way to know is to test4:02and tweak until you land on the smallest4:05file size with the best quality. Another4:08factor that directly impacts your4:09video's file size is resolution.4:12Basically, how wide and tall your video4:14is in pixels. Higher resolution means4:17more detail, but also larger files. The4:20key is to only export video at the size4:23will actually be displayed on your site.4:26For example, full width background video4:28needs more detail. Small inline cards4:31don't. Dropping in a giant 4K file for a4:35small section doesn't add quality. It4:38just adds weight. So, always match the4:40resolution to the placement. Beyond4:43resolution, there are a couple of other4:45things that can help keep your videos4:46light and performant. Keep the videos4:49short, at least under 15 seconds. Trim4:53extra frames. Make loops seamless and4:56remove audio to keep files small and4:58avoid autoplay issues. If your video5:01really needs sound, it's probably better5:03for YouTube or Vimeo.5:06Optimized videos aren't just lighter5:08[music] files. They actually create5:10better experiences for your users. So,5:13by choosing the right format, matching5:15the resolution to how the video will be5:17displayed, and dialing in the5:19compression, you'll keep your videos5:21light, looking great, and loading5:23smoothly. Thanks for watching, and I'll5:26see you in the next video.5:30>> [music]
Also coversFrames

Watch on YouTube ↗

‹ Setting Up custom cursors in Framer (Animation Lesson 16)

Wireframer: Blogs and Changelogs with CMS ›

More in this topic

Hard work, easy website. Get a Free Domain with Framer.0:20
Hard work, easy website. Get a Free Domain with Framer.
Announcement13M views · 4 months ago
This website never happened — Get a free domain with Framer0:22
This website never happened — Get a free domain with Framer
Publishing & Settings4.7M views · 4 months ago
Free Domains with Framer: Go Build It0:16
Free Domains with Framer: Go Build It
Publishing & Settings9.1M views · 4 months ago
Introducing Advanced Hosting in Framer2:28
Introducing Advanced Hosting in Framer
Announcement7K views · 4 months ago
Transferring Framer projects to clients2:04
Transferring Framer projects to clients
Publishing & Settings9K views · 5 months ago
Creating Remix Links in Framer1:29
Creating Remix Links in Framer
Publishing & Settings3K views · 6 months ago
Make a Custom 404 Page in Framer1:35
Make a Custom 404 Page in Framer
Layout & Design4K views · 7 months ago
How to get the most out of Framer for Free4:05
How to get the most out of Framer for Free
Animations15K views · 8 months ago

Create a free website with Framer, the website builder loved by startups, designers and agencies.