There is no single “correct” header-image size for every website. Choose the image from the space your theme or builder actually renders: measure that container, follow the platform’s documented ratio or width, and then export responsive versions that can be cropped safely on mobile. As practical starting points, Squarespace 7.0 banners use images 1,500–2,500 pixels wide, while WordPress.com commonly illustrates a 16:9 source such as 1,920 × 1,080 or 1,280 × 720. Those are platform examples, not universal standards.
Start with the container, not a magic pixel number
A header can be a short strip, a full-width hero, a background image with cover, or an inline image in the page flow. Each behaves differently. The container’s aspect ratio determines which parts of the source are visible, especially when the browser fills a box with a cover crop.
- Identify the component. In your theme or builder, determine whether the header is a banner, hero section, background, or inline image.
- Measure the rendered box. Record its desktop, tablet, and phone width and height. If the height changes by breakpoint, treat each ratio separately.
- Read the platform specification. WordPress themes publish their own Quick Specs; Squarespace and Wix document banner behavior and resizing. Follow a theme-specific ratio when one exists.
- Set a focal point. Keep the subject away from edges that may disappear when the box narrows.
A larger source cannot correct a wrong container ratio. It only gives the browser more pixels to crop.
Practical starting sizes by platform
| Platform guidance | Published figure | How to use it |
|---|---|---|
| Squarespace 7.0 banner | 1,500–2,500 px wide | Use a wide landscape source; 2,500 px is its stated ideal width. |
| Squarespace upload limit | 20 MB | Do not treat the limit as a target; smaller files load faster. |
| Squarespace faster-loading recommendation | 500 KB or less | Compress when visual quality remains acceptable. |
| Squarespace responsive widths | 100, 300, 500, 750, 1,000, 1,500 and 2,500 px | Its system can generate these candidates for responsive delivery. |
| WordPress.com examples | 1,920 × 1,080 or 1,280 × 720 (16:9) | Use only as starting examples; your active theme’s Quick Specs take precedence. |
These figures are guidance for the named platforms, current to 2026, not a web-wide requirement. WordPress.com explicitly notes that every site and theme is different.
Choose an aspect ratio that survives cropping
Wide banners and heroes
Use a landscape image wider than it is tall. Abstract patterns, open space and subjects near the intended focal point tolerate responsive cropping better than tightly framed portraits. Avoid borders that can be cut off or expose a visible edge.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
16:9 as a starting shape
A 16:9 source (for example, 1,920 × 1,080) is a useful general-purpose starting point when a theme gives no ratio. It is not a promise that the header will display at 16:9: a short desktop banner or tall mobile hero may crop it substantially.
Cover versus contain
cover fills the container and removes overflow, so at least one dimension is cropped. contain preserves the whole image but can leave empty space. Header designs normally use cover; compose with that loss in mind.
Design for desktop and mobile together
Keep critical content out of the bitmap
Put headlines, buttons and logos in live HTML whenever possible. Text baked into a bitmap can become unreadable, unselectable or cropped at narrow widths. Live text also reflows for localization and accessibility.
Free tools Windows power users keep installed
One-click scans. No signup required.
Leave safe space around the focal subject
Place the subject near the center or the documented focal position, with breathing room on all sides. Preview the narrowest breakpoint first; if the subject survives that crop, wider views generally have more room.
Use separate art direction when necessary
If one composition cannot work at both ratios, serve a mobile-specific crop with the <picture> element rather than forcing desktop artwork into a phone-shaped box.
<picture>
<source media="(max-width: 600px)" srcset="hero-mobile-800.webp">
<img src="hero-desktop-2000.webp"
alt="Descriptive alternative text"
width="2000" height="1125">
</picture>Use the actual dimensions and breakpoint of your site. If the image is purely decorative behind a heading, use an empty alt value and ensure the live heading has adequate contrast.
Build responsive image delivery
Export several widths instead of sending the largest file to every device. The browser chooses a candidate based on viewport and pixel density. Include intrinsic dimensions so it can reserve space before the image arrives, preventing layout shifts.
<img
src="hero-1200.jpg"
srcset="hero-600.jpg 600w, hero-1200.jpg 1200w, hero-2000.jpg 2000w"
sizes="100vw"
width="2000"
height="1125"
alt="Descriptive alternative text"
loading="eager"
fetchpriority="high">Replace the example ratio and candidates with the dimensions your container needs. sizes must describe the rendered width; if the image occupies half the page on desktop, use media conditions such as (min-width: 900px) 50vw, 100vw.
Loading priority
- Above-the-fold hero: do not lazy-load it. It is part of the initial view and should begin loading immediately.
- Below-the-fold header-like images: use
loading="lazy"to defer work until near the viewport. - Fetch priority:
fetchpriority="high"is appropriate for one genuinely critical hero. Applying it broadly can delay CSS, fonts or other important resources.
Format, compression and file weight
Choose a format your delivery stack supports (for example, WebP or JPEG for photographic artwork). Compare the exported image at the actual display size, not at 400% zoom. Remove unnecessary metadata, resize oversized originals and compress until artifacts become visible, then step back slightly. Squarespace’s 500 KB recommendation is a useful performance target for that platform, while its 20 MB figure is only an upload ceiling.
Rank #3
Do not enlarge a small source to meet a nominal width; interpolation makes it soft. Start with a source at least as wide as the largest rendered candidate, and create smaller derivatives for phones and tablets.
A repeatable workflow
- Inspect the theme or builder. Find Quick Specs or banner documentation and note the container ratio, maximum width and focal-position controls.
- Measure real breakpoints. Use browser responsive mode at desktop, tablet and phone widths. Record the box dimensions and whether its height is fixed, automatic or viewport-based.
- Prepare the master. Create a wide landscape composition at the largest needed width. Keep faces, products and text-safe areas away from crop edges.
- Create candidates. Export widths that match your traffic and layout (for example, 600, 1,200 and 2,000 pixels), plus a mobile art-directed crop if needed.
- Implement dimensions and candidates. Add
width,height,srcsetand an accuratesizes; set loading priority based on viewport position. - Preview and publish. Check every breakpoint, keyboard and contrast behavior, then inspect the network panel to confirm that an appropriately sized file—not the largest original—is downloaded.
Diagnose blur, cropping and layout problems
The header looks blurry
Check that the selected candidate is at least as wide as the rendered CSS width multiplied by device-pixel ratio. Confirm the CDN or platform has not delivered a thumbnail, and avoid repeatedly re-saving a JPEG at low quality.
Crashes, 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 minutePC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11The subject disappears on mobile
The container is cropping by ratio. Move the focal point inward, change the mobile background position, lower the desktop crop height, or provide a mobile-specific source.
Text is cut off or unreadable
Move copy into HTML, add a contrast overlay, and test the smallest breakpoint. Never make essential instructions available only inside the image.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
The page jumps while loading
Supply correct width and height (or an equivalent CSS aspect ratio) so the browser reserves space. A mismatch causes distortion or a shift when the intrinsic image arrives.
The hero loads slowly
Verify that the hero is not being lazy-loaded, but do not blindly mark every image high priority. Reduce the selected candidate, compress it, use a modern format, and check whether an oversized background image is being fetched before the content.
A platform rejects the upload
Check its file-size ceiling, supported formats and maximum dimensions. For Squarespace, 20 MB is the stated upload limit; staying near its 500 KB performance recommendation is preferable when quality permits.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
If you need to verify how a header actually renders at a URL, ScreenshotNeo can capture it with one request. It accepts consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups and chat widgets before capture; each cleanup step can be disabled. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads and cache hits cost nothing, and response headers report the page verdict and whether it was billed.
Using the API documented at https://screenshotneo.com/docs/:
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}`);ScreenshotNeo also provides full-page and selector captures, 12 device presets plus custom viewports, dark mode, retina scale, custom CSS and JavaScript, waits, request blocking, cookies and headers, geolocation, PDFs, caching, signed links, asynchronous webhooks, bulk capture of 100 URLs per call and an MCP server with take_screenshot, get_page_info and capture_pdf for AI clients. Every plan includes every feature: 1,000 shots per month free with no card; paid plans start at $5 for 3,000 shots. Create a free account at https://screenshotneo.com/account/sign-up/.
Cost and reliability checks
- Cache stable captures with a TTL when you are checking the same page repeatedly; recapture after publishing a new header.
- For automated tests, inspect the verdict and billed headers rather than assuming an HTTP success means a useful screenshot.
- Use asynchronous jobs and signed webhooks for slow or large pages, and set a timeout appropriate to the page’s real load behavior.
- Capture representative desktop and mobile viewports after each header change; a single desktop screenshot cannot prove mobile safety.
Accessibility checklist
- Use meaningful alt text when the image conveys information; use decorative treatment when it does not.
- Keep the heading and controls as HTML, with sufficient contrast over the artwork.
- Do not encode essential prices, instructions or navigation only in pixels.
- Test zoom, narrow widths, keyboard focus and reduced-motion preferences when the header includes animated content.
Frequently Asked Questions
What is the best default header ratio if my theme gives no guidance?
Use a wide 16:9 source such as 1,920 × 1,080 as a starting point, then adjust it to the container you measure and provide a mobile crop if the subject is lost.
Should a website header image be exactly 2,500 pixels wide?
Only when your platform or largest rendered candidate needs it. Squarespace identifies 2,500 pixels as an ideal banner width, but other themes may require less or a different ratio.
Can I put a logo inside the header image?
Prefer a live logo element. A bitmap logo can be cropped, blurred or become inaccessible at responsive widths.
How often should I recapture screenshots after changing a header?
Capture the desktop, tablet and narrowest phone view after each significant composition, breakpoint or focal-position change; those views expose different crop failures.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Fix the driver behind crashes, sound loss and screen glitches3Clear out junk files and repair common Windows errorsQuick 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.
