October DealsAmazon USOctober deal check: compare before you payAmazon US: current deals, useful picks and tech finds.Check DealsWindows FixRecommendedWindows errors stealing your time? Find the fix fastScan stability, cleanup and performance issues.Fix NowOctober DealsAmazon USDeal season is back - check today's better picksAmazon US: current deals, useful picks and tech finds.See Picks×
Skip to content
galleries

How to Change a Website Image on Squarespace (7.1 and 7.0)

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

To change an image on Squarespace, first identify where it is used: an image block, a section background, or a gallery item. Open that area’s editor, choose the replacement file (or an image from your site library or available stock source), save, then check the crop and focal point on desktop and mobile. The exact controls differ between Squarespace 7.1 and 7.0.

This guide covers each location, explains when to replace the file versus adjust the crop, and shows how to protect your original image before making permanent edits.

Find the image’s location before editing

Squarespace does not use one universal image-replacement control. Use the editor that owns the image:

Where the image appears Editor to open Best fix when it looks wrong
Standalone picture on a page or post Image block editor Replace the file, then adjust the block’s crop or focal point
Behind text or content across a section Section settings > Background (Squarespace 7.1) Replace the background, then change its focal point or section height
One item in a gallery Gallery editor Select that item, replace or edit it, and set its focal point

If you can click the picture itself and see a block boundary, it is usually an image block. If the picture fills a section behind text, open the section settings instead. A row of multiple images managed together is a gallery.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
#1 Best Overall
Sale
HTML and CSS: Design and Build Websites
  • HTML CSS Design and Build Web Sites
  • Comes with secure packaging
  • It can be a gift option

Replace an image block image

  1. Open the page or post. In the Squarespace dashboard, open the page (or blog post) containing the picture and choose Edit.
  2. Select the image block. Click the picture, then click its pencil icon to open the image block editor. Replacing the image is different from deleting the entire block, so do not use the block’s delete control unless you intend to remove its layout and settings.
  3. Choose Replace. Select a file from your device, an image already uploaded to the site library, or a stock image when that source is offered in your editor.
  4. Save the image and page changes. In Fluid Engine, inspect the mobile layout as well as the desktop canvas. A block’s position can require separate mobile adjustment.
  5. Check the focal point. If the subject is off-center, use the focal-point control to move the visual center rather than editing the file. Squarespace saves a focal-point change automatically.

The image block editor also exposes controls for deleting or editing the image, adding alt text, setting a focal point, and changing design options. Use those controls after the replacement when the content is correct but the presentation needs refinement.

Replace versus edit

Replacing swaps the source image. Cropping, filters, and other changes made with Squarespace’s built-in image editor can alter the uploaded image permanently. Save an untouched copy of the original file before applying an edit. If you only need the subject moved within its frame, change the focal point first; that avoids modifying the source image.

Change a section background image in Squarespace 7.1

  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 new file, reuse an image already uploaded to the site, or choose a stock image when available.
  5. Save, then preview the section at desktop and mobile widths.

Section backgrounds are cropped automatically to fit the section’s content and the visitor’s screen. If the replacement cuts off the subject, adjust its focal point. If the section itself is too shallow or tall, change the section height and preview again; changing the frame can solve a crop problem that moving the focal point cannot.

Some section types do not support background images, including gallery sections and several collection section types. The steps above apply to Squarespace 7.1. In 7.0, banner and background behavior depends on the template, so the available controls and their location can differ.

What’s actually slowing this PC down?

Pick the symptom - the matching free tool is one click away.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Keep important words out of background artwork

Do not put essential headings, prices, or instructions inside a background image. Responsive cropping can hide those words on a narrow screen, and search engines cannot index text that exists only inside an image. Put the text in a Squarespace text block over or beside the background instead.

Replace one image in a gallery

  1. Open the page containing the gallery and choose Edit.
  2. Open the gallery editor.
  3. Select the image you want to change.
  4. Replace or edit that item, then adjust its focal point if the subject is not centered.
  5. Save and review the gallery at the screen sizes your visitors use.

Gallery edits have an important limitation: Squarespace states that adding, removing, editing, or reordering gallery images cannot be undone with Undo or Discard changes. Keep the original files and confirm the selected item before saving.

Fix cropping and positioning without replacing the file

Use the focal point to move the subject

A focal point tells Squarespace which part of an image should remain centered in its display area. It is documented for image blocks, gallery sections, featured images, and section backgrounds in version 7.1. A wide photograph in a square frame can respond dramatically to a horizontal focal-point move; an image and container with similar proportions may show little visible change.

Change the frame when the frame is the problem

For an image block, use its layout, resize, or crop controls when the container’s shape is wrong. For a section background, change section dimensions or height. Focal-point changes select a different part of the existing frame; they do not make a narrow frame taller or a wide frame wider.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Review responsive versions

Fluid Engine provides a mobile arrangement for image blocks. Background images also crop differently as the viewport changes. Check a narrow phone-sized preview and a wide desktop preview after every replacement, especially when the subject is near an edge or when the image contains a face, product, or logo.

