Exporting backgrounds for the web: format, resolution, and file size
July 9, 2026 · 2 min read
You made a background you love. Now you need it as a file that looks sharp and loads fast. Three choices decide that: format, resolution, and aspect ratio.
Format: WebP, PNG, or a video loop
- WebP — the best default for gradients and photographic backgrounds. It's much smaller than PNG at the same visual quality, and every modern browser supports it.
- PNG — reach for it when you need a lossless master, or when a tool in your pipeline doesn't accept WebP. Files are larger.
- Video loop (MP4/WebM) — use this when the background moves. Never export an animation as a giant GIF; a short MP4 or WebM loop is a fraction of the size and looks far better.
Resolution: export for retina
Screens are denser than they used to be, so a background sized 1:1 to your layout will look soft on a high-DPI display. A safe habit:
- Export at roughly 2× your display size. A full-width hero shown at 1280px wide looks crisp exported around 2560px.
- Don't go wildly bigger than you need — past 2× you're mostly adding file weight, not visible detail.
Aspect ratio: match where it lands
Pick the ratio for the slot the background lives in, so the browser doesn't have to crop or stretch it:
- 16:9 — desktop heroes and video backgrounds.
- 1:1 — social posts and avatars.
- 9:16 — mobile screens and stories.
Choosing the ratio before export means the composition is framed correctly, instead of getting awkwardly cut off later.
Keep it fast
A background is decoration — it shouldn't slow the page down. Two quick wins:
- Prefer WebP and stay at 2× (not 4×) unless you truly need it.
- For moving backgrounds, keep loops short (a few seconds) and let them repeat.
Do this and your background stays sharp on every screen without becoming the heaviest thing on the page.
Open the studio and try exporting the same look as WebP and as a loop to compare.