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 and 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.

For more detailed steps, follow the sections below.

Add an image

In the Content tab of the image block editor:

• To upload your own image, click Add Image. You can also drag the image file into the image uploader from your computer.
• To add a stock image, click Search for Images or Search Images. You can choose from free or premium options. To learn more, visit Searching and adding stock images.
• You can also reuse images from the image search window.

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.
• You can edit the image after uploading by using the image editor.
• The image block won't display on your site without an uploaded image.

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

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 animations

It's not possible to add animations from the Squarespace app.

In the Design tab of the image block editor, you can add animations visitors see when they load or refresh the page.

To add animations:

1. In the image block editor, click Design, then click Animations.
2. Select an effect from the list to apply to the image and any text. As you select an option, you’ll see a preview of it on the page.
3. To animate the image and text separately, select Custom, then select options for Image and Text.

Tip: On version 7.1, you can apply animations globally to all images on your site.

Choose from these animation options for your image, text, or both:

• Fade In - Block, image, or text fades in
• Slide Up - Block, image, or text slides upward
• Slide Down - Image or text slides downward
• Horizontal Clip - Block or image loads in horizontal layers
• Vertical Clip - Block or image loads in vertical layers
• Tilt Up - Block or image zooms in with an upward tilt
• Tilt Down - Block or image zooms in with a downward tilt
• Focus In - Block, image, or text looks blurry, then comes into focus
• Collide - Image and text slide inward from the sides
• Reveal - Image and text slide outward from the center
• Slide from Left - Image or text slides in from the left
• Slide from Right - Image or text slides in from the right

Here's an example of a collage image block using these settings:

• Animation - Custom
• Image animation - Slide from Right
• Text animation - Slide from Left

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.

Resize the image

You can resize or crop image blocks in a variety of ways, depending on the layout. To learn more, visit Resizing an image.

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.

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.