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.

Watch a video

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.

add-an-insert-point.gif

Step 2 - Click the Insert Image button

Click the Insert Image button.

image-insert-button.png

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.

choose-image.png

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.

resize.png

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.

alignment.png

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.

link-caption.png

Step 7 - Save

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

finished.png

Formatting images for display on the web

For best results:

  • Save images in .jpg, .png, or .gif format only. The .pdf, .psd, .tff, and .doc file types aren't web-compatible.
  • We recommend using image files of less than 500 KB, though the limit for an individual image upload is 20 MB. When it comes to image size, bigger isn't always better, as uploading larger images can affect site performance.
  • 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.
  • Only use lettersnumbersunderscores, and hyphens in file names. Other characters (like spaces, question marks, percent signs, and ampersands) may upload incorrectly or cause unexpected behavior.
  • Image file names should be lowercase
  • Ensure your images are rotated correctly before uploading them. There isn't a built-in way to rotate them.
  • Save images in RGB color mode. Print mode (CMYK) won't render in most browsers.
  • Save images in the sRGB color profile. If images don't look right on mobile devices, it's probably because they don't have an sRGB color profile. 

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.

edit.png

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.

remove-image.png

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.

inline-to-move.png

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

move-an-image.gif

Re-align the image

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

 re-align.png

Center the image

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

center.png

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.

multiple-images.gif

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.

Was this article helpful?
1 out of 2 found this helpful