How to Change a Website Image on Squarespace

To change a website image on Squarespace, first identify where the image is used: an image block, a section background, or a gallery. Open that area in the page editor, replace the file, save, and then check the crop and focal point on desktop and mobile. The controls differ by image type, so using the wrong editor can make the image appear unchanged.

Before you replace the image

1. Keep a copy of the current image if you may need to restore it.
2. Prepare the replacement at a useful size and in a web-friendly format such as JPEG, PNG, or WebP.
3. Decide whether you need to replace the file or only change its crop. A focal-point change can solve a framing problem without uploading a new image.
4. Note whether the site uses Squarespace 7.1 or 7.0. The section-background workflow below is for 7.1; 7.0 behavior depends on the template.

Change an image block image

1. Open the page or post and select Edit.
2. Click the image block, then click its pencil icon.
3. Choose Replace. Select a file from your device, an image already in the site library, or a stock image when that option is available.
4. Save the image settings and the page.
5. In Fluid Engine, switch to the mobile layout and check the block’s position and crop. Mobile placement may need separate adjustment.

An image block displays one image. Its editor also lets you delete or edit the image, set a focal point, add alt text, and change design options. Replacing the image is different from deleting the block itself.

Change the focal point or crop

Select the image block’s focal-point control and move the marker toward the subject you want centered. A focal point changes which part of the source image remains visible inside its frame. It has a larger effect when the source and container have different shapes; a wide photo in a square frame usually responds more than two similarly shaped rectangles.

If the frame itself is wrong, use the block’s layout, resize, or crop controls. If you use the built-in image editor for a crop, filter, or other pixel edit, keep your source backup first because those edits are permanent.

Change a section background image

These steps apply to Squarespace 7.1 sections.

1. Open the page editor and hover over the section containing the background.
2. Click the section’s pencil icon.
3. Open Background.
4. Use the image source menu to upload a replacement, choose an existing site image, or select a stock image when available.
5. Save the section and page.

Squarespace crops background images automatically according to the section content and the visitor’s screen size. If the subject is cut off, adjust the background focal point, change the section height, or revise the source image’s composition. Some section types do not support background images, including gallery sections and several collection section types.

Do not place important wording inside a background image. Responsive cropping can remove it, and search engines cannot index text that is baked into an image. Put that wording in a text block instead. See the Squarespace Help Center for the current section-background guidance.

Change an image in a gallery

1. Open the page and choose Edit.
2. Open the gallery section’s editor.
3. Select the gallery image you want to change.
4. Replace the file or choose another library or stock image where available.
5. Adjust that image’s focal point if the subject is framed poorly, then save.

Gallery images are managed in the gallery editor rather than the image-block editor. Squarespace documents a specific limitation: adding, removing, editing, or reordering gallery images cannot be undone with Undo or Discard changes. Keep the original files before making gallery edits.

Fix cropping, focus, and mobile layout

• Subject off-center: adjust the focal point first.
• Too much or too little of the image: change the block crop or section height, or use an image with a more suitable aspect ratio.
• Desktop looks right, mobile does not: review the Fluid Engine mobile layout and the background crop at a narrow viewport.
• Text disappears: move the text into a Squarespace text block instead of embedding it in the image.
• Image looks soft: upload a larger source at the displayed dimensions, then avoid enlarging it beyond its native resolution.
• Image has an old filter or crop: replace it with the backed-up original and apply only the needed adjustment.

Verification checklist

1. Load the published page in a private window.
2. Check the image at desktop, tablet, and phone widths.
3. Confirm the subject remains visible when the browser is resized.
4. Inspect alt text for meaningful content; use empty alt text only for purely decorative images.
5. Check links, captions, and gallery order after replacing a gallery item.
6. Clear a local browser cache or perform a hard refresh if the old image still appears.

Troubleshooting

Symptom	Likely cause	Fix
The Replace control is missing	You selected a section, gallery, or another block type.	Open the editor that owns the image: image-block pencil, section Background, or gallery editor.
The new image appears on desktop but not mobile	Fluid Engine keeps a separate mobile arrangement or the responsive crop differs.	Switch to mobile layout, reposition the block, and adjust its focal point.
The subject is cut off in a background	Background cropping changes with section height and viewport width.	Move the focal point, change section height, or choose a better-composed source image.
The old image is still visible	The page was not saved, a cache is serving the previous asset, or a CDN update is still propagating.	Save the page, hard-refresh or use a private window, and verify the published URL.
Undo does not restore a gallery change	Gallery image edits have a documented undo limitation.	Re-upload the backed-up original and restore the previous order manually.
The image editor changed the original unexpectedly	Pixel edits are permanent.	Restore your source copy, then make a new edit from that backup.
A section has no background-image option	That section type does not support backgrounds, or the site is using 7.0 template-specific behavior.	Use an image block, a supported section, or the template’s documented 7.0 controls.

Performance and reliability notes

Use appropriately sized files so the page does not download more pixels than the display needs. Keep a high-resolution master outside Squarespace and upload a web-sized derivative. Test the published page rather than relying only on the editor preview, because responsive cropping, lazy loading, and cache behavior can differ.

When you need repeatable visual checks after changing an image, capture the page at fixed viewport sizes. Record the URL, viewport, and timestamp so a later comparison can distinguish a layout change from a cache or loading issue.

Or skip the browser setup

ScreenshotNeo can capture the updated Squarespace page with one request. It accepts a URL and returns a PNG, JPEG, WebP, or PDF. Cookie banners, newsletter popups, and chat widgets are removed before the shot. 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. An MCP server provides take_screenshot, get_page_info, and capture_pdf 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.

Full API options include full-page capture with lazy images loaded, element capture by CSS selector, device presets or custom viewports, retina scale, dark mode, waits for a selector, delay, or network idle, custom CSS and JavaScript, hidden selectors, request and resource blocking, custom headers and cookies, timezone and geolocation, resizing, caching with a chosen TTL, signed links, asynchronous jobs with signed webhooks, bulk capture for up to 100 URLs per call, and a usage API. Read the ScreenshotNeo API documentation for parameter details.

cURL

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

Python

import requests
r = requests.get('https://api.screenshotneo.com/v1/shot', params={'access_key': 'YOUR_API_KEY', 'url': 'https://www.squarespace.com'}, timeout=90)
r.raise_for_status()
open('shot.webp', 'wb').write(r.content)

Node.js

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

Create a free ScreenshotNeo account to get 1,000 screenshots a month with no card.

FAQ

Can I replace an image without deleting its block?

Yes. Open the image block editor, choose Replace, and save. Deleting the block is a separate action.

Why does my background image look different on phones?

Backgrounds crop according to section dimensions and viewport size. Adjust the focal point or section height, then review a narrow preview.

Are Squarespace image edits reversible?

Pixel edits are permanent, and gallery image changes have a documented undo limitation. Keep the original file before editing.

Should I change the focal point or upload a new image?

Use the focal point when the source is suitable but the visible center is wrong. Upload a new image when the aspect ratio, resolution, or composition cannot work in the frame.