How to Design a Website Header Image

A good website header image is designed around its container, content, and focal point—not a universal pixel size. Keep the important subject in a crop-safe area, place headlines and controls in real HTML, serve responsive image sources, and verify contrast at every breakpoint.

1. Start with the header’s purpose

Before choosing dimensions or an image, decide what the header must communicate. A product hero may need to show one device or person. A campaign banner may need an uncluttered area for a headline and call to action. A decorative masthead may only establish atmosphere.

• Choose one focal subject. The subject should remain recognizable when the sides are cropped on a phone.
• Reserve low-detail space. Leave calm space where the live heading, logo, navigation, or buttons will sit.
• Map the likely crops. Sketch the desktop, tablet, and narrow-phone containers before finalizing the artwork.
• Keep essential meaning out of the bitmap. Headlines, navigation labels, prices, and calls to action belong in HTML.

MDN’s responsive-image example describes keeping the chosen focal area centered as the heading width changes and warns that wide images can lose their sides on narrow screens. Use that principle for your own focal point and crop strategy: MDN: Using responsive images in HTML.

2. Choose a crop strategy instead of one “best” size

There is no universal best header dimension. The right aspect ratio depends on the header’s height, breakpoints, copy length, and focal subject. A short desktop banner may become a taller mobile hero, or the image may be cropped to a consistent height with object-fit: cover.

Header situation	Practical approach	Risk to check
Informative photo or illustration	Use an <img> with responsive sources and meaningful alt text.	The subject can disappear when the container narrows.
Purely decorative background	Use CSS background images or a presentational <img alt="">.	Important meaning may be hidden from assistive technology.
Text over an image	Reserve a quiet region and add a tested overlay or gradient.	Contrast changes after cropping.
Different composition on mobile	Use <picture> with a mobile-specific crop.	Two art directions can drift out of sync.

For an <img>, keep the bitmap inside its container with fluid sizing:

.hero img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
}

Adjust object-position to keep the focal subject visible. Treat the percentage as a design setting that must be reviewed at each breakpoint.

3. Put the headline and controls in HTML

HTML text can be resized, translated, indexed, focused, and read by assistive technology. Text baked into the image fails when users zoom, when the image is blocked, and when a narrow crop removes the words.

<header class="hero">
  <img
    src="hero-1200.jpg"
    srcset="hero-640.jpg 640w, hero-1200.jpg 1200w, hero-2000.jpg 2000w"
    sizes="100vw"
    alt=""
  >
  <div class="hero__shade" aria-hidden="true"></div>
  <div class="hero__content">
    <p class="eyebrow">Release notes</p>
    <h1>Clear page promise</h1>
    <p>Short supporting line that remains useful when the image is unavailable.</p>
    <a class="button" href="/learn-more">Learn more</a>
  </div>
</header>

.hero {
  position: relative;
  min-height: clamp(20rem, 55vw, 38rem);
  overflow: hidden;
  isolation: isolate;
}
.hero > img,
.hero__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero__shade {
  z-index: -1;
  background: linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.18));
}
.hero__content {
  position: relative;
  max-width: 42rem;
  padding: clamp(1.5rem, 6vw, 5rem);
  color: white;
}

Use a meaningful alt sentence if the image itself conveys information. If the heading already explains the purpose and the image is decorative, use alt="". Do not repeat a nearby heading word for word.

4. Build responsive image sources

Sending one large image to every device wastes bandwidth. With srcset and sizes, the browser can select a source appropriate to the rendered width. MDN explains that sizes describes the image’s display conditions so the browser can make that choice.

<img
  src="hero-1200.webp"
  srcset="hero-640.webp 640w,
          hero-1200.webp 1200w,
          hero-2000.webp 2000w"
  sizes="(max-width: 700px) 100vw, 50vw"
  width="2000"
  height="1100"
  alt="A cyclist crossing a mountain pass at sunrise"
>

Use <picture> when the composition—not only the resolution—must change:

<picture>
  <source media="(max-width: 700px)" srcset="hero-mobile.webp">
  <source media="(min-width: 701px)" srcset="hero-wide.webp">
  <img src="hero-wide.webp" alt="A cyclist crossing a mountain pass at sunrise">
</picture>

Keep intrinsic width and height values or an aspect-ratio so the browser can reserve space and reduce layout shifts. Use modern formats where your delivery pipeline supports them, then inspect the actual files at their target dimensions.

5. Make text readable over the image

Check contrast after the real crop and overlay are applied. WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text; AAA targets are 7:1 and 4.5:1. Active interface components and graphical objects have a 3:1 minimum. See MDN’s WCAG contrast guidance and the W3C WAI accessibility tips.

• Add a translucent solid overlay when the photograph has detail everywhere.
• Use a directional gradient where text sits on one side and the subject sits on the other.
• Move the text to a calmer region or place it beside the image when no overlay preserves contrast.
• Test large text, body text, links, focus indicators, and buttons separately.
• Check contrast at each responsive crop; a passing desktop crop can fail on mobile.

6. Decide between an image, a background, and text beside the image

Use semantic markup when the image carries information. CSS backgrounds are suitable for decorative atmosphere that does not need alternative text. A text-beside-image layout is often the most resilient option when the artwork is busy, the copy is long, or users frequently zoom.

