Google Sites Header Image Size: Recommended Dimensions

Google does not publish one official pixel width and height for a Google Sites header image. Google’s help documentation explains how to replace the header image and choose a header size, but it does not specify a required image canvas such as 1600 × 1068 or 2048 × 2048.

The practical approach is to start with the highest-quality image available, keep the important subject near the center, choose the header type that fits your layout, and preview the published design at both desktop and mobile widths. Google Sites treats the header as a responsive background, so the visible crop can change with the screen.

What size should a Google Sites header image be?

Use a large, sharp source image with the main subject positioned near the center. There is no Google-approved “safe” pixel dimension or universal aspect ratio for every site. A single fixed number cannot guarantee the same crop across desktop, tablet and mobile layouts.

Think of the image as a flexible background rather than a fixed banner. The header type controls how much vertical space the header occupies, while the viewport controls how much of the image remains visible.

Why fixed dimensions are unreliable

• Responsive layout: the available header width changes with the device.
• Variable header height: Google Sites lets you select a header size, changing the visible frame.
• Automatic cropping: the same source image can show different edges on different screens.
• Different content lengths: a site title, navigation and other header content can affect the usable area.

Unofficial dimensions published elsewhere may work for one template or screen size, but they should not be presented as Google recommendations.

How to choose an image that survives desktop and mobile crops

1. Start with a high-quality original. A larger source gives Google Sites more detail to work with when the image is cropped or displayed on a high-density screen.
2. Place the focal subject near the center. Keep faces, products, signs and other essential details away from the far left and right edges.
3. Leave visual breathing room. Avoid putting critical details tight against the top or bottom edge because the selected header type may expose a different vertical slice.
4. Use a simple background when possible. Low-contrast areas behind the site title and navigation keep text readable after cropping.
5. Check the real header frame. Upload the image, select the header type, and inspect how the subject sits inside the frame.
6. Preview more than one viewport. Check a wide desktop window and a narrow mobile window before publishing. This is a practical responsive-design check, not an official Google safe-area specification.

How to add or change the Google Sites header image

1. Open your Google Site on a computer.
2. Point to the header area.
3. Select Change image.
4. Upload an image or select one from the available sources.
5. Point to the header again and select Header type.
6. Choose the header size that matches the amount of vertical space you want.
7. Preview the site at desktop and mobile widths.
8. Publish when the crop and text placement look correct.

If the subject is clipped, return to the source image and create a version with more empty space around the subject, or choose a different header type. Changing the pixel dimensions alone does not guarantee that the crop will improve.

Header image versus an image inserted in page content

A header background and an image placed in the page body use different controls.

Use case	Available control	What it changes
Header background	Change image; Header type	Replaces the source and changes the header’s displayed size
Photo inserted in page content	Crop Image	Adjusts the photo’s crop inside its content frame

For an inserted photo, select the image, choose Crop Image, adjust the slider, move the image within the frame, and select Done. This crop workflow does not set the pixel dimensions of a header background.

A repeatable workflow for choosing the right header image

1. Prepare two or three candidate images. Prefer files with a clear central subject and enough surrounding space.
2. Upload the largest practical source. Avoid enlarging a small, compressed image after the fact.
3. Test each header type. Compare how much of the subject remains visible and how the title sits over the image.
4. Inspect narrow and wide layouts. Resize the browser or use device previews to check both extremes.
5. Improve the source before forcing the layout. Reframe the image or move the subject toward the center if important content is cut off.
6. Publish only after the crop works at both sizes.

Common problems and fixes

The image looks good on desktop but cuts off the subject on mobile

Cause: the narrow viewport uses a different crop. Fix: move the important subject toward the center, add side margins in the source image, or try a header type with a different height.

The header looks blurry

Cause: the original file is too small or heavily compressed. Fix: replace it with a higher-quality source. A larger image cannot restore detail that was already lost.

The title is hard to read over the image

Cause: the background has similar brightness or contrast behind the text. Fix: choose a simpler crop, use an image with calmer negative space behind the title, or edit the source to reduce detail in that area.

The header has the wrong amount of vertical space

Cause: the selected header type does not match the design. Fix: point to the header, open Header type, and compare the available sizes before publishing.

Changing the file dimensions did not solve the crop

Cause: responsive cropping depends on the layout and viewport, not only the source canvas. Fix: change the subject’s placement and test the actual header at multiple widths.

Performance and file preparation

Use a well-compressed image that remains sharp at the largest display size you expect. Extremely large files can take longer to upload and may be unnecessarily heavy for visitors, while overly small files become soft on large or high-density screens. Remove unused metadata and export a quality level that preserves edges and text in the artwork.

Keep the header composition simple. A centered subject, clean negative space and moderate contrast make the design more resilient than a panoramic image whose important details sit at the edges.

Or skip the browser setup

If you need to capture the finished Google Sites page for documentation, QA or a content review, ScreenshotNeo returns a screenshot or PDF from one request. See the ScreenshotNeo API documentation for all options.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://sites.google.com/view/your-site -o shot.webp

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://sites.google.com/view/your-site"},
    timeout=90,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://sites.google.com/view/your-site'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const image = Buffer.from(await res.arrayBuffer());
require('fs').writeFileSync('shot.webp', image);

Cookie banners, newsletter popups and chat widgets are removed before the shot. Bot checks, blank pages and failed loads are never billed, and the response reports the page verdict and billing status in headers. An MCP server lets AI agents take screenshots, inspect pages and capture PDFs. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000.

Create a free ScreenshotNeo account.

FAQ

Does Google recommend 1600 × 1068 pixels for Sites headers?

No. Google’s current help instructions do not publish that number or another universal pixel recommendation.

Should the image be landscape?

A wide source is usually easier to crop into a wide header, but the layout remains responsive. Composition and central placement matter more than a single prescribed aspect ratio.

Can I lock the same crop on every device?

No. You can design a more resilient source image and choose an appropriate header type, but responsive layouts can expose different portions of the background.

Where do I crop an image already placed on a page?

Select the photo, choose Crop Image, adjust the slider and position, then select Done. That tool applies to inserted content photos, not the header background’s pixel dimensions.

What is the fastest way to validate a published crop?

Open the published site at a wide desktop width and a narrow mobile width, then compare whether the subject and title remain visible. You can also capture both views with ScreenshotNeo for a repeatable review.