All docs
Helpful Info
Image Size Guide
Pixel dimensions and file-size targets for every image surface on your site: hero, competition cards, prizes, OG image.
Updated 3 August 20264 min read
Get image sizes right and your site loads fast, looks crisp, and scores well on Core Web Vitals. Get them wrong and you’re either pushing 10MB of unused pixels per page (slow) or your prizes look blurry on retina screens (looks cheap).
Quick reference
| Surface | Dimensions (px) | Format | Target size |
|---|---|---|---|
| Logo | Vector preferred · 600 height for raster | SVG / PNG (transparent) | < 50 KB |
| Competition main image (hero) | 1600 × 900 (16:9) | WebP / JPG | < 200 KB |
| Competition card thumb | 800 × 450 | WebP / JPG | < 80 KB |
| Prize detail image | 1200 × 1200 (square) | WebP / JPG | < 150 KB |
| Open Graph (homepage) | 1200 × 630 | PNG / JPG | < 300 KB |
| Game preview backdrops | 1920 × 1080 | WebP / JPG | < 250 KB |
How to compress
- WebP is the modern default. Quality 80–85 gives ~40% smaller files than JPG with no visible difference.
- Tools: squoosh.app (browser), tinypng.com (PNG/JPG), or any modern image editor with “Export for Web”.
- Don’t double-compress. Compress once at the source: re-uploading the same image multiple times multiplies quality loss.
Mobile vs desktop
We serve responsive images automatically, so there’s no separate mobile upload required. Upload at the largest size in the table above; the platform serves smaller variants to phones via Next/Image responsive srcset.
Logo edge cases
- Square logo. Crops awkwardly in the wide header. Add ~30% margin on a transparent canvas before upload.
- Logo with text on white. Looks bad on the dark theme. Re-export with transparent background OR ask your designer for a light-fill version.
- Animated logo. Not supported (the first frame is used as a fallback).