Design X · Images, Video & Mobile
Prepare media once, then control how it behaves across devices.
🎬 Video Prep Guide for Web
To prepare your videos for fast, smooth playback online, follow the steps below using Adobe Premiere Pro, Handbrake, or any video software you're comfortable with. Handbrake is a free and easy tool we recommend for compressing video files.
🔧 Step 1: Choose Your Software
-
Handbrake (Free, easy to use)
-
Adobe Premiere Pro (Professional editing)
-
Any other editor that allows custom export settings
🛠 If You're Using Handbrake
-
Open your video file in Handbrake.
-
Under Presets, choose one of the “Web” presets (e.g., “Fast 1080p30”).
-
Make sure these options are checked:
-
Format: MP4
-
Video Codec: H.264 (x264)
-
Framerate: Same as source, Constant
-
Tune: (Optional) None or “Film” for cinematic footage
-
Preset: Fast or Very Fast
-
Check “Web Optimized”
-
-
Click Start to begin encoding.
⚙ Recommended Encoding Settings (Any Software)
Use these settings to ensure compatibility and fast load times across all browsers and devices:
-
Format: MP4 (H.264 codec)
-
Resolution:
-
1280×720 (HD) – great for faster load and autoplay
-
1920×1080 (Full HD) – ideal for detail and full-screen playback
-
-
Video Bitrate:
-
720p: 1,500–2,500 kbps
-
1080p: 3,000–5,000 kbps
-
-
Audio:
-
Codec: AAC (Stereo)
-
Bitrate: 128–160 kbps
- Use CRF (Constant Quality) mode in Handbrake instead of average bitrate:
-
-
Framerate: Match source (usually 24, 30, or 60 fps)
-
Extras (if available):
-
✅ Web Optimized
-
✅ Enable Streaming or Fast Start
-
✅ Optimize for server or playback
-
📦 File Size Tips
After encoding, check your video’s final size. For best performance:
-
Keep video files under 200MB
-
Ideal: 50–100MB for videos under 2–3 minutes
-
-
Smaller files = faster loading
-
Larger files = slower load, may buffer on slower connections
Comments
0 comments
Article is closed for comments.