Free tools Windows power users keep installed
One-click scans. No signup required.
There is no single, universal aspect ratio for every website banner. Use the requirements for the exact hero, masthead, or banner component in your theme, CMS, or page builder. If no specification exists, start with a responsive design that has separately tested desktop and mobile crops. As a clearly scoped example, Brandeis University’s Heller School photo standards use 16:9 for banner photos. That is an institutional rule, not a web-wide standard.
Do not copy advertising dimensions into an ordinary website hero. Google responsive display ads recommend a horizontal 1200 × 628 pixel asset at 1.91:1, with a 600 × 314 pixel minimum; those figures apply to Google advertising placements.
What aspect ratio should a website banner use?
Choose the ratio from the component that will display the image. A theme may crop a source image into a fixed-height desktop hero, use a fluid ratio, or switch to a different crop on phones. The same file can therefore look correct in one implementation and badly cropped in another.
Use the component specification first
- Open the theme, CMS, design-system, or page-builder documentation for the banner or hero component.
- Record its accepted ratio, recommended pixel dimensions, focal-point controls, and mobile behavior.
- Check whether the image is rendered as an
<img>or as a CSS background. Background images are commonly cropped withcover, so their visible area depends on the container. - Export a source large enough for the largest display, then test the actual page at desktop and mobile widths.
When no specification exists
Use a ratio that suits the content and layout, not a supposedly universal number. A wide hero can begin at 16:9, because that is a documented banner-photo example, but confirm the result in the real component. If the design is substantially shorter than 16:9, create a shorter crop rather than forcing a tall photograph into a shallow strip.
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 minuteAspect ratio versus pixel dimensions
An aspect ratio describes relative width and height. Pixel dimensions describe the actual raster size. The ratio is calculated as width divided by height and can be reduced to a simpler form:
aspect ratio = width ÷ height
For example, 1920 × 1080 and 1600 × 900 are both 16:9, but the first contains more pixels. A larger source does not change the ratio; it only provides more detail for high-density displays and responsive resizing.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
| Use case | Documented example | How to interpret it |
|---|---|---|
| Institutional website banner photo | 16:9 | Brandeis University’s Heller School standard; an example for that institution, not a universal rule. |
| Google responsive display ad, horizontal | 1200 × 628 px, 1.91:1; 600 × 314 px minimum | Advertising specification, not an ordinary website-hero requirement. |
| Google Performance Max, landscape marketing image | 1200 × 628 px, 1.91:1 | Marketing-image specification for that Google placement. |
| Google Performance Max, square marketing image | 1200 × 1200 px, 1:1 | Separate square advertising asset. |
Do not describe 1200 × 628 as “the website banner size.” It is a Google advertising format. Likewise, 1200 × 1200 is useful for a square ad placement, not evidence that a site hero should be square.
Recommended dimensions by situation
A normal website hero or masthead
Start with the dimensions published for the component. If the documentation specifies only a ratio, calculate a practical source size from the largest rendered width and the required pixel density. For a 16:9 component that can display at 1600 CSS pixels wide, a 1600 × 900 source preserves the ratio; a 1920 × 1080 source gives additional detail for larger or high-density displays. These are arithmetic examples, not a universal prescription.
A shallow promotional banner
Measure the actual container, including its desktop and mobile heights. Export a crop that matches that shape. A panoramic strip may be appropriate when the component is intentionally short, but a 16:9 source will lose more of its top and bottom when fitted with object-fit: cover or a background-size of cover.
Google advertising assets
For Google responsive display advertising, prepare the documented horizontal 1200 × 628 asset (1.91:1), respecting the 600 × 314 minimum. Google also supports square assets with their own requirements. Performance Max lists 1.91:1 landscape marketing images at 1200 × 628 and 1:1 square images at 1200 × 1200. Keep these ad variants separate from your site’s hero exports.
Desktop and mobile cropping
Responsive layouts frequently change the visible window rather than proportionally shrinking the entire image. A desktop banner may be wide and short, while a phone layout is taller or uses a different focal crop. There is no verified universal “safe-area percentage” for ordinary website banners, so protect important content by testing rather than relying on a fixed margin rule.
Design the focal area
- Place faces, products, logos, and essential action-oriented imagery near the center or in the area the component guarantees will remain visible.
- Keep critical text in HTML whenever possible. Text baked into a raster image can be clipped, become unreadable, or fail accessibility requirements.
- Leave visual breathing room where the site overlays a heading, navigation, gradient, or button.
- Provide alternate crops when the design allows it; a single centered crop cannot preserve every composition.
Test the real breakpoints
- Load the page at the largest desktop width documented by the design.
- Check intermediate tablet widths, where a crop can change before the mobile breakpoint.
- Test common phone widths in portrait orientation.
- Inspect both the smallest and largest text overlays, and verify that the subject remains recognizable after cropping.
- Repeat with browser zoom or a high-density display simulation if your audience relies on those conditions.
How to prepare and implement the image
Export variants
Keep an original, editable master. Export a web-optimized version in the format your stack supports, such as WebP or JPEG, and create alternate desktop and mobile crops when the component accepts them. Use descriptive filenames and record the ratio and pixel dimensions so another developer can reproduce the asset.
Use responsive markup when possible
A typical implementation can provide different files for different viewport conditions:
Rank #2
<picture>
<source media="(max-width: 767px)" srcset="/img/hero-mobile.webp">
<img src="/img/hero-desktop.webp" alt="Description of the banner subject" width="1920" height="1080">
</picture>Set intrinsic width and height (or an equivalent aspect-ratio rule) to reserve space and reduce layout movement. If the image is decorative, use an empty alt attribute and keep meaningful text in the page markup.
Check crop behavior in CSS
.hero {
aspect-ratio: 16 / 9;
overflow: hidden;
}
.hero img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 50%;
}Change object-position to preserve an off-center subject, but verify every breakpoint. If the component has a fixed height instead of an aspect ratio, measure that height and design to the resulting crop.
Performance and accessibility checks
- Do not upload a multi-megapixel original when the component never renders at that width.
- Compress visually, then inspect text, skin tones, fine lines, and gradients for artifacts.
- Use lazy loading for below-the-fold banners; prioritize the main above-the-fold hero according to your performance setup.
- Supply useful alternative text for informative images. Decorative backgrounds should not duplicate nearby headings.
- Maintain sufficient contrast between overlays and the image, and provide a solid or gradient fallback when text crosses variable imagery.
- Check that the image still communicates its purpose when images are blocked or the layout is narrow.
Common mistakes and fixes
Using an ad ratio for a site hero
Symptom: the 1.91:1 Google asset looks too short or crops the subject in the site’s hero. Fix: return to the component specification and export a site-specific crop.
Designing only for desktop
Symptom: a face, product, or headline disappears on phones. Fix: create a mobile crop or adjust the focal point and test at each breakpoint.
Text embedded in the bitmap is clipped
Symptom: words are cut off after the image is fitted with cover. Fix: move text into HTML, or keep it inside the component’s documented safe region and provide alternate artwork.
Unexpected empty space or stretching
Symptom: the image is distorted or letterboxed. Fix: preserve the source ratio, then choose deliberately between cover, contain, and a fixed crop. Never stretch a photographic asset to force a different ratio.
Layout shifts while loading
Symptom: the hero jumps as the image arrives. Fix: declare dimensions or an aspect-ratio on the container and reserve the intended space.
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 →Verify the finished banner with a screenshot
After publishing, capture the page at representative viewport sizes and inspect the actual crop, overlays, loading state, and fallback behavior. A screenshot is especially useful for comparing desktop and mobile variants during review.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
ScreenshotNeo can capture the published page with one request. Before the capture, it accepts cookie or consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each cleanup step can be disabled. Bot checks, CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the page verdict and billing status in headers. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients.
Example cURL request (see the ScreenshotNeo documentation):
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 includes full-page and element capture, device presets and custom viewports, retina scale, dark mode, lazy-image loading, custom CSS and JavaScript, selector waits, network-idle waits, request blocking, headers, cookies, user agents, timezone and geolocation controls, resizing, chosen cache TTLs, signed links, asynchronous webhooks, bulk capture of up to 100 URLs per call, a usage API, and an OpenAPI specification. Parameter names used by other screenshot APIs also work.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchesRank #4
| Plan | Included shots | Price |
|---|---|---|
| Free | 1,000 per month | $0, no card |
| Starter | 3,000 | $5 |
| Growth | 15,000 | $15 |
| Pro | 60,000 | $39 |
| Scale | 250,000 | $99 |
| Business | 1,000,000 | $249 |
Yearly billing provides two months free, and every feature is available on every plan. Create a free ScreenshotNeo account to get 1,000 screenshots a month with no card.
Decision checklist
- Have you identified the exact banner component and its documented ratio?
- Are site-hero exports separated from Google ad assets?
- Have you checked desktop, tablet, and phone crops?
- Are important subjects and text still visible after
covercropping? - Are dimensions reserved in the layout, and is alternative text correct?
- Have you captured the live page to verify the result rather than trusting the source file alone?
Frequently Asked Questions
Is 16:9 the standard website banner ratio?
No. It is one documented institutional example, from Brandeis University’s Heller School. Your theme or component specification takes precedence.
Can I use 1200 × 628 for any website header?
That size is Google’s 1.91:1 horizontal advertising specification. Use it for the relevant ad placement, not automatically for a site hero.
Should desktop and mobile use the same banner file?
Only if testing shows that one crop keeps the subject and any overlay readable at both sizes. Otherwise provide separate responsive crops.
Recommended Free Tools
What should I do when my theme gives no dimensions?
Measure the rendered container, choose a ratio that fits its shape, reserve that ratio in CSS, and test the live page at every breakpoint.
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.
