Every video and product render on greenvaultsystems.com, re-cut for a fast site. Each card shows the format, the weight, and the edit. Hover nothing; everything plays as it scrolls into view.
Nine clips, 197.4 MB on the live site today
Re-encoded full length at 720p they weigh 27.4 MB (14%). The 6-second demo cuts below are what a hero or card actually needs.
Source file
Source
Length
Source weight
720p mp4 full
mp4 6s
webm 6s
webp 480
gif 480
20210730_185843000_iOS.mov
1920x1080 @30
22.4s
43.6 MB
3.7 MB8%
1.0 MB
1.4 MB
987 KB
3.8 MB
Bagger-Header-1.mp4
1200x400 @23.98
10.03s
733 KB
2.1 MB289%
1.3 MB
980 KB
276 KB
1.5 MB
Home-Page-Header_720p-1.mp4
1280x720 @24
30.76s
21.6 MB
3.2 MB15%
510 KB
495 KB
464 KB
2.4 MB
P-Flex-Header-1.mp4
1920x1080 @23.98
5.93s
8.2 MB
586 KB7%
586 KB
517 KB
564 KB
3.5 MB
Precision-Batcher-Hero.mp4
1920x1080 @23.98
26.07s
49.7 MB
2.5 MB5%
1.1 MB
1.3 MB
437 KB
2.5 MB
SMART_FEED_HEADER-1.mp4
1920x1080 @30
9.97s
7.2 MB
2.2 MB31%
1.3 MB
1.7 MB
1.0 MB
4.5 MB
Smart_Feed_Gif_Final.mp4
640x360 @30
5.06s
608 KB
897 KB147%
897 KB
1.1 MB
903 KB
4.1 MB
about-us.mp4
1920x1080 @23.98
114.71s
30.0 MB
10.9 MB36%
3.2 MB
5.2 MB
946 KB
3.5 MB
product-counter.mp4
1920x1080 @29.97
14.13s
35.8 MB
1.3 MB4%
565 KB
533 KB
367 KB
3.2 MB
20210730_185843000_iOS.mov
1920x1080 · 30 fps · 22.4s · 43.6 MB as served today
Formats
Same 6-second clip at 720p in every container a browser can play. Weight is the whole story here.
mp4-720p1.0 MB 2% of source
H.264 crf26, faststart, no audio. The workhorse: plays everywhere.
v/20210730_185843000_iOS/format-mp4-720p.mp4
webm-720p1.4 MB 3% of source
VP9 crf34. ~30% lighter than H.264 at the same look; no Safari < 14.
v/20210730_185843000_iOS/format-webm-720p.webm
webp-480w987 KB 2% of source
Animated WebP q60 @12fps. An <img>, autoplays anywhere, far lighter than GIF.
v/20210730_185843000_iOS/format-webp-480w.webp
gif-480w3.8 MB 9% of source
GIF 128 colours, bayer dither @10fps. Only for places that refuse video.
v/20210730_185843000_iOS/format-gif-480w.gif
poster131 KB 0% of source
Still frame @1s. Use as <video poster> so the hero paints instantly.
v/20210730_185843000_iOS/format-poster.jpg
Sizes
H.264 at three widths. Pick by the slot it fills, not the screen: a 480px card never needs 1280px.
1280w1.0 MB 2% of source
H.264 1280px wide.
v/20210730_185843000_iOS/size-1280w.mp4
854w451 KB 1% of source
H.264 854px wide.
v/20210730_185843000_iOS/size-854w.mp4
480w153 KB 0% of source
H.264 480px wide.
v/20210730_185843000_iOS/size-480w.mp4
Grades
Colour and tone edits baked in at encode time. The poster under each one is the same frame for a side-by-side.
lift1.1 MB 3% of source
Lift: +6 brightness, +12% contrast, +15% saturation. The safe default for footage shot flat.
Warm: reds/mids pushed up, blues pulled down, small contrast lift. Reads as brand-green-friendly.
v/product-counter/grade-warm.mp4
mono572 KB 2% of source
Mono: desaturated, +15% contrast. For backgrounds under text.
v/product-counter/grade-mono.mp4
Aspect ratios
Centre crops from the same source. Square for cards, 9:16 for mobile hero / reels, 21:9 for a cinematic banner.
1x1406 KB 1% of source
crop=min(iw\,ih):min(iw\,ih)
v/product-counter/aspect-1x1.mp4
9x16285 KB 1% of source
crop=min(iw\,ih*9/16):min(ih\,iw*16/9)
v/product-counter/aspect-9x16.mp4
21x9687 KB 2% of source
crop=min(iw\,ih*21/9):min(ih\,iw*9/21)
v/product-counter/aspect-21x9.mp4
Stills: 91 renders and photos, 168.7 MB as served
Same images as WebP at 1600px wide: 10.5 MB (6%). The 20 MB brochure PNGs are 4000px transparent renders shipped straight from the 3D package; nobody's screen needs that. Alpha survives in WebP, so the transparent cut-outs still float on any background.
Never a GIF for hero motion. The 480px GIFs here are 4 to 10x the mp4 at a fifth of the resolution. Use <video autoplay muted loop playsinline>; every browser treats it as an animated image once it's muted.
mp4 H.264 first, webm VP9 as the lighter sibling. Serve both in one <video> with two <source> tags, webm listed first. Safari picks mp4, everyone else saves ~30%.
Animated WebP for cards and thumbnails. It's an <img>, so it lazy-loads, sits in a <picture>, and needs no play logic. Use it under 500px wide and under 8 seconds.
Cut before you compress. The biggest win on every clip was trimming to 6 seconds, not the codec. A hero loop needs one clean motion, not 26 seconds.
720p is the ceiling for background video. Nobody reads text off it and it sits under an overlay. 1080p costs 2.2x the bytes for nothing visible.
Strip audio. Autoplay is muted by policy anyway; the track is dead weight and blocks autoplay on some mobile browsers if present.
Always a poster. The first paint should be a 60 KB JPEG, not a black box waiting on a 2 MB stream. Same frame, same grade as the video.
Grade at encode, not in CSS. A CSS filter re-renders every frame on the GPU and drifts between browsers. Bake lift / punch / warm in once with ffmpeg and ship one file per look.
Crop per slot. A 9:16 mobile hero cropped server-side is a third of the bytes of a 16:9 file the browser crops with object-fit.
Stills: WebP with alpha, 1600px max, three sizes in srcset. The brochure PNGs go from 20 MB to under 200 KB with the transparency intact. AVIF would shave another 30% once the build box has the encoder.
Keep the source. Everything here was cut from the site's own files. The originals from the render package or the camera would grade cleaner; ask for them.
