There is no universal pixel size for a website header image. Choose dimensions from the header’s rendered box at each breakpoint, then prepare responsive candidates or separate crops for desktop and mobile. A 200-pixel-tall header in an MDN example illustrates one layout; it is not a web-wide standard. Measure your design, protect the focal point, and test the delivered crop at real viewport widths.
What size should a website header image be?
Start with the space the image actually occupies, not a preset such as 1920×400 or 1200×300. Record the header’s CSS width and height at every important breakpoint, including the largest desktop layout, tablet widths and the narrowest phone layout. Then create image candidates that cover those rendered dimensions and the device pixel density you intend to support.
For example, a 1,200-pixel-wide header slot displayed at 600 CSS pixels on a two-device-pixel-ratio screen may need a source close to 1,200 physical pixels wide. Conversely, serving a very large desktop file to a 320-pixel mobile slot wastes bytes. The right dimensions are therefore a consequence of your layout, crop and density requirements.
MDN’s responsive-images guide shows a header image whose center remains centered while excess sides disappear on narrower screens. That demonstrates a deliberate composition and crop, not a recommended universal height. See MDN’s responsive images guide.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Desktop and mobile recommendations
Use these as a planning method rather than fixed standards:
| Question | Desktop | Mobile |
|---|---|---|
| What to measure | The widest rendered header box and its height at the main desktop breakpoint | The narrowest meaningful box and its height after navigation and text reflow |
| Composition | Wide composition can retain more horizontal context | Keep the subject near the safe center or use a dedicated vertical crop |
| Source dimensions | At least the largest rendered CSS dimensions multiplied by the target pixel density | A smaller candidate matched to the mobile slot and density |
| Delivery | Let responsive selection avoid downloading an oversized source | Do not send the desktop original when a smaller candidate meets the slot |
If the same composition survives every width, responsive candidates are usually enough. If the subject, text overlay or focal balance changes, use art direction: supply a different crop, or an entirely different image, for the relevant viewport. web.dev distinguishes these responsive-delivery and art-direction problems in its responsive images article.
Choose the aspect ratio before exporting
Match the header box, not an arbitrary canvas
Decide whether the header is a shallow banner, a tall hero, or a content image with a fixed ratio. The source can be wider or taller than the box only when your crop is intentional. Never stretch a source to force it into a different ratio; distortion is more noticeable than a controlled crop or a small amount of empty space.
Keep a safe area
Place faces, product details, logos and important text away from edges likely to disappear. Test the focal point at both wide and narrow widths. If a logo must remain fully visible, reserve a safe region for it instead of assuming that object-fit: cover will preserve it.
Background or content image?
Use an <img> when the image conveys content, needs alternative text, or should participate in intrinsic layout sizing. A CSS background can suit decorative art behind text, but you must reserve space separately and consider how assistive technologies should interpret the image.
Control cropping with CSS
For a content image in a known box, this pattern fills the box without changing the image’s proportions:
.site-header img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 50%;
}
cover fills the box and crops overflow. Change object-position when the important subject sits left, right, high or low:
.site-header img { object-position: 35% 50%; }
Use contain when the entire image must remain visible. It preserves the whole source but can leave empty space or reveal the background around it. web.dev explains these trade-offs in its responsive-images design guidance.
Rank #2
Responsive HTML: candidates versus art direction
Use srcset and sizes for the same composition
When only rendered size changes, generate several widths and let the browser select one:
<img
src="/images/header-1200.webp"
srcset="
/images/header-480.webp 480w,
/images/header-800.webp 800w,
/images/header-1200.webp 1200w,
/images/header-1800.webp 1800w"
sizes="100vw"
width="1200"
height="360"
alt="People collaborating around a whiteboard"
>
Set sizes to the image’s actual layout width when it is not the full viewport—for example, (min-width: 1000px) 960px, 100vw. The intrinsic width and height reserve the ratio and reduce layout movement while the file loads.
Use <picture> for different crops
<picture>
<source media="(max-width: 699px)" srcset="/images/header-mobile.webp">
<source media="(min-width: 700px)" srcset="/images/header-desktop.webp">
<img src="/images/header-desktop.jpg" width="1600" height="500" alt="Mountain trail at sunrise">
</picture>
This is art direction: the mobile file can move the subject or remove peripheral detail instead of forcing a desktop panorama into a narrow crop. Keep a fallback src for browsers that do not use the sources.
Pick an image format by content
| Content | Usually suitable | Important qualification |
|---|---|---|
| Photographic header | AVIF or WebP | Compare quality and bytes at the compression level you will ship; provide a fallback when your compatibility plan needs one |
| Legacy-compatible photographic fallback | JPEG | Useful where AVIF/WebP support is not sufficient |
| Logo or simple line illustration | SVG | Best for vector identity marks and scalable line art; sanitize and constrain untrusted SVG |
| Screenshot, UI text or sharp edges | Lossless raster such as PNG, or another lossless option | Lossless output can preserve fine text and edges but may be larger |
MDN’s image format guide and web.dev’s format guide cover browser support, transparency and compression trade-offs. Choose by visual quality at the intended size, delivered bytes, transparency or animation needs, and your fallback complexity—not by extension alone.
Loading, layout stability and performance
Reserve the space
Include intrinsic dimensions on <img>, or use an explicit aspect ratio on its container. This lets the browser allocate space before the image arrives and reduces cumulative layout shift.
Prioritize only a genuinely critical hero
An above-the-fold header that is the primary visual may use eager loading and a high fetch priority. Do not apply priority hints to every image: competing requests can delay more important page resources. Below-the-fold headers should generally be eligible for lazy loading.
Optimize each delivered variant
Export dimensions close to the largest intended rendered use and create a reasonable number of widths. An image CDN or image service can negotiate format and size, but too many variants add cache and maintenance overhead. Verify the actual network response in browser developer tools: URL, intrinsic dimensions, encoded bytes, format and whether the browser selected the expected candidate. web.dev’s image-performance guidance recommends optimizing the delivered asset rather than merely shrinking an original source.
A practical implementation checklist
- Measure the header’s rendered width and height at desktop, tablet and mobile breakpoints.
- Choose the aspect ratio and decide whether the image is decorative or meaningful content.
- Mark a safe area for the subject, logo and any overlay text.
- Decide whether one composition works (
srcset/sizes) or whether crops must change (pictureart direction). - Generate candidates that cover the largest rendered dimensions and target pixel density without shipping excessive width.
- Select AVIF/WebP, SVG or a lossless fallback according to image content and compatibility requirements.
- Add intrinsic dimensions, set the crop position, and choose loading priority deliberately.
- Inspect the page at real breakpoints and on high-density and standard-density screens.
- Check delivered bytes and verify that narrow screens are not downloading a desktop original.
Common mistakes and fixes
Using a “standard” 1920×400 banner
Cause: treating a popular template dimension as a rule. Fix: measure the actual box and create candidates from those measurements.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →The subject is cut off on phones
Cause: a wide source is being cropped with the default center position. Fix: adjust object-position, protect a safe area, or provide a mobile art-directed crop.
The image looks stretched
Cause: forcing width and height without preserving the source ratio. Fix: use cover or contain and accept intentional crop or letterboxing.
Mobile performance is poor
Cause: the browser receives an oversized desktop file, or compression is inappropriate. Fix: add accurate srcset/sizes, generate a mobile candidate, and inspect encoded transfer size.
Text in the image becomes unreadable
Cause: text is placed in a crop-prone area or compressed as a photograph. Fix: move essential text into HTML, reserve a safe region, or use a lossless format when fine edges must remain exact.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Layout jumps while loading
Cause: no intrinsic dimensions or reserved aspect ratio. Fix: add width/height attributes or an explicit aspect-ratio container.
Preview the finished header at real viewport sizes
Manual browser checks are useful, but repeatable captures make breakpoint and crop regressions easier to spot. ScreenshotNeo is a website screenshot API and MCP server. It removes cookie banners, newsletter popups and chat widgets before capture; only clean shots are billed, while bot checks, blank pages, timeouts, failed loads and cache hits are not billed. Its response identifies the page verdict and billing status in headers.
Or skip the browser setup
Use one request to capture a rendered header page (replace the URL with your staging or production page):
Rank #4
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for options such as viewport and device presets, full-page or element capture, dark mode, custom CSS and JavaScript, click and wait actions, blocked resources, cookies and headers, PDF output, caching, signed links, asynchronous jobs and bulk capture. An MCP server provides take_screenshot, get_page_info and capture_pdf tools to Claude, Cursor and other MCP clients.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsPython
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}`);The Free plan includes 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000 shots; every feature is available on every plan. Create a free ScreenshotNeo account to check your header crops without setting up a browser.
FAQ
Is 200 pixels a standard website header height?
No. MDN uses 200 pixels in an illustrative responsive-image example; your header height should come from your design and breakpoints.
Should desktop and mobile use the same header file?
Only when the same composition remains clear after cropping. Otherwise use art-directed crops with <picture>.
What is the best format for a header photograph?
Test AVIF and WebP at the quality you intend to ship, and retain a JPEG fallback when required by your browser-support plan.
Recommended Free Tools
How many responsive widths should I create?
Create a reasonable set that covers actual rendered widths and densities. More variants are not automatically better; measure whether they reduce bytes and improve experience.
Quick 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.
