Website Banner Image Aspect Ratio: Recommended Dimensions

Short answer: there is no universal aspect ratio for every website banner. Start with the requirements for your theme, CMS, design system, or hero component. If no specification exists, 16:9 is a reasonable starting point for a general banner photo, but treat it as a design choice rather than a web standard. Brandeis University’s Heller School, for example, specifies 16:9 for its banner photos in its photo standards.

Do not reuse advertising dimensions automatically. Google’s responsive display ads use a separate landscape asset specification of 1.91:1 at 1200 × 628 pixels, with 600 × 314 pixels as the minimum. Google also specifies 1:1 square assets at 1200 × 1200 pixels for Performance Max campaigns. Those are advertising requirements, not a universal rule for an ordinary website hero.

How to choose the right banner ratio

1. Find the component specification. Check the theme documentation, CMS field help, design-system component, or page template. Record the expected ratio, minimum dimensions, maximum file size, focal-point controls, and whether the image is cropped with cover.
2. Identify the widest and narrowest layouts. A desktop hero may be wide and shallow, while a mobile hero may be much taller. List the actual breakpoints and rendered container sizes.
3. Choose an authoring ratio that survives those crops. Keep the subject near the center or define a focal point. Never place a face, product, or essential text close to an edge unless the component guarantees that edge will remain visible.
4. Export enough pixels for the largest display. Pixel dimensions describe the image’s resolution; aspect ratio describes its width-to-height relationship. They are related, but they are not interchangeable.
5. Check the result at real viewport sizes. Review desktop, tablet, and mobile crops before publishing. A ratio that looks good in an image editor can fail when a CSS container uses object-fit: cover.

Recommended dimensions by use case

Use case	Ratio or dimensions	How to interpret it
General website banner photo	Follow the component; 16:9 is one documented example	Use the theme or component specification first. The Heller School’s 16:9 rule is institution-specific.
Google responsive display ad, landscape	1.91:1; 1200 × 628 recommended; 600 × 314 minimum	Use only for the ad placement. See Google Ads Help.
Google Performance Max, landscape	1.91:1; 1200 × 628 recommended; 600 × 314 minimum	Marketing-asset guidance, not a normal website-hero rule. See Google’s Performance Max guidance.
Google Performance Max, square	1:1; 1200 × 1200	Prepare a separate square asset when the campaign requires it.

16:9 versus 1.91:1

16:9 is 1.777:1, so it is taller than a 1.91:1 image at the same width. A 16:9 source cropped into a 1.91:1 container loses some height. A 1.91:1 source placed in a 16:9 container needs extra vertical space or empty padding. Keep the subject in the overlap between the two crops if one source must serve both placements.

Responsive banner implementation with HTML and CSS

This example uses a semantic picture element for art direction. It supplies a wide crop on larger screens and a taller crop on small screens. Replace the file names with your own exports.

<picture>
  <source
    media="(max-width: 700px)"
    srcset="/images/hero-mobile-900x1200.webp"
    width="900"
    height="1200"
  >
  <img
    src="/images/hero-desktop-1920x1080.webp"
    width="1920"
    height="1080"
    alt="A person reviewing a dashboard on a laptop"
    decoding="async"
    fetchpriority="high"
  >
</picture>

