The Image Block adds a single image to a page or blog post. You can resize and arrange multiple Image Blocks to create unique page layouts. Using this block is a great way to break up text and personalize your site.
Note: The size limit for a file upload to the Image Block is 20 MB. We recommend using images that are between 1500 pixels and 2500 pixels wide. For more image best practices, visit Formatting your images for display on the web.
Note: Other ways to add images to your site include banner images, background images, Gallery Blocks, and Gallery Pages.
Step 1 - Add an Image Block
- Open a page or post editor.
- Click an Insert Point or the +.
- Select Image from the menu.
- For more detailed steps, visit Adding blocks.
Step 2 - Add an image
Option 1 - Add your own image
In the Edit Image window, drag your image into the image uploader. You can also click the image uploader to select a file from your computer. Click Apply.
Option 2 - Use a Getty Image
With our partnership with Getty Images, you can license individual stock images for $10. This is a great option if you don't already have an image to use.
Click Getty Image to search, preview, and purchase a stock image for your thumbnail. To learn more, visit Getty Images and Squarespace overview.
Step 3 - Choose a design
For Image Blocks on Regular Pages, choose a layout in the Design tab:
- Inline - Display a plain image with an optional caption (our classic Image Block).
- Poster - Display text over the image.
- Card - Align text to the left or right of an image.
- Overlap - Display an image on one side with text on the other, partially overlapping the image. Add a background color to the title for a highlighting effect.
- Collage - Display an image on one side and text over a background "card," offsetting and overlapping the image.
- Stack - Display an image with text below, with an optional background color.
Other areas of your site, such as sidebars and blog posts, only support the Inline layout.
To learn more, visit Styling the Image Block.
Step 4 - Add and style text (optional)
Click Write here to add a caption or title and subtitle text to the image. To learn more, visit Styling the Image Block.
Text fields and style options vary by layout:
- The Poster, Card, Overlap, Collage, and Stack layouts have style options in the Style Editor. They also support buttons.
- The caption style for the Inline layout is set automatically (it usually follows body text).
Tip: You can also create alt text to help search engines recognize your image.
Step 5 - Save
Click Apply to save any changes to the block.
Step 6 - Move the Image Block
After saving the image, drag and drop the block anywhere on the page. You can also use this method to wrap text around the image. To learn more, visit Moving blocks.
Resize and crop the image
To resize your image:
- Add blocks on either side to shrink the whole Image Block.
- To crop the original image, use the Adobe Creative Cloud Image Editor or third party software.
On Regular Pages, each layout has its own additional resizing and cropping options.
Link the image by adding a clickthrough URL
Note: Lightboxes disable clickthrough URLs.
Set the image to open in a lightbox
Only the Inline layout supports a lightbox. To have your image open in a lightbox:
- Double-click the image to open the image editor.
- Click the Design tab.
- If your Image Block is on a Regular Page, ensure your layout is set to Inline.
- Check Enable Lightbox.
- Choose your lightbox style with the Lightbox Theme drop-down.
Note: Captions always display in lightbox view. Lightboxes disable clickthrough URLs.
Edit the image with the Adobe Creative Cloud Image Editor
Click Edit to rotate, crop, or add filters to the image with the Adobe Creative Cloud Image Editor.
Remove the image from the block
To remove the image without removing the block, click Remove in the Image Block Editor.
The image is sideways.
This can happen if the original image was taken sideways and uploaded directly without rotating it in an image editing program first.
My images are appearing in different colors.
This happens when an image is saved in CMYK mode instead of RGB mode.
You should always save your images in RGB or sRGB mode. RGB color mode is a web-safe format, while CMYK is for printing and won't render in most browsers. For more image formatting tips, visit Formatting your images for display on the web.
What's the recommended file size?
While the Image Block has a file size limit of 20 MB, we recommend keeping your images under 500 KB for best results. To learn more, visit Formatting your images for display on the web.
Why can't I see all the layout options?
Only Regular Pages support multiple layouts for the Image Block. Other areas of your site, such as sidebars and blogposts, only support the Inline layout.