Resolution Guide
When to use 480p, 720p, 1080p, or higher for web video, and why bigger isn't always better.
Resolution is the second biggest factor in video file size after CRF. Choosing the right output resolution can cut file size in half without any visible quality loss.
Common Resolutions
| Width | Name | Aspect Ratio | Typical Use |
|---|---|---|---|
| 360px | - | 16:9 → 360x202 | Thumbnails, tiny previews |
| 480px | SD | 16:9 → 480x270 | Mobile-first, extreme compression |
| 720px | 720p | 16:9 → 720x405 | Background video, GIF replacement |
| 900px | - | 16:9 → 900x506 | Blog content, inline videos |
| 1280px | 720p HD | 16:9 → 1280x720 | General purpose web |
| 1920px | 1080p | 16:9 → 1920x1080 | Full HD, primary content |
| 2560px | 1440p | 16:9 → 2560x1440 | High-DPI displays |
| 3840px | 4K | 16:9 → 3840x2160 | Almost never needed for web |
JuicePress scales by width and calculates the height automatically to maintain the original aspect ratio.
How Resolution Affects File Size
The relationship between resolution and file size is roughly exponential, not linear. Doubling the width more than doubles the file size because there are 4x as many pixels:
| Resolution | Pixels | Relative Size |
|---|---|---|
| 480p (480x270) | 130K | ~0.15x |
| 720p (720x405) | 292K | ~0.3x |
| 900p (900x506) | 455K | ~0.5x |
| 1080p (1920x1080) | 2.1M | 1x (baseline) |
| 1440p (2560x1440) | 3.7M | ~1.8x |
| 4K (3840x2160) | 8.3M | ~4x |
Going from 1080p to 720p roughly halves the file size. Going from 1080p to 480p reduces it by ~85%.
Choosing the Right Resolution
Background / hero videos → 720p (720-900px)
Background videos sit behind overlays, text, and gradients. Fine detail is invisible. There is genuinely no reason to serve a 1080p or 4K background video.
- The overlay hides compression artifacts
- Most background videos are visually simple (slow motion, blurred)
- 720p behind a 50% opacity overlay is indistinguishable from 4K
Inline content videos → 900-1280px
Videos embedded in blog posts, product pages, or documentation. These sit in a content column that's typically 600-900px wide. Serving 1080p for a container that's 800px wide is wasteful.
- Match the video width to your content column width
- A 900px video in a 900px container looks perfect
- No need for 1080p unless the container is wider
Primary / featured videos → 1080p (1920px)
When the video IS the content: a product demo the user is actively watching, a tutorial, a portfolio piece. These deserve full quality.
- 1080p is sufficient for any screen size up to 27"
- 4K is only relevant for massive displays or when users will fullscreen
4K → Almost never for web
4K video on the web is almost always overkill:
- Most users' viewport is 1920px wide or less
- The bandwidth cost is 3-4x compared to 1080p
- Mobile users can't benefit from 4K on a 6-inch screen
- Even YouTube defaults to 1080p or lower on most connections
The only case for 4K is if you're specifically targeting large displays (digital signage, TV apps) and have the bandwidth budget.
Resolution and Mobile
Mobile devices have high-DPI screens (2x-3x pixel density), but that doesn't mean you need 4K video. Video decoding at high resolutions drains battery and uses bandwidth. Here's what actually works:
| Device | Screen Width | Recommended Video Width |
|---|---|---|
| Phone (portrait) | ~390px | 480-720px |
| Phone (landscape) | ~844px | 720-900px |
| Tablet (portrait) | ~820px | 900-1280px |
| Tablet (landscape) | ~1180px | 1280px |
| Laptop | ~1440px | 1280-1920px |
| Desktop | ~1920px | 1920px |
Users won't notice the difference between 720p and 1080p on a phone. They will notice the difference in load time and data usage.
JuicePress Width Snap Points
JuicePress provides quick-select buttons for common widths:
| Width | Preset That Uses It |
|---|---|
| 480px | Smallest |
| 720px | Video-GIF |
| 900px | Web |
| Source | HQ, Custom (default) |
The width slider goes from 240px to your source width, with snap points at 360, 480, 720, 900, 1280, 1440, 1680, 1920, 2560, and 3840 (filtered to only show values at or below your source resolution).
The Upscaling Rule
JuicePress never upscales. If your source video is 720p, the width slider caps at 720px. Upscaling adds file size without adding any real detail. It just interpolates pixels, creating a larger but not sharper image.
If you need a higher resolution output, start with a higher resolution source.
Quick Reference
Thumbnail / preview → 360-480px
Background / hero → 720px
Blog / inline content → 900px
General web → 1280px
Full HD featured video → 1920px
4K → Almost never