{"course":{"slug":"motion-and-audio","title":"Motion, Sound and Music","url":"https://addaly.com/learn/motion-and-audio","level":"intermediate","track":"create"},"lesson":{"slug":"exporting-without-a-huge-file","title":"Your hero video is why the page feels slow","url":"https://addaly.com/learn/motion-and-audio/exporting-without-a-huge-file","position":44,"of":72,"minutes":10,"answer":"File size follows how much changes between frames, not how many pixels are in one, so bitrate and content, not resolution, are the levers.","keyIdea":"File size follows how much changes between frames, not how many pixels are in one, so bitrate and content, not resolution, are the levers."},"body":{"format":"markdown","text":"## The hero video is why the page feels slow\n\nA 40 MB autoplaying video at the top of a landing page is a common and expensive mistake. On a 3G connection in a place where data costs money, it is not slow: it is a decision to lose that visitor.\n\nMost people trying to shrink a video only touch resolution. Resolution is the least useful of the three dials.\n\n## The three dials\n\n**Resolution**: the pixel dimensions. Dropping 1080p to 720p helps, and on a phone-sized display nobody sees it.\n\n**Bitrate**: how many bits per second the encoder is allowed to spend. This is the real size lever. Fifteen seconds of 1080p H.264 at 8 Mbps is about 15 MB. The same clip at 3 Mbps is under 6 MB and, watched on a phone, is frequently indistinguishable.\n\n**Codec**: the compression scheme itself.\n\n## Why some clips compress and others do not\n\nVideo compression stores one complete frame and then, for the frames that follow, only what changed. This is the whole trick, and it explains almost everything about file sizes.\n\nA talking head against a plain wall changes very little between frames, so there is almost nothing to store, and it compresses to nearly nothing. Rain, confetti, water, foliage in wind, fast pans and film grain change every pixel every frame. There are no cheap differences left, and the encoder has to spend real bits. Two clips at identical settings can differ by six times in size, and neither one is broken.\n\nTwo practical consequences. Adding grain or noise for a filmic look multiplies your file size. And a slow gradient (a clear sky, a soft background) will band into visible steps at low bitrates, because gradients are exactly what a quantiser throws away first.\n\nThe complete frames are called keyframes, and the interval between them is worth setting to about two seconds for anything streamed, so a viewer who scrubs does not wait. Shorter intervals mean bigger files.\n\n## Getting the file smaller\n\n### Which codec\n\n- **H.264** plays on everything, including old phones and old browsers. Default choice.\n- **H.265 / HEVC** is roughly 30 to 50 per cent smaller for the same quality, but it is patent-encumbered and browser support is inconsistent.\n- **VP9** is well supported in browsers, royalty-free, and slow to encode.\n- **AV1** is the smallest and the slowest to encode; decoding is now widespread but not universal on older Android devices.\n\nFor a website, serve H.264 and, if you can be bothered to provide two sources, VP9 or AV1 as the first option with H.264 as the fallback.\n\n### A command that does the job\n\n**HandBrake** is free, has a graphical interface, and will get you most of the way with the \"Web Optimized\" presets. **ffmpeg** is free and does everything. Resolve's free Deliver page has sensible YouTube and web presets.\n\n```bash\nffmpeg -i in.mov -vf scale=1280:-2 -c:v libx264 -crf 24 -preset slow \\\n  -pix_fmt yuv420p -movflags +faststart -an out.mp4\n```\n\n- `-crf 24` sets quality rather than a fixed bitrate; lower is better and bigger, and a change of about 6 roughly halves or doubles the size. Try 20 for something detailed, 28 for a plain talking head.\n- `-preset slow` spends more time encoding to get a smaller file. It costs you minutes and saves megabytes.\n- `-pix_fmt yuv420p` is required for playback on a lot of hardware. Files that play on your Mac and fail everywhere else are usually missing it.\n- `-movflags +faststart` moves the file's index to the beginning so the video starts playing before it has finished downloading. On a slow connection this is the difference between a video that starts and one that appears broken.\n- `-an` drops the audio track. If the video is silent, that is free bytes.\n- `scale=1280:-2` sets the width and lets the height follow, rounded to an even number, which the encoder requires.\n\n### Stop using GIF\n\nA GIF has a 256-colour palette and no modern inter-frame compression. A three-second GIF that comes to 5 MB is the same three seconds an MP4 delivers in 200 KB, with better colour and no dithering.\n\nReplace it with a muted, looping video:\n\n```html\n<video autoplay muted loop playsinline poster=\"first-frame.jpg\"></video>\n```\n\n`playsinline` is the attribute people forget. Without it, iOS takes the video fullscreen instead of playing it in place.\n\nFor transparency on the web, you need WebM with VP9 alpha for Chrome and Firefox and HEVC with alpha for Safari, served as two sources, or, if the content is vector rather than photographic, a Lottie file instead, which is usually the better answer.\n\nEverything above is about delivery. The cutting, pacing and grading that come before it are [video editing](/learn/video-editing)'s subject, not this one's.\n\n## Two habits\n\nSet `preload=\"none\"` and a poster image on anything below the fold, so a visitor on mobile data does not download a video they never scroll to.\n\nAnd judge quality on a phone at arm's length, in daylight, not on your monitor zoomed to 200 per cent. Almost every video on the internet is over-encoded for a viewing condition nobody experiences."},"check":{"question":"Two fifteen-second 1080p clips are exported with identical settings from the same project. The talking head comes out at 4 MB; a shot of falling rain comes out at 26 MB. What explains it?","options":[{"text":"The rain clip contains far more distinct colours, and colour information is what dominates video file size.","correct":false,"tempting":"Assumes size tracks the size of the palette rather than how much changes from one frame to the next."},{"text":"The encoder raised the effective resolution of the rain clip to preserve fine detail.","correct":false,"tempting":"Believes an encoder changes frame size to protect quality, rather than spending more bits inside a fixed frame size."},{"text":"Compression stores one full frame and then only the differences; in rain almost every pixel changes every frame, so there are few cheap differences left and the encoder has to spend real bits.","correct":true},{"text":"The talking head has been over-compressed and has quietly lost quality that the rain clip retained.","correct":false,"tempting":"Reads a small file as a quality failure rather than as content that genuinely needs fewer bits."}]},"prev":{"slug":"frame-rate-and-cadence","title":"Frame rates, shutter and judder","url":"https://addaly.com/learn/motion-and-audio/frame-rate-and-cadence"},"next":{"slug":"ffmpeg-the-free-path","title":"The tool under most of the others","url":"https://addaly.com/learn/motion-and-audio/ffmpeg-the-free-path"},"authorship":"Founder and series editor: Dr Mustafa Mun. Written by AI models to a written standard. Exam keys checked blind by a second model: 3,665 of 3,666 agreed. Academic review invited.","review":{"status":"Draft, open for academic review"},"cite":"Addaly (2026) 'Your hero video is why the page feels slow', in Motion, Sound and Music. Edited by M. Mun. Addaly. Available at: https://addaly.com/learn/motion-and-audio/exporting-without-a-huge-file (Accessed: 31 October 2026).","licence":{"name":"CC BY-NC-SA 4.0","url":"https://creativecommons.org/licenses/by-nc-sa/4.0/"},"reader":{"schema":1,"title":"Your hero video is why the page feels slow","courseTitle":"Motion, Sound and Music","module":{"index":5,"slug":"codecs-colour-and-delivery","title":"Codecs, colour and delivery"},"answer":null,"keyIdea":"File size follows how much changes between frames, not how many pixels are in one, so bitrate and content, not resolution, are the levers.","hero":{"kind":"plate","image":null,"alt":null,"caption":null},"blocks":[{"t":"h2","id":"the-hero-video-is-why-the-page-feels-slow","runs":[{"text":"The hero video is why the page feels slow"}]},{"t":"p","runs":[{"text":"A 40 MB autoplaying video at the top of a landing page is a common and expensive mistake. On a 3G connection in a place where data costs money, it is not slow: it is a decision to lose that visitor."}]},{"t":"p","runs":[{"text":"Most people trying to shrink a video only touch resolution. Resolution is the least useful of the three dials."}]},{"t":"h2","id":"the-three-dials","runs":[{"text":"The three dials"}]},{"t":"p","runs":[{"text":"Resolution","b":true},{"text":": the pixel dimensions. Dropping 1080p to 720p helps, and on a phone-sized display nobody sees it."}]},{"t":"p","runs":[{"text":"Bitrate","b":true},{"text":": how many bits per second the encoder is allowed to spend. This is the real size lever. Fifteen seconds of 1080p H.264 at 8 Mbps is about 15 MB. The same clip at 3 Mbps is under 6 MB and, watched on a phone, is frequently indistinguishable."}]},{"t":"p","runs":[{"text":"Codec","b":true},{"text":": the compression scheme itself."}]},{"t":"h2","id":"why-some-clips-compress-and-others-do-not","runs":[{"text":"Why some clips compress and others do not"}]},{"t":"p","runs":[{"text":"Video compression stores one complete frame and then, for the frames that follow, only what changed. This is the whole trick, and it explains almost everything about file sizes."}]},{"t":"p","runs":[{"text":"A talking head against a plain wall changes very little between frames, so there is almost nothing to store, and it compresses to nearly nothing. Rain, confetti, water, foliage in wind, fast pans and film grain change every pixel every frame. There are no cheap differences left, and the encoder has to spend real bits. Two clips at identical settings can differ by six times in size, and neither one is broken."}]},{"t":"p","runs":[{"text":"Two practical consequences. Adding grain or noise for a filmic look multiplies your file size. And a slow gradient (a clear sky, a soft background) will band into visible steps at low bitrates, because gradients are exactly what a quantiser throws away first."}]},{"t":"p","runs":[{"text":"The complete frames are called keyframes, and the interval between them is worth setting to about two seconds for anything streamed, so a viewer who scrubs does not wait. Shorter intervals mean bigger files."}]},{"t":"h2","id":"getting-the-file-smaller","runs":[{"text":"Getting the file smaller"}]},{"t":"h3","id":"which-codec","runs":[{"text":"Which codec"}]},{"t":"ul","items":[[{"text":"H.264","b":true},{"text":" plays on everything, including old phones and old browsers. Default choice."}],[{"text":"H.265 / HEVC","b":true},{"text":" is roughly 30 to 50 per cent smaller for the same quality, but it is patent-encumbered and browser support is inconsistent."}],[{"text":"VP9","b":true},{"text":" is well supported in browsers, royalty-free, and slow to encode."}],[{"text":"AV1","b":true},{"text":" is the smallest and the slowest to encode; decoding is now widespread but not universal on older Android devices."}]]},{"t":"p","runs":[{"text":"For a website, serve H.264 and, if you can be bothered to provide two sources, VP9 or AV1 as the first option with H.264 as the fallback."}]},{"t":"h3","id":"a-command-that-does-the-job","runs":[{"text":"A command that does the job"}]},{"t":"p","runs":[{"text":"HandBrake","b":true},{"text":" is free, has a graphical interface, and will get you most of the way with the “Web Optimized” presets. "},{"text":"ffmpeg","b":true},{"text":" is free and does everything. Resolve’s free Deliver page has sensible YouTube and web presets."}]},{"t":"code","lang":"bash","label":"Bash","text":"ffmpeg -i in.mov -vf scale=1280:-2 -c:v libx264 -crf 24 -preset slow \\\n  -pix_fmt yuv420p -movflags +faststart -an out.mp4"},{"t":"ul","items":[[{"text":"-crf 24","code":true},{"text":" sets quality rather than a fixed bitrate; lower is better and bigger, and a change of about 6 roughly halves or doubles the size. Try 20 for something detailed, 28 for a plain talking head."}],[{"text":"-preset slow","code":true},{"text":" spends more time encoding to get a smaller file. It costs you minutes and saves megabytes."}],[{"text":"-pix_fmt yuv420p","code":true},{"text":" is required for playback on a lot of hardware. Files that play on your Mac and fail everywhere else are usually missing it."}],[{"text":"-movflags +faststart","code":true},{"text":" moves the file’s index to the beginning so the video starts playing before it has finished downloading. On a slow connection this is the difference between a video that starts and one that appears broken."}],[{"text":"-an","code":true},{"text":" drops the audio track. If the video is silent, that is free bytes."}],[{"text":"scale=1280:-2","code":true},{"text":" sets the width and lets the height follow, rounded to an even number, which the encoder requires."}]]},{"t":"h3","id":"stop-using-gif","runs":[{"text":"Stop using GIF"}]},{"t":"p","runs":[{"text":"A GIF has a 256-colour palette and no modern inter-frame compression. A three-second GIF that comes to 5 MB is the same three seconds an MP4 delivers in 200 KB, with better colour and no dithering."}]},{"t":"p","runs":[{"text":"Replace it with a muted, looping video:"}]},{"t":"code","lang":"html","label":"HTML","text":"<video autoplay muted loop playsinline poster=\"first-frame.jpg\"></video>"},{"t":"p","runs":[{"text":"playsinline","code":true},{"text":" is the attribute people forget. Without it, iOS takes the video fullscreen instead of playing it in place."}]},{"t":"p","runs":[{"text":"For transparency on the web, you need WebM with VP9 alpha for Chrome and Firefox and HEVC with alpha for Safari, served as two sources, or, if the content is vector rather than photographic, a Lottie file instead, which is usually the better answer."}]},{"t":"p","runs":[{"text":"Everything above is about delivery. The cutting, pacing and grading that come before it are "},{"text":"video editing","href":"https://addaly.com/learn/video-editing"},{"text":"’s subject, not this one’s."}]},{"t":"h2","id":"two-habits","runs":[{"text":"Two habits"}]},{"t":"p","runs":[{"text":"Set "},{"text":"preload=\"none\"","code":true},{"text":" and a poster image on anything below the fold, so a visitor on mobile data does not download a video they never scroll to."}]},{"t":"p","runs":[{"text":"And judge quality on a phone at arm’s length, in daylight, not on your monitor zoomed to 200 per cent. Almost every video on the internet is over-encoded for a viewing condition nobody experiences."}]}],"check":{"question":[{"text":"Two fifteen-second 1080p clips are exported with identical settings from the same project. The talking head comes out at 4 MB; a shot of falling rain comes out at 26 MB. What explains it?"}],"options":[{"text":[{"text":"The rain clip contains far more distinct colours, and colour information is what dominates video file size."}],"correct":false,"tempting":[{"text":"Assumes size tracks the size of the palette rather than how much changes from one frame to the next."}]},{"text":[{"text":"The encoder raised the effective resolution of the rain clip to preserve fine detail."}],"correct":false,"tempting":[{"text":"Believes an encoder changes frame size to protect quality, rather than spending more bits inside a fixed frame size."}]},{"text":[{"text":"Compression stores one full frame and then only the differences; in rain almost every pixel changes every frame, so there are few cheap differences left and the encoder has to spend real bits."}],"correct":true,"tempting":null},{"text":[{"text":"The talking head has been over-compressed and has quietly lost quality that the rain clip retained."}],"correct":false,"tempting":[{"text":"Reads a small file as a quality failure rather than as content that genuinely needs fewer bits."}]}],"order":[3,1,0,2],"why":null},"prev":{"slug":"frame-rate-and-cadence","title":"Frame rates, shutter and judder","minutes":10},"next":{"slug":"ffmpeg-the-free-path","title":"The tool under most of the others","minutes":10}}}