How to Generate a Website Header Image

Generate a website header image by designing for the page where it will appear. Choose the subject and focal point first, leave clear space for your headline or navigation, write a precise generation prompt, create several variations, and test the result inside the real responsive header. There is no universal “correct” pixel size: the right dimensions depend on your header container, aspect ratio, and crop behavior.

1. Decide what the header image must do

Before opening an image generator, define the image’s job.

• Subject: What should visitors notice first?
• Tone: Calm, technical, energetic, editorial, playful, or another clear direction.
• Placement: Will the headline, logo, navigation, or call to action sit over the image?
• Focal point: Keep the important subject away from areas likely to be cropped on narrow screens.
• Contrast: Reserve a visually quiet region behind overlaid text.
• Shape: Decide whether the image will be shown in a fixed-height cover box or at its natural aspect ratio.

Sketch the header container before generating. A desktop-wide composition may be cropped heavily on a phone. If the title must remain readable, plan the image and the HTML text as separate layers.

2. Choose a composition and crop strategy

There are two common implementations:

Approach	Use it when	Trade-off
Contained image	The complete artwork must remain visible.	May leave empty space or require a flexible header height.
Cropped cover image	The header needs a strong edge-to-edge visual.	Important details can disappear at another viewport width.
Image with HTML text layered above	The heading must stay selectable, accessible, and easy to localize.	Requires deliberate contrast and positioning.
Text rendered inside the image	The lettering is part of an illustration or poster.	Generated text can be inaccurate or hard to edit.

For most websites, keep the headline, navigation, and call to action in HTML. Use the generated image for atmosphere and visual focus.

3. Write a concrete generation prompt

A useful prompt states the purpose, main subject, setting, visual style, composition, lighting or texture, and constraints. Include the area that must remain quiet.

Wide website header image for a developer documentation landing page. A small observatory dome above a dark forested ridge at dawn, crisp editorial illustration, restrained blue and amber palette, subject weighted to the right third, broad low-detail negative space on the left for a white headline and navigation, subtle atmospheric depth, no lettering, no logos, no watermark, no border.

Specific constraints are easier to evaluate than vague requests such as “make it professional.” Ask for small, targeted revisions instead of rewriting every part of the prompt after each generation.

Prompt checklist

• Purpose of the image and the page it supports.
• Main subject and setting.
• Art direction: photograph, collage, 3D render, line illustration, or another style.
• Focal position, such as “weighted to the right third.”
• Quiet area for overlay content.
• Lighting, palette, texture, and level of detail.
• Constraints such as “no text, no logos, no watermark.”
• Aspect ratio or orientation when your generator supports it.

4. Handle text inside generated images carefully

If the artwork itself must contain words, specify the exact wording, font treatment, color, size, and placement. Keep the copy short. Inspect every character at the size visitors will see it.

Editorial website banner showing a paper label with the exact words “FIELD NOTES”, uppercase sans-serif lettering, centered on the label, dark ink on warm cream paper, high contrast, no other words, no logos.

Generated lettering may contain misspellings, distorted characters, or inconsistent spacing. Dense text, pricing tables, diagrams, and legal copy should be composed in a design tool or HTML after generation.

5. Generate variations and refine deliberately

1. Generate several compositions with the same subject and constraints.
2. Select the version whose focal point survives the planned crop.
3. Change one variable at a time: subject position, contrast, palette, or detail level.
4. Remove distracting objects with an edit or a targeted negative instruction.
5. Export a format and quality appropriate for the actual header, rather than assuming the largest output is best.

Image-generation workflows commonly expose output size, quality, format, and compression controls. Treat model names and exact parameter support as date-sensitive, and consult the documentation for the generator you use.

6. Implement a responsive header

The CSS properties object-fit and object-position control how a replaced image fills its box and where the focal crop is taken.

<header class="site-header">
  <img
    class="site-header__image"
    src="/images/header.webp"
    alt="A mountain observatory above a forest at dawn"
    width="2400"
    height="900"
    loading="eager"
    fetchpriority="high"
  >
  <div class="site-header__content">
    <p class="eyebrow">Field notes</p>
    <h1>Explore the unknown</h1>
    <a class="button" href="/docs">Read the documentation</a>
  </div>
</header>

.site-header {
  position: relative;
  min-height: 24rem;
  overflow: hidden;
  isolation: isolate;
  background: #101827;
}

.site-header__image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% 50%;
}

.site-header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(8, 15, 28, .82), rgba(8, 15, 28, .18));
}

.site-header__content {
  max-width: 42rem;
  padding: clamp(3rem, 9vw, 8rem) clamp(1.25rem, 6vw, 6rem);
  color: white;
}

@media (max-width:  fortyrem) {
  .site-header {
    min-height: 30rem;
  }

  .site-header__image {
    object-position: 68% 50%;
  }
}

Replace fortyrem with a valid CSS length such as 40rem in production:

@media (max-width: 40rem) {
  .site-header { min-height: 30rem; }
  .site-header__image { object-position: 68% 50%; }
}

The width and height attributes let the browser reserve the image’s intrinsic ratio before it loads, reducing layout movement. For a prominent above-the-fold header, use eager loading and, where appropriate, high fetch priority. Save lazy loading for images farther down the page.

