Chykalophia Docs

Step-by-step instructions for swapping out images, adjusting focal points, and adding alt text in Squarespace.

Images make a strong first impression on your website. In Squarespace, replacing an image takes less than a minute. This guide shows you how to swap images, adjust how they display, and add descriptive text for accessibility.

Quick summary

In the editor, click an image, then click the pencil icon to open the image block editor. From there you can replace the image, set its focal point, and add alt text. Click Save when you're done.

What you'll need

A page open in the editor (see How to edit a page)
Your replacement image ready — ideally a JPG or PNG between 1500 and 2500 pixels wide, and under 500 KB

How to replace an image

Open the page editor and navigate to the image you want to replace.

Click on the image to select it. A toolbar appears above the image.

Click the pencil icon in the toolbar. This opens the image block editor.

Use the image block editor to replace the image. You can upload a file from your computer, reuse an image already in your library, or browse stock images: free ones from Unsplash, or paid ones from Getty Images.

Choose your new image. If uploading from your computer, select the file.

Click Save in the top-left corner of the editor to put the change live.

Adjusting the focal point

When an image is used as a background for a section, Squarespace automatically crops it to fit different screen sizes. You can set a focal point, the spot Squarespace should treat as the center of the image. Image blocks have a focal point too, in the image block editor.

With the page open in the editor, hover over the section that has the background image, then click its pencil icon.

Click Background to see the background image settings.

Find the focal point — hover over the image and it appears as a small circle.

Drag the focal point to the most important part of the image (for example, a person's face).

That's it. The focal point saves as soon as you move it, even before you click Save. Undo doesn't reverse focal point changes on image blocks, so if you change your mind, drag it back by hand.

Adding alt text

Alt text is a short written description of what an image shows. It helps visually impaired visitors who use screen readers, and it helps search engines understand your images. Image blocks don't use the file name as a fallback: if you leave the alt text empty, screen readers skip the image.

Click on the image to select it.

Open the image block editor (pencil icon).

Click the Content tab and find the Image alt text field. Type a clear, brief description of the image (up to 250 characters). For example: "Interior of our Auckland studio with natural light and wood furniture."

You're done. Alt text saves automatically.

Good alt text

Write alt text as if you're describing the image to someone on the phone. Be specific. "Man smiling" is weak — "Small business owner at a desk looking at a laptop, smiling" is better. Purely decorative images don't need a description. Section background images can't have alt text at all.

Image file tips

✅ Do	❌ Avoid
Use JPG for photos	Using PNG for photos (large file size)
Use PNG for logos with transparent backgrounds	Files over 500 KB, which slow your page down (Squarespace won't accept anything over 20 MB)
Resize images before uploading (2500 pixels wide is ideal)	Uploading phone photos straight from camera without resizing
Use descriptive file names, with only letters, numbers, hyphens, and underscores	Naming files "IMG_4923.jpg"

Squarespace accepts .jpg, .png, .gif, and .webp images. It can't use .pdf, .psd, or .doc files as images.

Common questions

My image looks blurry. What can I do?

The image might be too small for the space it's filling. Squarespace recommends images between 1500 and 2500 pixels wide; anything narrower than 1500 pixels may look blurry. Squarespace cannot make a small image look sharper — use a higher-resolution source file.

The image is cutting off the important part. Can I fix that?

Yes — use the focal point feature (described above) to tell Squarespace which part of the image is most important. Squarespace centers the image on that point when it has to crop. Section background images always crop a little on different screens; if you need exact control over the crop, use an image block instead.

Can I use images from Google in Squarespace?

Only if you have the legal right to use them. Most images found via Google search are copyright-protected. Use your own photos, licensed stock images, or free images from Unsplash, which is built into Squarespace.

Need a hand?

If you're stuck, email support@chykalophia.com and we'll help. Include your website address and a screenshot if you can.

How to edit & replace images