What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Google does not publish one official pixel width and height for a Google Sites header image. The header is a responsive background, so the visible crop changes with the selected header type, browser window and mobile layout. Use a high-quality source image, keep the important subject near the center, test the result at desktop and mobile widths, and choose the header type that provides the amount of vertical space your design needs.
Is there a recommended Google Sites header image size?
No fixed pixel recommendation is stated in Google’s current Sites help. Google documents how to replace the header image and select a header size, but it does not specify a target canvas such as a particular width-by-height combination.
That distinction matters because a Google Sites header behaves like a responsive background rather than a permanently displayed image. The same upload can be cropped differently on a wide desktop window, a tablet and a phone. A number copied from an unofficial template may work for one layout and lose the subject in another.
Third-party guidance for the new Google Sites editor likewise says there is no universally correct header-background size and recommends starting with the highest-quality image available. Treat that as practical advice, not as a Google specification.
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 errors#1 Best Overall
Why one image looks different on desktop and mobile
Responsive cropping
Sites has to fill the header area while preserving the selected header layout. When the viewport becomes narrower, the editor may show a smaller portion of the image or reposition the crop. A person at the extreme left, a logo in a corner or text close to an edge can disappear even though the original file is perfectly intact.
Header type changes the visible area
The editor offers header types with different amounts of vertical space. A larger header exposes more of the background; a shorter one exposes less. There is no source-supported numeric set of pixel heights to compare, so select by the visual space you want rather than by an alleged “best” dimension.
Text overlays compete with the photograph
Site title and other header content can sit over the image. A detailed background behind that content reduces contrast and makes the page harder to scan. Leave relatively quiet space around the likely text area and check the actual rendered header, not only the source file.
Google’s documented way to add and size a header
- Open the site in Google Sites on a computer.
- Point to the header and select Change image.
- Upload an image or choose one from the available sources.
- Point to the header again, select Header type, and choose the size that fits your design.
- Use the site preview to inspect the page, then select Publish when the crop and text placement are acceptable.
These controls change the chosen image and the header presentation. They do not let you enter a universal header pixel width and height.
Free tools Windows power users keep installed
One-click scans. No signup required.
Rank #2
- Used Book in Good Condition
How to prepare an image that survives the crop
Start with a large, clean source
Use the highest-quality original you have, without enlarging a small thumbnail. A large source gives the responsive layout more pixels to work with and leaves room for repositioning. It does not guarantee that every detail will remain visible: the editor still chooses the crop.
Place the focal subject near the center
Keep faces, products, logos and other essential information away from all four edges. Center placement is a practical safeguard inferred from responsive cropping, not an official Google “safe-area” measurement. If the composition requires an off-center subject, make sure the remaining crop still communicates the page’s purpose.
Avoid text baked into the image
Important wording belongs in the Sites title or page content, where it can reflow and remain selectable. Text inside a background can be cut off, become unreadable over a different crop or fail accessibility checks. If a photograph must contain lettering, keep it short and well inside the central area.
Use contrast deliberately
Check the header with the actual title and navigation visible. A darkened or less busy area behind light text is usually easier to read than a uniformly detailed image. Do not assume that a crop which looks good in an image editor will preserve that contrast in every viewport.
Recommended Free Tools
A practical desktop-and-mobile testing workflow
- Upload the candidate image and select the intended header type.
- Open the editor’s preview and inspect a wide desktop presentation.
- Switch to a narrow mobile presentation and look for lost faces, logos, product edges and contrast behind text.
- Resize the browser window through an intermediate width; problems often appear between desktop and phone layouts.
- If the focal point is lost, replace the image with a wider composition, move the subject inward in an image editor, or choose a different header type.
- Publish only after the title, navigation and background remain understandable at every tested width.
This process is more reliable than selecting a file because its dimensions match an unofficial chart. Google’s help confirms the header-size control; responsive testing is the practical conclusion from how that control and the image crop behave.
Header background versus an inserted page photo
Do not confuse the header workflow with a photo placed in the page body. For an inserted photo, Google documents a separate crop tool:
- Select the photo in the page.
- Choose Crop Image.
- Adjust the slider and move the image within the frame.
- Select Done.
That tool adjusts the inserted content photo. It is not a control for entering pixel dimensions or setting the crop of the header background.
Choosing among the available header types
| Decision | What to evaluate | What is not established |
|---|---|---|
| More visual impact | Whether the larger header leaves enough room for the subject and title in both previews | No official pixel height for this choice |
| Compact page layout | Whether the shorter header keeps the subject recognizable and the title readable | No official image canvas size |
| Subject near an edge | Whether intermediate and mobile crops remove it; consider a new composition | No published Google safe-zone percentage |
| Text-heavy branding | Whether the text remains legible over the selected image and header type | No Google-recommended background dimensions |
Common mistakes and fixes
Following a “magic” dimension
Symptom: An image matches a blog’s stated dimensions but still crops badly. Fix: Treat those figures as a third-party template, not a Google requirement. Recompose around the center and test the published layout.
PC 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 & 11Outdated 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 matchDesigning only for a desktop screenshot
Symptom: The desktop header looks correct, but a mobile visitor loses the logo or subject. Fix: Preview narrow and intermediate widths before publishing; move essential content inward or select a less crop-sensitive image.
Putting critical wording at the edge
Symptom: Part of a slogan disappears. Fix: Move the wording into page text or rebuild the image with generous central margins.
Using a low-resolution source
Symptom: The header looks soft or shows compression artifacts. Fix: Export from the largest clean original available. A larger source improves quality but does not prevent responsive cropping.
Confusing crop controls
Symptom: You can crop a body photo but cannot find the same slider for the header. Fix: Use Change image and Header type for the header; the documented slider applies to an inserted photo.
Or skip the browser setup
If you need a repeatable screenshot of the finished Google Site for documentation, QA or a release record, ScreenshotNeo can capture the rendered page through one request. It accepts the cookie or consent banner like a visitor and removes more than 60 known consent platforms, newsletter popups and chat widgets before the capture; bot checks, blank pages, timeouts, failed loads and cache hits are not billed as clean shots, and response headers identify the page verdict and billing result. Its MCP server provides take_screenshot, get_page_info and capture_pdf tools for Claude, Cursor and other MCP clients.
For a basic WebP capture, replace the example URL with your published Google Sites URL:
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 full-page capture, device presets, viewport and retina scale, custom CSS or JavaScript, waiting for a selector or network idle, hiding selectors, and PDF output. The same service can capture one element by CSS selector, set timezone or geolocation, use custom headers and cookies, block requests or resource types, resize images, cache with a chosen TTL, create signed image links, submit asynchronous jobs with signed webhooks, capture up to 100 URLs per bulk call, and report usage through an API.
There is no browser setup to maintain: 1,000 screenshots per month are free with no card, and paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Cost, reliability and privacy considerations
- Preview before publishing: Google Sites’ responsive crop is part of the presentation, so a local image preview cannot substitute for checking the actual page.
- Keep an original: Save the uncropped source so you can reframe it when changing header type or branding.
- Check public visibility: A screenshot service can only capture a page it can reach. Verify that the published site and any required assets are accessible to the intended viewer.
- Repeatable captures: For automated checks, use a consistent viewport and wait condition; dynamic pages can otherwise be captured before their content settles.
- Billing behavior: ScreenshotNeo identifies whether a response was a clean, billable shot through its response headers; failed loads and other stated non-clean outcomes are not billed.
FAQ
Does Google recommend 1600 × 1068 pixels for Sites headers?
Not in the current Google help described here. Such figures should not be presented as official Google recommendations.
Can I set an exact header height in pixels?
The editor lets you choose a header type and size, but the documented controls do not provide a universal pixel-height field.
What should I do if my logo is cropped?
Move it toward the center of the source image, use a composition with more surrounding space, and test the narrow preview before publishing.
Is the photo crop slider available for the header?
Google documents that slider for photos inserted into page content. Header images use the Change image and Header type controls instead.
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.