Use responsive sources when crops or art direction differ

<picture>
  <source media="(max-width: 40rem)" srcset="/images/header-mobile.webp">
  <source type="image/avif" srcset="/images/header.avif">
  <img
    src="/images/header.webp"
    alt="A mountain observatory above a forest at dawn"
    width="2400"
    height="900"
    loading="eager"
    fetchpriority="high"
  >
</picture>

Use a separate mobile composition when the desktop focal point cannot survive a narrow crop. The W3C WAI C37 technique describes using max-width and height so images adapt without horizontal overflow; it is an implementation technique, not a complete accessibility guarantee.

7. Check the image in the real layout

1. Open the page at the widest supported viewport.
2. Resize gradually instead of checking only desktop and mobile presets.
3. Test narrow phones, landscape phones, tablets, and zoomed text.
4. Confirm the headline and call to action remain readable against every crop.
5. Move object-position until the subject remains visible without exposing distracting edges.
6. Check the header with the browser’s reduced-motion and high-contrast settings where relevant.

Do not judge only from the generator preview. The real header’s height, overlay, font size, and responsive breakpoints determine the final result.

8. Accessibility and content checks

• Use meaningful alternative text when the image conveys information.
• Use an empty alt attribute when it is purely decorative and the surrounding content already provides the meaning.
• Keep essential words in HTML so screen readers, search engines, translation tools, and users can access them.
• Verify sufficient contrast between overlay text and every visible part of the image.
• Do not rely on color alone to communicate a state or action.
• Check the result at increased text size and browser zoom.

9. Performance and delivery

Decision	Guidance
Format	Choose a modern format when your delivery stack supports it; retain a fallback where needed.
Quality	Adjust quality and compression until the visual subject and text remain clear at the rendered size.
Dimensions	Generate or export for the largest display size you actually support, then provide responsive sources when useful.
Loading	Keep the primary above-the-fold image eager; lazy-load headers or images that begin below the viewport.
Layout stability	Set intrinsic width and height or reserve space with CSS.

There is no source-supported universal file-weight target or guaranteed performance gain. Measure the delivered result in your own layout and balance clarity against transfer size.

10. Troubleshooting

The subject disappears on mobile

Cause: A cover crop removes the focal area. Fix: Change object-position, reduce the subject’s scale in the prompt, or provide a mobile-specific source with <picture>.

The headline is hard to read

Cause: Detail or brightness sits behind the text. Fix: Request quieter negative space, add a gradient overlay, move the text, or redesign the crop. Keep the words in HTML.

The header jumps while loading

Cause: The browser has no intrinsic dimensions before the image arrives. Fix: Add accurate width and height attributes or reserve the aspect ratio in CSS.

The generated lettering is wrong

Cause: Image generators can distort or misspell text. Fix: Remove the text from the generation, layer it as HTML, or correct a short label in a design tool.

The image looks soft or oversized

Cause: The source dimensions, quality, or compression do not match the rendered size. Fix: Export a suitable source, use responsive variants, and inspect the result at the actual CSS dimensions.

Content overflows horizontally

Cause: Fixed image dimensions or positioning exceed the viewport. Fix: Apply max-width: 100%, let the image scale with its container, and test zoomed layouts.

The header feels different from the generated preview

Cause: The site applies a crop, overlay, font, or breakpoint that was absent from the preview. Fix: Iterate from a screenshot of the real page and revise one variable at a time.

11. Verify the rendered header with ScreenshotNeo

After implementing the header, capture the real page at desktop and mobile viewport settings to inspect the crop, text contrast, and loading state. ScreenshotNeo returns PNG, JPEG, WebP, or PDF from one GET request and can capture a full page or a selected element.

Or skip the browser setup

Use the ScreenshotNeo API to capture the finished page without maintaining your own browser automation. See the ScreenshotNeo documentation for all options.

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

import requests

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

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com/header' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot failed: ${res.status}`);
const data = Buffer.from(await res.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('header.webp', data));

• Cookie and consent banners, newsletter popups, and chat widgets are removed before the shot.
• Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed; response headers identify the page verdict and billing state.
• An MCP server lets Claude, Cursor, and other MCP clients take screenshots with take_screenshot, inspect pages with get_page_info, and create PDFs with capture_pdf.
• The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots.

Create a free ScreenshotNeo account and capture your rendered header.

12. FAQ

What dimensions should a website header image be?

Choose dimensions from the real header container, aspect ratio, and largest supported display size. No single pixel size fits every layout.

Should the title be part of the generated image?

Usually no. HTML text is easier to edit, localize, read with assistive technology, and keep sharp across breakpoints.

How do I keep the same subject visible on every device?

Leave breathing room around the subject, tune object-position, and use a separate mobile source when one crop cannot work at all widths.

Should a hero image be lazy-loaded?

For a prominent above-the-fold header, load it eagerly. Lazy loading is better suited to images farther below the initial viewport.

Can I use a screenshot to review the final crop?

Yes. Capture the implemented page at the viewports you support, then adjust the image source, container, overlay, or focal position based on what the screenshots show.