The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →A strong website header image gives visitors immediate context without competing with the page’s message. Use a wide, high-resolution source, keep the focal subject inside a crop-safe area, place the headline and call to action in HTML, and serve responsive image variants. For a dependable starting point, create a 1920 × 1080 (16:9) master, then test alternate crops on mobile, tablet and desktop.
What a website header image should do
A header image is usually a hero or banner directly below navigation. It introduces the page with a concise heading, supporting copy, an image and one primary call to action. California’s banner pattern places this component at the top of the homepage and cautions against multiple primary CTAs or carousels.
Think of the image as evidence for the headline, not a billboard covered in copy. A travel site might show a person reaching a viewpoint while the HTML heading promises “Plan your next trail.” A software page might show the product in use while the text explains the benefit and offers “Start free.” If the picture does not clarify the page’s purpose, a quiet color field or split layout may work better.
Recommended dimensions and aspect ratios
Start with a wide master rather than an image sized for one monitor. The U.S. National Science Foundation recommends at least a 1.7:1 width-to-height ratio and lists 1920 × 1080 pixels (16:9) as a preferred full-size hero. A 1366 × 768-pixel file keeps the same ratio when a lower-detail source is appropriate. California’s banner pattern gives 776 × 517 pixels as its minimum image size; that specification is for its particular pattern, not a universal maximum or minimum.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Repair Windows errors before they cause bigger problems3Scan for outdated or missing drivers - takes under a minute| Use case | Practical starting point | Important qualification |
|---|---|---|
| Large desktop hero | 1920 × 1080 px, 16:9 | NSF preferred full-size specification |
| Lower-detail hero | 1366 × 768 px, 16:9 | NSF alternative at the same ratio |
| California banner pattern | 776 × 517 px minimum | California Web Standards pattern guidance; year not stated |
These numbers describe source assets, not guaranteed rendered dimensions. A container may be shorter than the source’s aspect ratio and crop its sides. Export a high-quality master, compress delivery files, and create a mobile crop or alternate source when the subject cannot survive equal side cropping.
Header image examples that work
Full-width photographic banner
A wide photograph spans the content container, with a short HTML heading and one CTA over a deliberately quiet area. Keep a face, product, logo or other essential subject away from the left and right edges. UIC explains why: a fixed-height, responsive-width hero commonly crops those sides on narrow screens.
#1 Best Overall
- Choose a scene with a clear focal subject and negative space for text.
- Place the subject inside a marked safe area rather than at an edge.
- Use an overlay only when it improves measured contrast; do not hide a busy image behind a barely visible gradient.
Split-layout hero
Put the benefit-led H1, supporting paragraph and CTA in one column and the image in the other. Texas documents this pattern with desktop and mobile variants, limiting title copy to 30 characters, body copy to 300 characters and button copy to 30 characters. Those are useful guardrails even if your own design system differs. A split hero is especially useful when the photograph has no reliable text-safe area.
Image with a solid text panel
When photography is light or visually complex, place words on a bold, flat-color panel beside or over the image. Victoria’s hero-banner guidance recommends this approach when text over photography is difficult to read; a 20%–40% black overlay is one example for darkening a light image. Check the resulting contrast rather than assuming a particular opacity is sufficient.
Centered illustration or product visual
Center an illustration, device mockup or product visual when equal left-and-right cropping is likely. Keep the artwork high resolution and let HTML carry the message. This pattern is safer than an edge-dependent composition but can still fail if a mobile container crops vertically or overlays controls.
Minimal color-field hero
A plain color background with a small supporting image can outperform a photograph when the page needs a direct, high-contrast introduction. California warns against busy graphics behind content. A simple field also reduces file weight and makes focus order and responsive behavior easier to inspect.
Compose for responsive cropping
Design the desktop and mobile states together. Mark a safe rectangle for the H1, logo, face or product, then inspect the hero at narrow widths. Never assume that background-size: cover will preserve the composition: it fills the box by cropping whichever dimension does not fit.
Rank #2
- Create the 1920 × 1080 (or similarly wide) master.
- Identify the focal subject and keep it clear of crop-prone edges.
- Produce a mobile crop or alternate file when the desktop composition cannot remain legible.
- Test at desktop, tablet and narrow phone widths, including rotated orientation.
- Check at 200% zoom and with browser text enlargement; the heading and CTA must remain usable.
A CSS background can be appropriate for decorative atmosphere, but it is a poor choice when the image itself should be discoverable. Google Search Central recommends a normal HTML <img> with srcset or <picture> and a fallback src; Google does not index CSS background images as image elements.
Keep headline and CTA text out of the bitmap
The NSF states, “Text in an image, except for pure decoration, creates accessibility issues.” Text baked into a banner cannot reflow reliably, is difficult to translate and may disappear when a responsive crop changes. Put the H1, supporting copy and CTA in HTML so assistive technology, search engines and keyboard users can access them.
Use one benefit-led headline, one concise explanation and one verb-led CTA. Do not use more than one primary CTA in a hero banner. If a logo or decorative label is part of the artwork, provide its meaning elsewhere in HTML when it conveys information.
Accessible image, text and focus order
Alternative text
The Intelligence Community Design System says, “Where images are used, alt-text should always be provided to give a description of the image content.” Write a concise, useful alternative when the image communicates information—for example, alt="Cyclist climbing a forest trail at sunrise". Use alt="" only when the artwork is purely decorative and the surrounding HTML already supplies the message.
Contrast and overlays
Low-contrast text was the most common accessibility failure in WebAIM’s 2025 analysis: 79.1% of one million home pages, as reported by Shopify. Test the actual heading and button against every part of the crop, not just the darkest desktop preview. Use a solid panel or stronger overlay when necessary.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Keyboard and screen-reader order
Make the logical order title, interaction, then the right-hand visual when the layout is split, as described by the Intelligence Community system. The image should not receive keyboard focus unless it is itself interactive. California recommends checking multiple screen sizes and keyboard access; that design system reports WCAG 2.2 AA testing with NVDA and VoiceOver.
Responsive HTML image pattern
Use <picture> when art direction requires a different mobile crop, and srcset when the same composition can scale:
<picture>
<source media="(max-width: 700px)" srcset="hero-mobile.webp" type="image/webp">
<source srcset="hero-1280.webp 1280w, hero-1920.webp 1920w" sizes="100vw" type="image/webp">
<img src="hero-1280.jpg" alt="Cyclist climbing a forest trail at sunrise" width="1920" height="1080">
</picture>Keep the fallback src for browsers that do not select a source. Declare intrinsic dimensions to reduce layout shift, compress each format, and lazy-load below-the-fold imagery. A top-of-page hero is often visible immediately, so measure whether eager loading produces the better result for your layout.
A practical design and review workflow
- Write the message. Draft one benefit-led H1, a short explanation and one verb-led CTA. Use the Texas 30/300/30-character limits as a starting discipline.
- Select the story. Prefer people engaged in an activity or an image that explains the page. Avoid stretched, low-resolution, overly complex or excessively light images.
- Prepare variants. Make a wide master, a mobile crop when needed and responsive widths for delivery.
- Mark safe areas. Reserve space for text and identify faces, logos and products that must never be cropped.
- Build the HTML layer. Add the heading, copy and CTA outside the bitmap; use a solid panel or overlay if contrast requires it.
- Add semantics. Choose meaningful alt text or empty alt text for decoration, then confirm heading hierarchy and focus order.
- Test states. Review desktop, tablet, mobile, zoom, keyboard navigation and screen readers. Check slow connections and image-disabled conditions.
Or skip the browser setup
If you need reproducible screenshots of header designs, ScreenshotNeo is a website screenshot API and MCP server. It accepts a cookie or consent banner like a visitor, removes more than 60 known consent platforms plus newsletter popups and chat widgets before capture, and lets you turn each step off. Bot checks, blank pages, timeouts, failed loads and cache hits are not billed; the response identifies the result with X-Page-Verdict and X-Billed headers.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
One GET request returns PNG, JPEG, WebP or PDF. The API supports full-page and CSS-selector captures, lazy-image loading, dark mode, device presets, custom viewports, retina scale, PDF paper and page options, custom CSS and JavaScript, clicks, selector waits, network-idle waits, ad/tracker/request blocking, headers, cookies, user agents, Authorization, timezone, geolocation, transparent backgrounds, resizing, chosen-TTL caching, signed image links, asynchronous webhooks, bulk capture of up to 100 URLs per call, usage data and an OpenAPI specification. Existing parameter names used by other screenshot APIs also work.
For AI workflows, its MCP server exposes take_screenshot, get_page_info and capture_pdf to Claude, Cursor and other MCP clients. The Free plan includes 1,000 shots per month without a card; paid plans start at $5 for 3,000 shots. See the ScreenshotNeo documentation for authentication and options.
cURL
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
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}`);Create a free ScreenshotNeo account to get 1,000 screenshots each month with no card.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Troubleshooting header designs
The subject is cut off on phones
Move the subject inward, shorten the hero’s fixed height, or provide a mobile <source> with art-directed composition. Do not solve a crop problem by shrinking the text until it is unreadable.
Text disappears against the image
Measure contrast over the entire text area, then add a solid panel, a stronger overlay or a different image. Recheck hover, focus and responsive states.
The hero loads slowly
Export appropriately sized WebP or JPEG files, provide responsive widths, remove unnecessary background images and inspect network requests. A visually impressive 1920-pixel source need not be downloaded at that width on every phone.
Search does not find the image
Use an HTML <img> with descriptive alt text and a fallback src rather than relying solely on a CSS background, following Google Search Central’s guidance.
The page is confusing in a screen reader
Ensure the H1 and CTA are real HTML, the image has an appropriate alternative, decorative artwork has an empty alternative, and keyboard focus follows the visual reading order.
Recommended Free Tools
How to compare header examples
Evaluate examples against six questions: does the focal subject survive cropping; is text contrast sufficient; are the headline and CTA immediately clear; is there a desktop/mobile asset strategy; does the image support the page’s story; and is the image delivered through responsive HTML with sensible loading and discoverability?
Frequently Asked Questions
Is 1920 × 1080 mandatory for every website header?
No. It is NSF’s preferred full-size 16:9 source. The right dimensions depend on the rendered container, crop strategy and responsive variants.
Should a hero image be a CSS background or an img element?
Use an HTML img when the image conveys information or should be discoverable in image search. A CSS background is suitable for decorative atmosphere when its content is repeated in HTML.
Can I put a headline inside the image for branding?
Keep essential words in HTML. Decorative lettering may remain in artwork, but important information in a bitmap creates accessibility and responsive-cropping problems.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallCrashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteQuick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
