Adding an image

In Squarespace 5, you can add an image to your page or blog post with the Insert Image button.

Tip: We recommend adding any text to the page first.

Note: For more features and functionality, upgrade your site to Squarespace 7. To learn more about the benefits of upgrading, visit Squarespace 5 vs. newer versions.

Watch a video

Before you begin

Follow our image formatting guidelines before uploading them to your Squarespace 5 site.

Step 1 - Choose an insert point

1. In Content mode, open the editor for the area you want to update. For example, on an HTML page, you'd click Edit Page.
2. Click in the editor so your cursor is where you want the image to be.

Step 2 - Click the Insert Image button

Click the Insert Image button.

Step 3 - Choose an image

In the Insert Image window, choose an image. 

• Click Your Images to choose an image you've previously uploaded to your site, like images in file storage.
• Click Upload An Image then Browse to upload an image from your computer.
• Click Direct URL to use the image URL from another website, such as Flickr.

Step 4 - Resize the image

Click Resize to set the image width. The image maintains its aspect ratio, which means the height changes automatically so the image retains its original shape.

• We recommend only using this option to make an image smaller. If you make an image larger, it can make the image blurry or distorted.
• Click Resize Original Image to change the size of the image that's saved to your site. 
• Click Create A Thumbnail and then Create Thumbnail to change the size of the image as it displays on the page. The image that's saved to your site will stay the same size. The thumbnail image will link to the full-sized version.

Step 5 - Align the image

Click Alignment to choose how the image displays in relation to the text on the page.

• To display multiple images on the same row, set the alignment to Inline. 
• If you're editing an existing image, follow our alignment tips below instead.

Step 6 - Add a link, caption, and border

Click Link / Caption to add text or a link to your image.

• Add text to the Image Caption field to add a caption below your image.
• Add a link to the Link Location (URL) field to turn your image into a link. When visitors click your image, they'll go to that URL.
• Check Use Thumbnail Stylings to add a thin border around your image. 

Tip: If you chose the Thumbnail option in Step 4, you'll see text in the Link Location (URL) field. This opens the original image in a new window when the thumbnail is clicked. You can replace it with a new link if you prefer.

Step 7 - Save

1. Click Save & Close. 
2. Finish making any changes to the page or post, then Save and refresh the page.

Best practices

For best results:

• When possible, before uploading, size your images exactly as you want them to appear on your site.
• Unlike Squarespace 7, Squarespace 5 doesn't have responsive design, so think ahead to what your visitors will see if they view your site on a mobile device. For example, on a smartphone your images may be too small to see clearly.
• For more help, visit Formatting images for display on the web.

Edit an image

After adding an image, you can edit it to resize it, add a link, or add a caption. To edit an image:

1. Go to Content mode.
2. Click Edit to edit the page or post.
3. Click the image, then click Edit.

Tip: To move or re-align an image, see our tips below.

Delete an image

To delete an image:

1. Go to Content mode.
2. Click Edit to edit the page or post.
3. Click the image, then click Remove.

Move an image

After adding an image, go to Content mode and follow the tips below to move, re-align, or center it.

Tip: This works best for images without captions, as captions may not move with an image correctly. If you're having issues with a caption, delete the image and re-add it following the steps above.

Move an image

Before moving an image, ensure it's in Inline alignment. If it's in any other alignment, dragging the image can cause issues with the alignment settings.

First, click the image and use the annotation below to choose Inline.

Then, click and drag the image to its new location. After dragging it, you can change the alignment if you want.

Re-align the image

Click the image and use the annotation below to choose a new alignment.

 

Center the image

Click the image, then click Format, Text Alignment, then Center. 

Add multiple images

To add multiple images on one line, they must have the Inline alignment:

1. Add each image to the page following the steps above.
2. Ensure each image is set to Inline.
3. Drag and drop the images so they display in the same row.
4. Use your arrow and space keys to add space between them (optional).

Tip: To showcase multiple images, consider adding a gallery instead.

Why don't my images display when I log out?

If you set The Public audience in File Storage to Restricted or Storage Only, none of the images or files you've embedded will display for visitors that aren't logged into your site. In general, we recommend leaving this setting as Visible.

To learn more, visit File Storage.

Add an image to a sidebar

To add an image to a sidebar:

1. Enter Structure mode.
2. Add a Text/HTML widget.
3. Enter Content mode.
4. Click Edit widget.
5. Add your image to the WYSIWYG.
6. Click Save & Close.
7. Enable the widget so it displays on your live site.

Tip: You can use this technique to create image navigation.