Squarespace's editor allows you to upload, align, and insert an image within it using the Insert Image button.
Note: When inserting images into a page or entry, it's easier if you add your text to the page first and then insert your images in afterwards.
Step 1 - Select Image Insert Point
Point your cursor where you want to insert the image. Note that this may not always be where the image actually will appear. For example, if you want to insert an image so it is near the top of a paragraph of text and right aligned, then you actually place your cursor at the start of the paragraph just before the first character.
Step 2 - Access Image Area
Click the Insert Image button.
Step 3 - Access 'Upload New Image' Area and Choose a File to Upload
If you're inserting an image from your computer, click the link to Upload an Image, then click the "Choose File" button.
Note: Image files should be all lowercase with no spaces or punctuation within the file name. In addition, you'll want to insure your images are properly rotated the correct way before uploading them, and ensure this is saved as a GIF, JPG, or PNG file.
Step 4 - Select Image On Computer
Select the image on your computer and click the Open button.
Step 5 - Upload Image
Click the Upload File button to upload the image to your Squarespace site.
Step 6 (Optional) - Select Alignment Type
Once uploaded, you'll see the image previewed in the Image Preview window. Click the Alignment link to set the alignment options for your image.
Note: To display images on the same line in a row, set the alignment to inline.
Step 7 (Optional) - Resize Image
Click the Resize link in the image insertion window to resize your image. Set the desired pixel width in the New Image Width field. This will resize your image in your content, click Resize Original Image to apply the change.
To create a thumbnail, enter the desired thumbnail width in the New Image Width field, and check the Create a Thumbnail box. Click to create thumbnail (this will link to your full-sized image).
Step 8 (Optional) - Link Image
In the image insertion window, click the Link/Caption link. Enter the URL you want to use for your link in the Link Location (URL) field.
Step 9 - Insert Image
Finally, click Save and Close for your image to be inserted.
Don't move your inserted images around by dragging and dropping them with your mouse, otherwise you'll break any alignment settings applied to them.
Are your images taking a long time to load? Check the file size -- images should be under 100k (even as low as 50k, depending upon the dimensions). Refer to your image software documentation for instructions on optimizing your image for the Web.
How do I modify or create images for my site?
To create advanced image editing modifications to images on your site you will need to do this in image editing software on your computer or within a Web application/service.
A Google search will turn up a variety of other programs and services that you can use for editing images. See below for a few applications you can also use:
Software (Desktop Editors)
- Acorn (free & paid version) - Mac
- Adobe Illustrator (paid) - Mac and Windows
- Adobe Photoshop (family of options from free to paid versions) - Mac and Windows
- Corel PaintShop Photo Pro (paid) - Windows
- Gimp (free) - Mac and Windows
- PhotoScape (free) - Windows
- Pixelmator (paid) - Mac
Web (Online Editors)
- PicMonkey (free and offers many options)
- Aviary (free and wide range of options)
- Picnik (free & premium versions)
- Pixlr (free and supports some mobile editing options)
- PhotoshopExpress (free but registration required)
How do I center images in my pages and posts?
After inserting and saving an image to your page/entry, click on the image in the editor to select it. Click the Format menu in the editor, and navigate to Text Alignment, and choose the center option to center the image.
Formatting images for display on the web
All images you upload should be web-optimized. We recommend following these guidelines:
- Size your images exactly as you want them to appear on your site to eliminate pixelization. You should not have high resolution images.
- Save in RGB color mode. Print mode (CMYK) will not render in a browser.
- Try to keep file sizes under 100K. We recommend that the longest side of your image be no larger than 800px.
- Save in JPG, GIF or PNG format (PDF, PSD, TIFF and DOC are not web-compatible).
- Name your files with letters and numbers only -- do not add spaces, apostrophes, or other punctuation.
- Ensure your image is using the correct orientation (using an image editing program) before uploading this to your site.
- Give each image on your site a unique file name to prevent overwriting existing images in your pages and posts.