Image blocks

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:

1. Edit a page or post, click an insert point, then click Image. For help, visit Adding content with blocks.
2. Use the Content tab to add an image, captions, alt text, or an image link.
3. Click the Design tab to change the layout and animate the block.
4. 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:

1. 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.
2. 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.
3. Tap the image you want to use, then tap Upload.
4. 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.

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.

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.

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:

1. In the image block editor, click Design.
2. Choose Shape, then click Shape.
3. 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:

1. Go to Corner radius and click to set the radius for your entire image or for individual corners.
2. In the corner radius field, enter numbers (measured in pixels) to change the shape of the border.
3. 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:

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:

1. Open the image block and click Design.
2. 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.