Recommended Free Tools
The right website banner size is the size your rendered placement needs—not a universal pixel preset. Measure the hero, masthead, promotion slot, or ad container at each breakpoint, then create assets that preserve the required aspect ratio and keep important content inside a crop-safe center. For Google responsive display ads, start with a 1.91:1 image at 1200 × 628 pixels, a 1:1 image at 1200 × 1200, and, when useful, a 9:16 image at 900 × 1600.
What “banner size” actually means
Banner dimensions are width and height in pixels. The pair describes the source image; it does not guarantee that a browser or advertising system will display it at that exact size. CSS, device pixel density, responsive breakpoints, safe-area insets, and automated ad layouts all affect the rendered result.
There is no single universal website-banner dimension. A site-owned hero follows the page’s container and layout. A third-party ad must follow the network’s current specification. Treat those as different jobs.
Start with the placement, not a template
Site hero or masthead
Inspect the actual component in the browser. Record its maximum content width, the height on desktop, the height on mobile, and whether the image is displayed with cover, contain, or an uncropped intrinsic ratio. A hero that is 1,440 pixels wide and 480 pixels tall has a 3:1 slot; exporting a 16:9 image will force cropping or create empty space.
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 glitchesInline promotion
Measure the column in which the promotion appears, including its padding and any neighboring text. Inline banners often become full-width cards on small screens, so the mobile ratio can be substantially taller than the desktop ratio.
Third-party advertising slot
Use the advertising platform’s published ratios, minimums, file limits, and format rules. Do not substitute your site hero dimensions for an ad network’s requirements.
Measure desktop and mobile breakpoints
- Open the page at the widest desktop width you support and measure the image box, not the viewport alone.
- Repeat at each layout breakpoint, especially the smallest phone width.
- Write down the slot’s rendered width and height and calculate
width ÷ heightfor each state. - Check whether the component changes from a wide image to a stacked card, or changes its focal point with CSS.
- Choose one source ratio only when the crop remains acceptable at every state; otherwise create responsive variants.
For a responsive image, provide appropriate candidates with srcset and sizes, or use your CMS’s responsive-image feature. The browser can then download a suitably sized file instead of shrinking a large desktop asset after download.
Google responsive display ad sizes
Google’s responsive display ads combine uploaded assets into many layouts and resize them to fit particular placements. Supply the ratios it specifies rather than assuming your own page’s hero ratio will be accepted.
#1 Best Overall
| Asset | Recommended pixels | Minimum pixels | Ratio or limit |
|---|---|---|---|
| Horizontal image | 1200 × 628 | 600 × 314 | 1.91:1 |
| Square image | 1200 × 1200 | 300 × 300 | 1:1 |
| Vertical image | 900 × 1600 | 600 × 1067 | 9:16; optional |
| Landscape logo | 1200 × 300 | 512 × 128 | 4:1 |
| Uploaded image file | — | Maximum 5120 KB | |
The horizontal and square figures are the core recommended starting points. Add the vertical 9:16 asset when your campaign may appear in tall placements. Google’s current guidance allows up to 15 images per ratio. Logos have their own ratio and minimums; do not place a logo designed for a 4:1 landscape slot into a square-image field.
Minimum dimensions are acceptance floors, not quality targets. Starting at the recommended dimensions gives the layout more pixels to work with, while staying below the 5120 KB upload limit.
How to design a crop-safe banner
Keep critical content central
Place the headline, logo, product, and call to action inside a central area that survives both horizontal and vertical crops. Keep important details away from the extreme edges. A background can extend to the edges because it can be cropped; a phone number cannot.
Design for automated resizing
Responsive advertising systems may show the same uploaded image at different sizes and in different combinations with text and logos. Preview the smallest mobile rendering and the widest desktop rendering. If a headline becomes unreadable, shorten it or move it into the platform’s text fields instead of embedding more words in the bitmap.
Choose a focal point deliberately
For a person or product, leave visual breathing room on the side where overlay text may appear. If the subject is near an edge, define a CSS focal point or create a separate mobile crop rather than trusting a generic center crop.
One banner or several responsive sizes?
| Situation | Best approach | Reason |
|---|---|---|
| Fixed ad slot with one known ratio | Export the exact slot ratio at the platform’s recommended pixel dimensions | A fixed slot has predictable geometry |
| Site hero with modest cropping | One high-quality source plus responsive CSS or srcset |
The same composition can survive scaling |
| Desktop hero becomes a tall mobile card | Create separate desktop and mobile crops | A single ratio would sacrifice text or subject placement |
| Responsive ad network | Upload multiple approved ratios | The system can fit more layouts without damaging the crop |
Use several files when the composition changes, not merely because the screen is narrower. A 2× retina export can improve sharpness, but it does not fix a bad aspect ratio or an unsafe crop.
File format, compression, and accessibility
- Use the format your CMS and ad platform accept. WebP can reduce transfer size for site-owned images; verify that the advertising upload accepts it before relying on it.
- Compress after resizing. Removing metadata and reducing quality usually saves more bytes than exporting an unnecessarily huge canvas.
- Keep the banner below the platform’s stated file limit; for the Google responsive-display guidance above, that limit is 5120 KB.
- Provide meaningful alternative text for informative site images. If the image is purely decorative behind visible HTML text, use an empty alternative value and keep the text in the document.
- Do not put essential words only in the image. HTML text is more accessible, searchable, translatable, and adaptable to narrow screens.
Implementation pattern for a responsive site banner
This example uses separate crops while allowing the browser to select an efficient file. Replace the paths and dimensions with the measurements from your component.
<picture>
<source media="(max-width: 640px)"
srcset="/images/hero-mobile-640.webp 640w,
/images/hero-mobile-960.webp 960w"
sizes="100vw">
<source srcset="/images/hero-desktop-1280.webp 1280w,
/images/hero-desktop-1920.webp 1920w"
sizes="(max-width: 1200px) 100vw, 1200px">
<img src="/images/hero-desktop-1280.webp"
width="1280" height="427"
alt="Team reviewing the new analytics dashboard">
</picture>Set the intrinsic width and height to the selected fallback image’s dimensions so the browser can reserve space and reduce layout shift. If your design uses a fixed-height hero, define that height in CSS at each breakpoint and test the crop with real content.
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 reinstallOutdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchRank #3
Preview and QA checklist
- Check the smallest supported phone width, a typical tablet, and the widest desktop layout.
- Verify that the logo, headline, subject, and call to action remain inside the crop-safe area.
- Test with browser text zoom and high-device-pixel-ratio screens.
- Confirm that the banner does not push the primary content below the fold unnecessarily.
- Inspect the downloaded file size and verify the ad platform’s format and dimension checks before uploading.
- Test slow connections and confirm that a useful background color or text remains visible while the image loads.
Troubleshooting common sizing problems
The image looks blurry
The source may be too small for the rendered slot or may have been compressed repeatedly. Export at the recommended pixel dimensions for ads, or provide a larger responsive candidate for a wide site slot. Do not simply enlarge a small raster file.
The subject is cut off on mobile
The mobile ratio is taller or narrower than the desktop ratio. Move the focal point, use a mobile-specific crop, or change the component to preserve the subject with object-position.
Google rejects the upload
Check the ratio, minimum dimensions, file type, and the 5120 KB maximum. A 1200 × 628 image meets the recommended horizontal dimensions; an image below 600 × 314 does not meet the cited horizontal minimum.
Text is unreadable after resizing
Shorten embedded text, increase contrast, and keep critical messaging in responsive HTML or the platform’s text fields. Preview the smallest placement rather than judging only the original artwork.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Rank #4
The page has a large blank area before the banner appears
Reserve the image’s intrinsic dimensions, preload only the above-the-fold hero when appropriate, and avoid shipping a multi-megapixel desktop file to a narrow phone. Measure the result with the browser’s network and performance panels.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
If you need screenshots of your banner at real page breakpoints, ScreenshotNeo can render the page with one request. It accepts the cookie or consent banner before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be disabled. 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 MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients.
See the ScreenshotNeo documentation for options such as viewport and device presets, full-page capture, element selectors, dark mode, retina scale, custom CSS and JavaScript, waiting for a selector or network idle, request blocking, cookies, headers, geolocation, resizing, caching, signed links, asynchronous jobs, bulk capture, and PDF output.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpimport 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}`);The Free plan includes 1,000 screenshots a 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 preview your banner across real layouts.
FAQ
Is 1920 × 1080 a standard website banner size?
No. It is a 16:9 canvas, not a universal banner requirement. Use it only when the rendered placement has that ratio and the composition remains safe when responsive.
Should banner text be included in the image?
Prefer live HTML or ad-platform text fields for essential messaging. Embed text only when the design requires it and verify legibility at the smallest rendering.
Can I use the same image for a website hero and Google Ads?
Sometimes, but their ratios and cropping behavior differ. Export platform-specific variants when the hero’s ratio does not match an approved ad ratio.
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.