Choice	Use it when	Implementation detail
<img>	The image communicates content.	Provide accurate alt text, dimensions, and responsive sources.
CSS background	The image is decorative.	Document the focal position and provide a solid fallback color.
Text beside image	Readability and zoom resilience matter most.	Let each column stack naturally on small screens.

7. Optimize the asset before publishing

1. Export only the dimensions your layout can display. A 2000-pixel source is unnecessary for a 640-pixel slot unless it serves a high-density display.
2. Compress photographic images and inspect quality at 100% zoom. Remove metadata that is not needed for delivery.
3. Choose a format appropriate to the artwork and browser support. Compare the resulting file sizes, not just the extension.
4. Keep decorative headers out of the critical path when possible; preload only an image that is actually the main above-the-fold content.
5. Lazy-load below-the-fold headers, but do not lazy-load the main hero if it is visible immediately.

Use a stable fallback background color so the header remains legible while the image loads or if it fails.

8. Test the finished header

• Review wide desktop, tablet, and narrow phone widths.
• Resize the heading to a larger setting and zoom the page.
• Confirm the focal subject remains visible after every crop.
• Check text, links, buttons, and focus indicators against the actual pixels behind them.
• Disable images and confirm the heading and navigation still communicate the page.
• Test slow loading and a failed image request.
• Verify that the chosen alt text is concise and does not duplicate nearby copy.
• Inspect layout stability, downloaded source width, and format in browser developer tools.

9. Capture and review responsive header states

Automated screenshots make it easier to review the same header at several viewport widths and after real page scripts run. You can use a browser automation tool to navigate, wait for the hero, and save each viewport. If your test page contains consent dialogs, newsletter popups, or chat widgets, dismiss or hide them before comparing crops so they do not obscure the result.

10. Or skip the browser setup

ScreenshotNeo captures a URL with one GET request and can return PNG, JPEG, WebP, or PDF. It accepts cookie and consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing, and the response reports the result in X-Page-Verdict and X-Billed headers.

See the ScreenshotNeo API documentation for all options, including viewport and device presets, full-page capture, CSS selectors, custom CSS and JavaScript, waits, request blocking, headers, cookies, geolocation, caching, signed links, asynchronous jobs, bulk capture, and PDF output.

cURL

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

Python

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)

Node.js

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot failed: ${res.status}`);
const buffer = Buffer.from(await res.arrayBuffer());
require('fs').writeFileSync('shot.webp', buffer);

For header QA, add the documented viewport, full-page, wait, selector, hide-selector, custom CSS, and device parameters to the same request. Cache repeated review captures with a TTL you choose. An MCP server also provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients.

Free accounts include 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000 shots, and every feature is available on every plan. Create a free ScreenshotNeo account.

11. Troubleshooting

Symptom	Likely cause	Fix
The subject disappears on mobile.	The focal point is outside the narrow crop.	Adjust object-position, change the mobile art direction with <picture>, or move the subject into the crop-safe region.
Text is hard to read.	The image is detailed or the gradient is too weak.	Increase overlay opacity, move the copy, use a calmer source, and recheck the WCAG ratio.
The browser downloads an unnecessarily large file.	Missing or inaccurate srcset/sizes.	Provide width descriptors and describe the actual rendered slot in sizes.
The header jumps while loading.	No intrinsic dimensions or reserved aspect ratio.	Set width/height or aspect-ratio on the image/container.
Screen readers announce redundant text.	Decorative artwork has descriptive alt text that repeats the heading.	Use alt="" for decorative art; describe only information added by an informative image.
A screenshot shows a cookie banner or chat bubble.	The page was captured before cleanup or the widget loaded late.	Wait for the page, click or hide the element, block the widget request, or use ScreenshotNeo’s consent and cleanup options.
A screenshot is blank or times out.	The page is blocked, still loading, or requires authentication.	Check the URL and access rules, wait for a selector or network idle, supply required headers/cookies, and inspect the page verdict.

12. Performance, reliability, and cost notes

• Performance: Responsive sources reduce transferred bytes; correct dimensions prevent layout shifts; overlays add little cost compared with sending a second oversized image.
• Reliability: Test the real breakpoints and slow or failed image loads. For automated capture, use explicit waits and stable selectors rather than arbitrary delays where possible.
• Cost: Self-hosted browser automation consumes your own compute and maintenance time. ScreenshotNeo bills only clean shots; bot checks, blank pages, timeouts, failed loads, and cache hits are not billed. Use caching with a chosen TTL for repeated review captures and the usage API to monitor volume.

13. FAQ

What size should a website header image be?

Choose dimensions from the largest rendered slot and your responsive breakpoints. Export multiple widths rather than assuming one fixed banner size works everywhere.

Should the header image be an <img> or a CSS background?

Use an <img> when it conveys information and needs alt text. Use a CSS background for purely decorative art.

Can I put a heading inside the image?

Keep the heading as HTML. This preserves accessibility, zoom behavior, localization, and readability when the crop changes.

What should the alt text say?

Describe the image’s relevant information in a concise sentence. For decorative art next to an equivalent heading, use an empty alt value.

How do I know whether a crop is safe?

Preview the actual header at every breakpoint with the live heading, navigation, overlay, and buttons. The focal subject must remain visible and the text must meet contrast requirements.