The hero image is the first thing a visitor sees, and often the single heaviest file on your homepage. Get the hero image size wrong and you pay twice: a blurry banner on retina screens, or a 3 MB monster that destroys your Largest Contentful Paint score. This guide gives you the exact pixel dimensions, the file weight budget in KB, and the format decision, with the design rules that keep your headline readable on top of it.
What is a hero image?
A hero image is the large, full width visual placed at the top of a page, usually directly below the navigation bar. It sits in the “hero section”, a block that normally combines three elements:
- A dominant image, illustration or video poster frame
- A headline and a short supporting line of copy
- One primary call to action button
A “hero style image” simply means an image composed to work in that role: wide, with breathing room for text, a clear focal point, and no critical detail near the edges where responsive cropping will cut it off.
Hero image vs banner vs background image
- Hero image: above the fold, carries the main message, usually full viewport width.
- Banner: a thinner promotional strip, often reused on multiple pages or inside a slideshow.
- Background image: set in CSS behind content, decorative, and invisible to the HTML preload scanner, which makes it slower to load.
That last point matters: in most cases your hero should be a real <img> element, not a CSS background, so the browser can discover and prioritise it immediately.
Ideal hero image size: the numbers
There is no single magic number, because the hero is displayed on screens from 360 CSS pixels to 2560 CSS pixels wide. What you need is a set of exports served through srcset. Here is the set we use on client projects at Pixelbright. For the wider picture, see Responsive Hero Images.
| Device / breakpoint | Export size (pixels) | Aspect ratio | Target weight |
|---|---|---|---|
| Large desktop / 2K display | 2560 x 1440 | 16:9 | under 250 KB |
| Standard desktop | 1920 x 1080 | 16:9 | 120 to 180 KB |
| Laptop | 1440 x 810 | 16:9 | 80 to 130 KB |
| Tablet landscape | 1280 x 720 | 16:9 | 70 to 110 KB |
| Tablet portrait | 1024 x 1024 | 1:1 | 70 to 110 KB |
| Mobile (retina) | 800 x 1200 or 828 x 1035 | 2:3 or 4:5 | under 100 KB |
| Mobile (small / low DPR) | 640 x 800 | 4:5 | under 60 KB |
The short answer, if you only export one file
Export a master at 2400 x 1350 pixels (16:9), then let your CMS or CDN generate the smaller variants. 1920 pixels wide is the practical minimum for a full width desktop hero: below that, the image gets upscaled and looks soft on standard 1080p monitors, and worse on retina laptops.
Why mobile needs a different crop, not just a smaller file
A 16:9 image squeezed into a 390 pixel wide phone screen becomes a 219 pixel tall sliver. Your subject disappears. Two options:
- Art direction: ship a separate portrait crop (2:3 or 4:5) through
<picture>andmediaqueries. Best quality, slightly more work. - Safe zone cropping: keep the subject and all important detail inside the central 60 percent of the frame, then use
object-fit: coverwithobject-positionto control the crop. Faster to implement.
Common hero aspect ratios
- 16:9 (1920×1080): the default, works for most marketing sites.
- 21:9 (2560×1097): cinematic slim band, good when the hero sits above dense content.
- 3:2 (1800×1200): taller, more editorial, good for photography led brands.
- 4:5 (1080×1350): the standard portrait ratio on mobile and social. For the record, 1080 x 1350 is 4:5, not 3:4.
Target file weight: how many KB should a hero image be?
Your hero is almost always the LCP element, so its weight directly sets your Core Web Vitals ceiling. The budget we work to:
- Desktop hero: 100 to 200 KB. Acceptable upper limit 300 KB.
- Mobile hero: 60 to 100 KB. Hard ceiling 150 KB.
- Whole above the fold payload (HTML + CSS + fonts + hero): under 500 KB.
Quick maths on why: to hit a “good” LCP of 2.5 seconds on a mid range 4G connection (roughly 1.6 Mbps effective throughput after latency), you have about 300 KB of budget for everything that must load before the hero paints. A 1.5 MB JPEG straight out of Lightroom will take 7 seconds on its own.
How to hit that budget without ugly artefacts
- Resize first, compress second. Never upload a 6000 pixel wide original and let CSS shrink it.
- Use quality 70 to 80 for WebP, 60 to 70 for AVIF, 75 to 82 for JPEG. Above that you add KB nobody can see.
- Strip EXIF, GPS and colour profile metadata (keep sRGB only). This alone can save 30 to 80 KB.
- Apply a subtle blur or noise reduction to out of focus background areas before export. Compressors love smooth gradients.
- Avoid photos with heavy fine grain or confetti textures as heroes. They compress terribly.
WebP vs JPEG vs SVG vs AVIF: which format for your hero?
| Format | Best for | Typical size vs JPEG | Transparency | Verdict |
|---|---|---|---|---|
| WebP | Photographic heroes, universal support | 25 to 35 percent lighter | Yes | The safe default in 2026 |
| AVIF | Large, colourful photos where every KB counts | 40 to 55 percent lighter | Yes | Best compression, serve with a WebP fallback |
| JPEG | Fallback, legacy email clients, old CMS | Baseline | No | Keep as the last entry in your picture element |
| SVG | Flat illustrations, geometric patterns, abstract shapes, logos | Often under 15 KB | Yes | Unbeatable for vector art, never for photos |
| PNG | Screenshots, hard edged UI mockups | Usually heavier | Yes | Avoid as a full width hero |
The decision in one line
Photo hero? AVIF first, WebP fallback, JPEG last resort. Illustrated or vector hero? SVG, with the text kept as real HTML on top.
One warning about SVG heroes: a complex vector illustration with thousands of nodes and gradients can easily weigh 400 KB and block the main thread while the browser rasterises it. Run it through SVGO, reduce path precision to 2 decimals, and if it is still above 60 KB, export it as WebP instead.
Markup that keeps your LCP score healthy
Correct sizing is only half the job. The other half is telling the browser what matters.
<picture>
<source media="(max-width: 767px)"
type="image/avif"
srcset="hero-mobile-640.avif 640w, hero-mobile-828.avif 828w"
sizes="100vw">
<source media="(max-width: 767px)"
type="image/webp"
srcset="hero-mobile-640.webp 640w, hero-mobile-828.webp 828w"
sizes="100vw">
<source type="image/avif"
srcset="hero-1280.avif 1280w, hero-1920.avif 1920w, hero-2560.avif 2560w"
sizes="100vw">
<source type="image/webp"
srcset="hero-1280.webp 1280w, hero-1920.webp 1920w, hero-2560.webp 2560w"
sizes="100vw">
<img src="hero-1920.jpg"
width="1920" height="1080"
alt="Team reviewing a website design on a large screen"
fetchpriority="high"
decoding="async">
</picture>Non negotiable rules:
- Never add
loading="lazy"to the hero. It delays the LCP by a full round trip. Lazy loading is for images below the fold. - Always set
widthandheightattributes (or anaspect-ratioin CSS) to reserve the space and keep Cumulative Layout Shift at zero. - Use
fetchpriority="high"so the browser fetches the hero ahead of other images and scripts. - Preload only if the hero is a CSS background or injected by JavaScript. For a plain
<img>with fetchpriority, preload is usually redundant. - Self host your hero font or use
font-display: swap, otherwise the text over your hero is the LCP element and it is invisible until the font loads.
Design craft: making text readable over the image
A technically perfect hero that nobody can read is still a failure. The accessibility baseline is 4.5:1 contrast ratio for body sized text and 3:1 for large text (24 px and above, or 18.66 px bold).
Four reliable techniques
- Gradient scrim: a linear gradient from
rgba(0,0,0,0.65)to transparent over the side where the text sits. Preserves the photo while guaranteeing contrast. - Flat overlay: a 35 to 55 percent dark or brand coloured layer across the whole image. Simple, consistent, slightly flattens the photo.
- Split layout: text in a solid colour column, image in the other half. Zero contrast risk, and it lets you use a narrower, lighter image.
- Shoot or select for negative space: choose a photo with an empty sky, wall or blurred area where the headline can live naturally.
Composition rules for hero photography
- Keep faces and products out of the outer 20 percent on each side, that area gets cropped on narrow viewports.
- Place the focal point off centre so the headline has somewhere to go.
- Beware of busy mid tones behind white text. A photo that works at 1920 px can collapse into mush at 640 px.
- Check the hero at 1366 x 768, still one of the most common laptop resolutions. If your CTA button falls below the fold there, the hero is too tall.
- Limit hero height to roughly 60 to 80 vh. A full 100 vh hero hides every signal that there is more content below.
Hero image checklist before you publish
- Master exported at 2400 x 1350 px, sRGB, metadata stripped
- Variants at 2560, 1920, 1280 px wide plus a portrait mobile crop
- AVIF and WebP generated, JPEG fallback in place
- Desktop file under 200 KB, mobile file under 100 KB
fetchpriority="high", no lazy loading, width and height set- Descriptive alt text (or
alt=""if the image is purely decorative and the headline is HTML) - Text contrast checked at 4.5:1 against the darkest and lightest areas behind it
- LCP measured on a real phone, not just on your desktop, target under 2.5 seconds
FAQ
What is the best hero image size for a website?
1920 x 1080 pixels is the reliable desktop standard, with a 2560 px wide version for large displays and an 800 x 1200 portrait crop for mobile. Serve them all through srcset so each device downloads only what it needs.
How many KB should a hero image be?
Aim for 100 to 200 KB on desktop and 60 to 100 KB on mobile. Anything above 300 KB will measurably slow your Largest Contentful Paint on mobile connections.
Is WebP better than JPEG for hero images?
Yes. At equivalent visual quality WebP is typically 25 to 35 percent smaller than JPEG and is supported by every current browser. AVIF is smaller still, so the ideal chain is AVIF, then WebP, then JPEG as the final fallback.
Should I use SVG for a hero image?
Only if the artwork is vector based: flat illustrations, geometric patterns, abstract shapes. SVG scales infinitely and often weighs under 15 KB. It is the wrong choice for photographs, where the file would be enormous or impossible. The Dos & Don’ts of Website Hero Images covers this in more depth.
Is 1080 x 1350 a 4:5 or 3:4 ratio?
1080 x 1350 is 4:5. Divide both numbers by 270 and you get 4 by 5. A 3:4 version of the same width would be 1080 x 1440.
Should the hero image be a CSS background or an img tag?
Use an <img> inside a <picture> element. The browser preload scanner finds it in the raw HTML and can start downloading before the CSS is parsed. A CSS background is discovered later, which typically costs several hundred milliseconds of LCP.
Does the hero image need alt text?
If the image carries meaning that is not repeated in the headline, yes, describe it in a short factual sentence. If it is purely decorative behind HTML text, use an empty alt="" so screen readers skip it.
Need a hero that looks sharp and loads fast?
Most of the heroes we audit fail on one of two counts: a 2 MB file nobody compressed, or a 900 px image stretched across a 2560 px screen. Both are fixable in an afternoon. If you want us to review your homepage hero, your image pipeline and your Core Web Vitals, get in touch with the Pixelbright team.