.hero {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

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

@media (max-width: 700px) {
  .hero {
    aspect-ratio: 3 / 4;
  }

  .hero img {
    object-position: 50% 35%;
  }
}

Use object-fit: cover when the banner must fill a fixed box. Use contain when the entire image must remain visible, accepting empty space. If text is part of the design, put it in HTML over the image instead of baking it into the bitmap; cropping and localization are easier to control.

How to prepare a banner that will be cropped

• Keep the visual subject inside the intersection of every intended crop.
• Leave extra breathing room around faces, products, and logos.
• Use a separate mobile crop when the composition changes substantially.
• Check high-contrast overlays and text at narrow widths.
• Set explicit width and height attributes or an aspect-ratio box to reduce layout shifts.
• Export WebP or another format your delivery stack supports, while retaining a fallback if required by your browser support policy.
• Compress after cropping; resizing a very large source in the browser does not solve transfer cost.

Do not confuse website banners with ad assets

Advertising platforms can impose exact ratios because their inventory has known placements. Google’s responsive display guidance calls for 1200 × 628 pixels at 1.91:1, with 600 × 314 pixels minimum. Performance Max also lists 1200 × 1200 square marketing images. Those numbers answer “what does Google accept for this campaign?” They do not answer “what ratio does my site’s hero component require?”

Capture and review every responsive crop

Before release, render the page at each supported breakpoint and inspect the banner with real content. Check the focal subject, heading contrast, button placement, and whether the crop hides meaningful detail. A screenshot also reveals unexpected cookie dialogs, chat widgets, lazy-loaded images, or failed resources that are invisible in a static design file.

Or skip the browser setup

ScreenshotNeo captures a URL with one request and can return PNG, JPEG, WebP, or PDF. Before capture it accepts consent banners 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 are not billed, and the response identifies the result with X-Page-Verdict and X-Billed headers. Its options include full-page capture with lazy images loaded, device presets, custom viewport sizes, retina scale, custom CSS and JavaScript, selector capture, waits, request blocking, headers, cookies, user agents, caching, bulk capture, signed links, async jobs, and an MCP server for AI agents.

See the ScreenshotNeo API documentation for the complete option list. The following calls capture the example URL from the prompt; replace it with the page containing your banner.

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

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)

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 includes an MCP server with take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. The Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.

Troubleshooting

Problem	Likely cause	Fix
The banner looks stretched	Width and height are forced without preserving the source ratio.	Use an aspect-ratio box with object-fit: cover or provide a crop with matching dimensions.
The subject disappears on mobile	A narrow container crops the image from the center.	Change object-position, keep the subject in the safe overlap, or supply a mobile-specific source.
Text is cut off	Text was embedded near an edge or the image is being cropped.	Move text into HTML or create a crop with additional safe space.
Layout jumps while loading	The browser does not know the image’s dimensions.	Provide width and height, or reserve space with CSS aspect-ratio.
The ad platform rejects the file	The asset is below the platform’s minimum or has the wrong ratio.	For Google responsive display ads, use 1200 × 628 or at least 600 × 314 at 1.91:1; prepare the required square asset separately.
A screenshot shows a popup or blank area	The page contains consent software, a widget, a failed resource, or a bot check.	Inspect the page at the target viewport, wait for the required selector or network idle, and remove or block nonessential resources. ScreenshotNeo reports page verdict and billing headers so failed captures can be distinguished.

Performance, reliability, and cost considerations

• Performance: match the exported dimensions to the largest rendered size and compress each crop. Responsive sources avoid sending a desktop bitmap to a phone.
• Reliability: test slow networks, lazy images, consent flows, and authenticated or geo-specific pages. A screenshot pipeline should record the viewport and source URL with each artifact.
• Screenshot cost: with ScreenshotNeo, clean shots are billed while bot checks, blank pages, timeouts, failed loads, and cache hits are not billed. A chosen cache TTL can reduce repeated captures.
• Review cost: capture representative desktop, tablet, and mobile widths rather than every possible width. Add more widths when the layout changes at a breakpoint.

Checklist before publishing

• Confirmed the component or platform ratio.
• Exported dimensions large enough for the largest display.
• Created a mobile crop when the composition needs one.
• Checked focal subject and text at every breakpoint.
• Added intrinsic dimensions or an aspect-ratio reservation.
• Tested loading, cropping, contrast, and fallbacks.
• Separated website-hero requirements from advertising-asset requirements.

FAQ

Is 16:9 the standard website banner ratio?

No. It is a documented example for one institution’s banner photos, not a universal web standard.

Is 1200 × 628 suitable for every hero image?

No. It is Google’s 1.91:1 landscape advertising specification. Use your site component’s requirements for a normal hero.

Should desktop and mobile use the same image?

Only when the subject survives both crops. Otherwise, use art-directed sources with different compositions.

What is the safest place for the subject?

Inside the area that remains visible across all supported crops, with extra space around important details.

How can I verify a banner on a live page?

Render the page at representative viewport sizes and inspect the crops. An automated URL screenshot service such as ScreenshotNeo can produce repeatable captures while exposing page-verdict and billing headers.