When you build your registration site in Delekit, the images and video you upload (your logo, banner, page content, and any background video) need to look sharp on both large desktop monitors and small mobile screens, and load quickly for every visitor. This guide gives you the recommended dimensions, formats, and file sizes for each image type, plus the requirements for background video, so your site looks polished on every device.
For the sharpest results on modern high-resolution displays, upload images at the sizes below or larger. Smaller images may appear soft or blurry when stretched to fit.
Quick reference
| Image | Recommended size | Shape | Best format | Recommended max file size |
|---|---|---|---|---|
| Logo (header) | 480 × 160px | Wide (~3:1) | SVG, or transparent PNG | 500 KB |
| Favicon / app icon | 512 × 512px | Square | PNG (transparent) | 200 KB |
| Banner / hero | 1920 × 640px | Wide (3:1) | JPG or WEBP | 1 MB |
| Full-page background | 2560 × 1440px | Widescreen (16:9) | JPG or WEBP | 2 MB |
| Content image | Up to 1600px wide | Any | JPG/WEBP for photos, PNG for graphics | 800 KB |
| Sponsor / exhibitor logo | 512 × 512px | Square, or fit to transparent | SVG or transparent PNG | 300 KB |
| Speaker / profile photo | 512 × 512px | Square | JPG or WEBP | 300 KB |
Where each image appears
Logo: Shown in the top corner of every page on your registration site. Upload it on a transparent background so it sits neatly against any header colour.
Favicon / app icon: The small square icon that appears in the browser tab and when someone saves your site to their phone's home screen. A square version of your logo or brand mark works best.
Banner / hero: The large image across the top of your home or landing page. This is the first thing attendees see, so choose something high quality and on-brand.
Full-page background: An optional image that sits behind your entire site. Use a subtle image or one with plenty of clear space, so text stays easy to read on top of it.
Content images: Any images you add within page content, such as venue photos, agenda graphics, or promotional artwork.
Sponsor / exhibitor logos: Logos displayed in sponsor or exhibitor sections. Transparent backgrounds keep them looking consistent.
Speaker / profile photos: Headshots for your speaker line-up. Square images display most reliably.
File formats
SVG: Best for logos and simple graphics. It stays perfectly crisp at any size, on any screen. Use this whenever you have it.
PNG: Best for logos and graphics that need a transparent background.
JPG: Best for photographs. Smaller file size than PNG.
WEBP: A modern format that keeps photos looking great at a smaller file size. A good choice if your design software can export it.
Background video
If your site uses a background video behind the hero or home page, it autoplays silently in a loop while attendees browse. Because every visitor downloads the video before they see your page, keeping the file small matters more than keeping it high-resolution. A heavy video is the most common cause of a slow-loading registration site, especially on mobile data.
| Requirement | Recommendation | Notes |
|---|---|---|
| Format | MP4 (H.264) | Widest browser support. Supply a WEBM (VP9) version too if you have one, for better compression. |
| Resolution | 1920 × 1080 (1080p) | Do not upload 4K. It bloats the file with no visible benefit behind page content. |
| Duration | 10 to 20 seconds | A short seamless loop. The first and last frames should match so there is no visible jump when it repeats. |
| Frame rate | 24 or 30 fps | Higher frame rates add file size for no real gain on a background. |
| File size | Under 5 MB, ideally 2 to 3 MB | This is the number that matters most. Compress firmly; it is a background, not a feature film. |
| Audio | None | Strip the audio track. Background video always plays muted, so audio is wasted file size. |
| Poster image | JPG or WEBP at 1920px wide | A still image matching the first frame. It shows instantly while the video loads, and displays on devices that block autoplay. |
Keep important content away from the edges. Like a wide banner, background video fills the full width of the screen and is cropped differently on desktop and mobile. Keep anything important (logos, faces, key action) towards the centre so it is not cut off.
Keep the area behind your text calm. Your page headline and buttons sit on top of the video. Keep that region consistently light or dark, and avoid busy or high-contrast footage there, so the overlaid text stays readable.
Expect a poster fallback on mobile. Autoplaying video uses data and battery, and some mobile browsers block it entirely. On smaller screens your page may show just the poster image instead of the video. This is normal, and it is why the poster image is required rather than optional.
Getting the best results on mobile and desktop
Keep important content centred in banners. On mobile phones, the left and right edges of a wide banner are cropped off to fit the narrower screen. If your banner includes text, a logo, or a key subject, keep it within the centre of the image, roughly the middle 60%, so nothing important is lost.
Upload larger rather than smaller. A slightly oversized image will be scaled down cleanly. A too-small image stretched to fit will look blurry or pixelated. When in doubt, go bigger.
Use SVG for your logo where possible. Unlike photos, logos exported as SVG stay razor-sharp at every size, from a browser tab favicon to a full-width header.
Compress before uploading. Large files slow your page down, especially on mobile data. Free tools such as TinyPNG or Squoosh can shrink file size significantly with no visible loss in quality.
Troubleshooting
My image looks blurry or pixelated. The uploaded image is smaller than the space it is filling. Re-upload at the recommended size or larger.
My banner looks fine on desktop but cut off on mobile. The edges of wide banners are cropped on narrow screens. Move any important content towards the centre of the image and re-upload.
My logo has a white box around it. The logo was saved with a solid background. Re-save it as a transparent PNG or SVG so it blends with your header.
My background video is slow to load or stutters. The file is too large. Re-export it at 1080p, trim it to a short loop, and compress it to under 5 MB.
My background video does not play on mobile. Some mobile browsers block autoplay to save data and battery, so your page shows the poster image instead. Make sure you have uploaded a poster image that looks good on its own.
My image or video will not upload. Check that the file is a supported format (PNG, JPG, WEBP, or SVG for images; MP4 or WEBM for video) and that it is within the maximum file size shown above.
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article