Protect image quality and accessibility

  • Keep the original file locally before using Squarespace’s image editor, because image edits are permanent.
  • Use a sufficiently large source for the largest display size you expect; enlarging a small replacement can make it appear soft.
  • Use the image block’s alt-text control for meaningful content images. Decorative imagery should not carry essential information that visitors using assistive technology would miss.
  • Preview the page after saving rather than judging only the editor canvas; responsive crops and overlays can differ from the editing view.

Squarespace 7.1 and 7.0: what changes

Task 7.1 guidance 7.0 qualification
Standalone image Use the image block’s pencil icon and Replace control. The image-block workflow is generally the relevant editor, but surrounding layout controls depend on the template.
Section background Section pencil icon > Background, then replace the image. Banner or background behavior is template-dependent; you may not see the same Background panel.
Focal point Available for documented image, gallery, featured-image, and section-background contexts. Availability and placement can depend on the template.

When a 7.0 template does not expose a background-image control, edit the template’s banner or section settings rather than trying to replace the image from an unrelated image block.

Troubleshooting common replacement problems

The new image does not appear

Confirm that you clicked Save in the image or section editor and then saved the page. Reopen the editor to verify that the new thumbnail is selected. If the editor shows the new file but the public page does not, load the published URL in a private window or after a hard refresh to rule out a browser cache.

The subject is cut off

Open the relevant image or Background controls and move the focal point toward the subject. If that is not enough, change the image block’s crop or resize option, or alter the section height. Check both desktop and mobile because each viewport can produce a different crop.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

The replacement looks stretched or blurry

Inspect the block’s layout and crop settings rather than repeatedly uploading the same file. A source whose proportions differ greatly from the frame will be cropped; a source that is too small for the displayed dimensions may look soft. Choose a larger original with a suitable aspect ratio when possible.

The image is behind text but the Background option is missing

Verify that you are editing a 7.1 section that supports backgrounds. Gallery sections and several collection section types do not support section backgrounds. In 7.0, look for the template’s banner or background settings instead.

A gallery change cannot be undone

Squarespace’s documented gallery behavior does not restore added, removed, edited, or reordered images through Undo or Discard changes. Restore the intended file manually from your source copy and carefully rebuild the gallery order.

Mobile placement is wrong after a desktop change

Open the mobile view in Fluid Engine and reposition or resize the image block there. Background images do not have a separate file for every viewport; their visible crop changes with the section and screen dimensions, so adjust the focal point or section height.

Free tools Windows power users keep installed

One-click scans. No signup required.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

Verify the published result with a screenshot

After saving, compare the public page at desktop and phone widths. A screenshot is useful when a stakeholder needs a visual record of the before-and-after state or when you are checking a page that is difficult to inspect manually.

Or skip the browser setup:

ScreenshotNeo captures a website with one request; it does not edit your Squarespace content, but it can verify the page after you publish the replacement. Before capture it accepts cookie or consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets, with each cleanup step independently configurable. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, 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.

See the ScreenshotNeo API documentation for all options. This call saves a WebP screenshot of your published Squarespace URL:

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

The same request in Python:

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

And in Node.js:

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://your-site.squarespace.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

ScreenshotNeo includes full-page capture with lazy images loaded, device presets and custom viewports, retina scale, custom CSS or JavaScript, selector waits, network-idle waits, hidden selectors, cookies and headers, caching with a chosen TTL, signed links, asynchronous webhooks, bulk capture for up to 100 URLs per call, PDFs, and an HTML/CSS-to-image option. Every feature is on every plan. The Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 shots, and yearly billing gives two months free. Create a free ScreenshotNeo account to check your updated page.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Final checklist before you publish

  • Confirmed whether the image is a block, section background, or gallery item.
  • Used the matching editor and saved the replacement.
  • Kept an untouched copy before applying permanent image edits.
  • Adjusted the focal point before resorting to a destructive crop or filter.
  • Checked desktop and mobile layouts, including background cropping.
  • Kept important text in Squarespace text blocks rather than inside background artwork.
  • Verified the published page, not only the editor preview.

Frequently Asked Questions

Will replacing an image block remove the block’s layout?

No. Use the image block editor’s Replace control; deleting the block is a separate action that removes its layout and settings.

Can I use a screenshot to change the Squarespace image itself?

No. A screenshot service records the published page. Replace the source image in Squarespace first, then use a screenshot to verify the result.

Quick Recap

SaleBestseller No. 1
HTML and CSS: Design and Build Websites
HTML and CSS: Design and Build Websites
HTML CSS Design and Build Web Sites; Comes with secure packaging; It can be a gift option
$14.18
SaleBestseller No. 2
SaleBestseller No. 4

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Read next

Recommended PC Tool
Recommended PC Tool
PC Slower Than It Used to Be?Free scan - under a minute
Outdated Drivers Are Slowing You DownFree scan - exact matches

Two free Windows tools

One Free Minute Could Fix That PC

Before you go - each of these free tools takes about a minute and tackles what quietly slows a Windows PC down.

Special offer. View Outbyte info, uninstall instructions, EULA, and Privacy Policy.