Optimize Video for Web on Mac

The marketing page embed stutters on mobile because the hero MOV is 120 MB and missing web-friendly metadata. Browsers can play many formats, but MP4 with H.264, sensible bitrate, and faststart still wins for predictable embeds and CMS uploads.

Core Web Vitals treat large media as a performance risk. A right-sized embed improves LCP even when the rest of the page is lean.

What web video needs

Web delivery differs from archiving a master or attaching a file to email.

Requirement	Why it matters
MP4 container	Widest HTML5 <video> support
H.264 video	Plays on Safari, Chrome, and Edge without extra plugins
AAC audio	Matches browser decoders
faststart (moov atom front)	Playback begins while the rest downloads
Moderate resolution	Hero at 1080p or 720p, not raw 4K

Modern codecs like VP9 and AV1 save bytes but add encode complexity and fallback needs. See what is VP9 and AV1 when you plan multi-codec pipelines. For a single embed today, H.264 MP4 remains the practical default.

Autoplay loops on landing pages should stay short. A 15-second loop at 720p often loads faster than a 60-second hero at 1080p with no gain in storytelling.

Compress in QuickTime for web

QuickTime Player is the fastest built-in path for one clip:

1. Open the source MOV or MP4.
2. Edit → Trim to the loop or demo segment the page needs.
3. File → Export As… → 1080p for desktop hero video, 720p for background loops.

QuickTime exports often work in browsers but may omit faststart optimization. If the progress bar sits at zero for seconds on a slow connection, re-mux or re-encode with FFmpeg below.

Keep a high-quality master elsewhere. The web copy should be the smallest file that still reads clearly at the embed size.

Muted autoplay is common on marketing sites. Export a version without loud audio spikes so visitors are not surprised when they unmute.

FFmpeg H.264 MP4 with faststart

Install FFmpeg via Homebrew (brew install ffmpeg).

Balanced web embed:

ffmpeg -i input.mov -c:v libx264 -crf 23 -preset medium -pix_fmt yuv420p \
  -c:a aac -b:a 128k -movflags +faststart web-hero.mp4

Downscale a 4K screen recording for a 960 px wide column:

ffmpeg -i input.mov -vf scale=1920:-2 -c:v libx264 -crf 24 -preset medium \
  -c:a aac -b:a 96k -movflags +faststart web-1920w.mp4

Flag	Plain meaning
-movflags +faststart	Moves index for progressive download
-pix_fmt yuv420p	Avoids playback issues in Safari
scale=1920:-2	Width 1920, height divisible by 2

Already have a good MP4 but no faststart? Remux without re-encoding:

ffmpeg -i input.mp4 -c copy -movflags +faststart output-faststart.mp4

Bitrate and resolution for embeds

Match pixels to the CSS width on the page, not to your monitor capture size.

Embed role	Starting export
Full-width hero (~1200 px)	1920 px wide, CRF 22 to 24
Inline demo (~800 px)	1280 px wide
Background loop, no audio	720p, lower CRF acceptable
Product UI with small text	1080p width minimum, spot-check zoom

Use the video file size calculator to estimate whether a clip fits your CDN or CMS cap before upload.

Read what is video bitrate when -crf exports still overshoot your budget. Frame rate at 30 fps is enough for most UI demos; 60 fps doubles frame data for little gain on a marketing embed.

Test playback before publish

Verify on the same networks your visitors use.

1. Open the MP4 in Safari and Chrome with throttled network in dev tools.
2. Confirm playback starts within a second on faststart exports.
3. Check mute-autoplay loops for visible compression on gradients.

Symptom	Likely fix
Long delay before first frame	Add faststart or lower bitrate
Blocky text	Raise CRF quality or export wider
Audio out of sync after trim	Re-encode audio instead of stream copy

Poster images matter for perceived speed. Pair a lightweight JPEG poster with the MP4 so layout does not jump while video buffers.

Encoding is only part of delivery. Give the element intrinsic dimensions, use preload="metadata" for ordinary controlled clips, provide captions when speech carries meaning, and avoid autoplay when the page works better without motion. Respect the user’s reduced-motion preference for decorative loops.

<video width="1280" height="720" controls preload="metadata" poster="demo-poster.jpg">
  <source src="product-demo.mp4" type="video/mp4">
</video>

When the same asset also goes to YouTube, compare notes with optimize video for YouTube on Mac . Web embeds usually tolerate slightly lower bitrates than upload mezzanines.

General compression workflows: how to compress video on Mac .

Schedule overnight encodes when a landing page refresh includes multiple hero variants. FFmpeg presets in a shell script beat hand-exporting each loop from QuickTime.

Using GetCompress

GetCompress prepares MOV and MP4 embeds locally on your Mac:

• Apply web 1080p or 720p loop presets across a folder of hero variants.
• Trim to loop points in the preview player before export.
• Set target file size on video when your CMS enforces a megabyte cap on uploads.
• Batch exports for localized landing pages that reuse the same motion layout.
• Keep pre-launch product footage on disk only during staging.

GetCompress is an easier alternative when FFmpeg one-liners multiply for every page template. Pair with image presets when the same launch includes heavy PNG screenshots in the repo.

Lazy-load embeds below the fold when your CMS supports it. The hero MP4 still deserves faststart, but secondary clips can defer download until the visitor scrolls.