Use image blocks to add images to pages or blog posts in a variety of layouts. Each Image block displays one image.
Watch a video
Add an image block
To add an image block:
- Edit a page or post, click an insert point, then click Image. For help, visit Adding content with blocks.
- Use the Content tab to add an image, captions, alt text, or an image link.
- Click the Design tab to change the layout and animate the block.
- Click outside the block editor when you're done. Your changes save automatically.
Tip: When you add an image block, it expands to the full width of the content area. To change the size of the image block, you can resize it.
Add an image
In the Content tab of the image block editor:
Click the + icon, then choose how to add your image:
- To upload an image from your device, click Upload File.
- To reuse an image, click Select From Library.
- To find and add stock images, select Browse Stock Images.
- To use the Squarespace App to upload an image, select Upload from mobile.
After adding an image, you can:
- Add animations
- Edit your image
- Set your image's focal point
- Change the image by clicking Replace
- Delete the image by clicking the trash can icon
Keep in mind:
- For the best results, use an image under 500 KB. For more image format tips, visit Formatting your images for display on the web.
- The image block won't display on your site without an uploaded image.
Upload images from a mobile device
You can add images from your phone or other mobile device using the Squarespace app. To upload an image:
- In the image block editor, click +, then choose Upload from mobile. This sends a push notification to your device.
- If this is your first time uploading on this site, a QR code will appear on your computer. If you don't already have the Squarespace app, scan the code to download it, then click Continue and Send push.
- Tap the notification on your device to open the Squarespace app import tool. The app automatically pulls images from your device's photo library.
- If the notification doesn't appear, check your device’s settings to ensure push notifications from Squarespace app are enabled.
- Tap the image you want to use, then tap Upload.
- The image will appear in the image block on your computer. In the Squarespace app, tap Replace to choose a different image, or tap Done to close the uploader.
Tip: When uploading images from mobile, click Troubleshoot in the pop-up window that appears on your computer to rescan the QR code that downloads the Squarespace app or find the option to resend the push notification.
Add an image link or button
In the Content tab, you can turn the image into a link or add a button to its layout.
To turn the image into a link in the inline layout, add the URL to the Link field, or click for additional options.
Keep in mind:
- Enabling a lightbox disables clickthrough URLs.
- The inline layout doesn't support buttons.
For all other image block layouts, use the Link drop-down menu. You can choose from:
- None - No link
- On Image - The entire image becomes a link. Add a URL in the URL field that appears below the drop-down menu, or click
for additional options.
- Button - A button displays inline with the text, below the title and subtitle. Customize the button text and add the URL in the fields that appear below the drop-down menu, or click
for additional options.
Choose a layout
If your site is on version 7.1 and uses Fluid Engine, image blocks added to Fluid Engine sections don't have these built-in layout options. Create similar layouts by overlapping image blocks with other blocks, like text blocks.
When you add an image block, it uses the inline layout by default. To change the layout, click the Design tab, then choose the layout you want from the following:
- Inline - The basic image block, with optional captions below or overlaying the image. Set how the caption displays in the Content tab.
- Poster - Display text over images, creating the look of a banner or poster.
- Card - Display images with text to the left or right. The text usually moves below the images in smaller browsers and mobile devices, or when image blocks are used in columns.
- Overlap - Display images on one side with text on the other, partially overlapping the image. Add a background color to the title for a highlighting effect. The text usually moves toward the bottom of the images in smaller browsers and mobile devices, or when image blocks are used in columns.
- Collage - Display images on one side and text over background "cards" on the other, offsetting and overlapping the image. The text usually moves toward the bottom corner of the images in smaller browsers and mobile devices, or when image blocks are used in columns.
- Stack - Display images with text below.
As you select a layout, you'll see a preview of it on the page.
Tip: When switching between inline and any other layout, you'll need to re-enter the image text.
Add text
In the image block, click into text fields to add text to the image. You might see placeholder text like Add an image description or Make it stand out.
Keep in mind:
- Limit titles to a few words. For subtitles and captions, use one or two sentences. This way, you'll have a nice balance between the words and image. It also keeps your text visible on mobile devices.
- To add line breaks in title text, press Shift + Enter. If you add line breaks by only pressing Enter, the line breaks disappear after saving your page.
Tip: Highlight the text to make formatting changes with the text toolbar, like bolding, italicizing, or adding a link.
Captions vs. titles and subtitles
Text fields and style options vary by layout. The inline layout supports one basic caption, while the other layouts support title and subtitle fields.
The inline layout supports a caption:
- One basic text field
- Style text in the site styles panel (version 7.1) or site styles for your template (version 7.0)
In the Content tab, select a display option from the caption drop-down menu:
- Off - No caption displays unless the image is viewed in lightbox.
- Caption Below - Caption displays below the image.
- Caption Overlay - Caption displays over the image in a dark gray bar.
- Caption Overlay on Hover - Caption displays over the image in a dark gray bar when the cursor hovers over the image.
Tip: If you don't see Add an image description, temporarily switch the caption style to Caption Below in the Content tab.
Captions always display in lightbox. Captions don’t display in empty image blocks. To add text without an image, use a text block instead.
Other layouts support a title and subtitle:
- Two text fields, one above the other
- Style text in the site styles panel (version 7.1) or site styles for your template (version 7.0)
- In version 7.1, to change the text alignment or spacing, style the image block.
- Add alt text manually in the Image alt text field in the Content tab.
Style the image block
Some layouts have their own style settings for fonts, colors, and buttons. Where these settings appear depends on your site's version.
To style image blocks globally:
- Change the block’s fonts in the Fonts panel.
- Change the colors for that block’s section in the Colors panel.
- Customize theme colors for elements like the title, image overlay, or button background with the image block color tweaks.
- Style the block's button in the Buttons panel. Image block buttons follow the Primary style settings.
- Set the font size and other formatting in the text toolbar. The button font size follows Paragraph 2.
To style layout-specific elements in the image block, like text alignment or content width:
- While editing a page, open site styles, then click image blocks.
- Scroll down to the section for each layout to change its tweaks.
In version 7.0, all image block layouts except inline have their own style settings in site styles. To find these options:
- In the Home menu, click Design, then click Site styles.
- Scroll down to the section for each layout to change its tweaks.
The inline image block doesn't have its own design tweaks in site styles. To learn about caption font styles, colors, and sizing, visit Styling image captions.
Add image shapes
Use image shapes to add variety and a unique visual effect to your images. The shape you choose appears over your image, like a mask. You can add image shapes to any image block layout. Choose from three aspect ratios: 1:1, 2:3, and 3:2.
To add image shapes:
- In the image block editor, click Design.
- Choose Shape, then click Shape.
- Choose an aspect ratio, then click the shape you’d like to use.
After choosing a shape, you can:
- Use the focal point to customize how your image appears in the shape.
- Enable animations to add visual movement.
- Remove the shape. In the Design tab, choose Original to return to the original shape.
Keep in mind:
- If you set images to open in a lightbox, your image’s original shape appears after visitors click the image.
- If you're using the card, collage, or overlap layouts and choose the circle shape, your image may appear as an oval. For your image to appear as a circle, ensure your image has a 1:1 aspect ratio. You can use our built-in image editor to crop your image.
Add a corner radius
You can round the corners of an image using the corner radius setting. In the Design tab of the image block editor:
- Go to Corner radius and click to set the radius for your entire image or for individual corners.
- In the corner radius field, enter numbers (measured in pixels) to change the shape of the border.
- Hover over Done, then click Save.
Keep in mind:
- Changes you make to an image block’s radius only applies to the individual image block. It doesn’t change the image across your site.
- To remove your corner radius, undo your changes while making edits, or enter 0 in the corner radius fields.
Resize the image
You can resize or crop image blocks in a variety of ways, depending on the layout.
Resize options
Here's a quick reference for the different options available in each layout:
Option | Inline | Poster | Card | Overlap | Collage | Stack |
Resize with blocks | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
Crop the original image | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
Cropping handle | ✓ | ✓ | ✕ | ✕ | ✕ | ✕ |
Site styles | ✕ | ✕ | ✓ | ✓ | ✓ |
✕ |
Stretch to fill | ✓ | n/a | n/a | n/a | n/a | n/a |
There are several ways you can resize image blocks, including using blocks, cropping handle, and style settings. To resize your image blocks:
You can decrease the size of the image block by adding blocks on either side. The most common way to do this is with spacer blocks, which create blank space.
To resize using blocks:
- Click an insert point to add a spacer block.
- Drag the spacer block to the left or right of the image block.
- Click and drag the resize handle.
Keep in mind:
- To center the image, add spacer blocks of equal size to both sides.
- You can use this same method with other blocks. This is especially useful for text side-by-side with images.
For more about using blocks to resize content, visit Resizing blocks.
For Inline and Poster layouts, click and drag the cropping handle to crop the image vertically. This leaves the image the same width but changes the height.
- Click the image block. A border appears with a circular cropping handle at the bottom.
- Click and drag the cropping handle to crop the image.
Tips for using the cropping handle with image blocks:
- Press and hold Shift while dragging the cropping handle to resize the image in 20-pixel increments. This can help align the bottom of the image with another block.
- The cropping handle only appears after you add an image.
- You can choose a center for the cropped image using focal points.
- Double click the cropping handle to undo cropping.
- Pull the handle down to zoom in on the image.
- Click and drag the cropping handle down to crop horizontally. This zooms in on the image, cutting out the sides.
To learn more about using the cropping handle, visit Resizing blocks.
The Card, Overlap, and Collage layouts have a resizing option in their style settings.
- While editing a page, open Site styles, then click Image Blocks.
- Scroll to the section for that layout. (For example, scroll to the Image Block: Card section.)
- Use the Image Width tweak to change the size. Image text will automatically adjust to fit the space.
- Click Save.
- In the Home menu, click Design, then Site styles.
- Scroll to the section for that layout. (For example, scroll to the Image Block: Card section.)
- Use the Image Width tweak to change the size. Image text will automatically get bigger or smaller to fit the space.
- Click Save.
Tip: You can remove the padding automatically applied to image blocks by adding custom code. For more information, visit this post in the Squarespace Forum. Keep in mind, custom code modifications fall outside the scope of our support. This means that we’re unable to help you set up or troubleshoot code-based solutions.
Stretch to fill the block
If you're using the Inline layout and your image is narrower than the image block, the image retains its original width. You'll see blank space on both sides of the image within the block. This preserves the original image quality.
To fill the blank space and have the image occupy the full width of the block:
- Open the image block and click Design.
- Switch the Stretch toggle on.
Keep in mind:
- Stretching an image may affect image quality.
- To reduce the need for stretching, we recommend uploading an image that has a width between 1500 and 2500 pixels.
- If the image is wider than the image block area, it will shrink to fit (not crop).
- The other image block layouts stretch automatically.
If your image block is wider than the image you uploaded, to ensure the image fills the image block, turn on theStretch toggle. If your image is less than 1500 pixels wide, it might not fill the entire image block. Below shows an image block that’s wider than the uploaded image and the Stretch toggle is turned on and off.
Image blocks on mobile
Each image block layout retains its formatting on mobile. Text will move on mobile to fit the device and will keep a similar position relative to the image.
- To see how your image block will look, use device view.
- With the exception of inline and stack layouts, captions maintain their set width relative to the image. This means that longer captions may be harder to read or appear cut off on mobile devices. This can be especially visible in the poster layout, which is designed for a limited amount of text.
- Captions for the card layout moves from alongside the image to below the image. For the collage and overlap layouts, captions move from alongside the image to near the bottom of the image.
- The card, collage, overlap, and stack layouts have a Dynamic Font Sizing option in the site styles panel. When this is enabled, text won't resize smaller than 14 pixels.
- Multiple image blocks stack vertically on mobile.
Troubleshoot image colors
If an image is saved in CMYK mode instead of RGB mode, its colors on your Squarespace site may differ from what you see in the original image file.
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.
Next steps
After setting up the image block, you can rearrange, edit, or remove it:
- Drag and drop the block to move it or create columns and rows.
- Use the image editor to crop, rotate, or add image filters.
- To replace the image without adding a new image block, click Remove image in the Content tab of the block editor, then upload a new image.
- Delete the block.