Images in email campaigns

Display galleries of images in your campaign and add captions and clickthrough links.

Last updated January 15, 2025

Use an image section to add images to your campaign. You can add multiple images, each with captions and clickthrough URLs, and choose different layouts to change the placement of images and captions.

Follow this guide to learn how to set up image sections in your campaigns and about other places in your campaign where images may display.

Image formatting

To prevent blurry images, we recommend keeping your image width 750px or less. For more help with image formatting, visit Formatting your images for display on the web.

Multiple images display in a vertical stack, but you can choose different layouts to change the placement of images and captions.

Add an image section

To add an image section to a campaign:

  1. Create or open your campaign draft. For more help, visit Building email campaigns.
  2. Click + anywhere in the campaign between the header and footer.
  3. Click Image.
  4. In the right panel, click Add Images to upload up to four images from your device, or click Select from Library to select images from your library or Unsplash. It's not possible to license premium images in Email Campaigns, but you can use previously licensed Getty Images.
  5. After uploading at least one image, click Manage Images below the thumbnail to add, rearrange, or delete images.
  6. Click Unlinked beside an image name to add a clickthrough URL.
  7. Click the layout drop-down menu to change the image section layout.
  8. Click Spacing and Section Color to make style changes.
  9. Depending on your layout, add a caption to your images.

All changes save automatically. You can undo or redo changes as long as the draft is open.

Tip

To open the image editor, hover over the image you want to edit in the draft and click the pencil icon.

Add, rearrange, or delete images

After adding at least one image, click Manage Images. Here, you can:

  • Add more images by clicking Add Image. You can add up to four images in all layouts.
  • Rearrange images by clicking and holding the six dots to the right of the filename and dragging the image to a new position.
  • Delete an image by clicking - to the left of the filename.

After making changes, click Back to return to the Images panel.

Add a clickthrough URL

Image clickthrough URLs turn the whole image into a link, so when a subscriber clicks the image, it opens the link.

To add a clickthrough URL:

  1. Click Unlinked beside the images name in the right panel. If an image already has a clickthrough URL, the URL displays beside the image name. If you don't see Unlinked or a URL beside your image name, you might be in the Manage images panel. Click Back to return to the Images panel.
  2. In the clickthrough URL field, you can add a web address directly, or click the gear icon to open the link editor for more options.
  3. In the link editor, you can link to an external web address, a page on your site, an email address, or a phone number. To learn more about links in Squarespace, visit Adding links to your site.
  4. After setting up the URL in the link editor, click Save.

Add alt text

Adding alt text to images makes them more accessible to visitors. The alt text displays for screen readers and other accessibility tools, but doesn't otherwise appear in your campaign.

If you don't add alt text manually, no alt text displays. To add alt text to an image in an image section:

  1. Click the image section, then click the image file name in the right panel.
  2. Click into the field under Image Alt Text and add your image description.
  3. The alt text saves automatically.

You can also add alt text to blog sections and product sections with the same steps. For more about alt text in general, including best practices, visit Adding alt text to images.

Image section layouts

Click the layout drop-down menu to choose how images and captions appear. By default, when you add a new image section, its set to the Banner layout.

You can choose from these layouts:

  • Banner - Full-bleed images with captions below.
  • Grid - Images display in a grid of small thumbnails. It's not possible to add captions in this layout.
  • Card - Images with captions displaying on an overlapping card. The captions display on alternating sides for each image, starting on the right.
  • List (Left) - Images in a list on the left side with captions on the right.
  • List (Right) - Images in a list on the right side with captions on the left.
  • Side - Images in a list with captions displaying on alternating sides.

Each section can use one layout style. To add another image with a different layout, add a new section.

Style the image section

Use the size, spacing, and color options to style your image section. Your options may vary depending on your layout.

Image size

With the grid, side, and list layouts, you can edit image size directly.

Click Image Size, then click S, M, or L, or click ... to set the size manually.

For banner and card layouts, use the Side padding tweak under Spacing to change the image width. Keep in mind, some apps always display images at full-width regardless of these settings.

Spacing

Click Spacing to change the padding in your image section. Depending on your layout, your spacing options may vary:

  • Side padding - Add white space on either side of the image. For banner and card layouts, use this tweak to change the image width.
  • Padding between sections - Add white space at the top and bottom of the image section.
  • Padding between rows - Add vertical white space between images in the section. This only appears if you add multiple images to a single section.
  • Horizontal Alignment and Vertical Alignment- Align the images in the grid layout.
  • Center padding - Add white space between the images and captions in the side and list layouts.

Color

You can change the following section-specific colors:

  • Section color - Change the color that appears behind images and captions. If set to transparent, the content background or email background appears instead.
  • Text color - Change the color of captions. Font and text size follow global campaign styles.
  • Card color - Change the background of the captions on the card layout.

To learn more, visit Styling email campaigns.

Add captions

To add captions:

  1. If you're using the banner layout, enable Show Caption in the images panel.
  2. Click Write here... in the preview and add text.
  3. Highlight text to format it or add a link.

Keep in mind:

  • The grid layout doesn't support captions.
  • Captions in email campaigns don't become alt text.
  • Text added to images is image-specific. If you delete an image, its caption is deleted too.
  • Use the side panel to style the text color. The font matches your global fonts.

Add an image without a caption

To add an image without a caption:

  1. Add an image section.
  2. After adding your image, choose the Grid or Banner layout.
  3. On the banner layout, switch the Show Caption toggle off to hide the caption.

Can I add an image slideshow?

There isn't a built-in slideshow layout. To add a slideshow effect, create an animated .gif from a set of images, then upload it to the image section.

Header images

You can upload or reuse an image from your library to your campaign's header, or include your site logo if your site uses one. To learn more, visit Building email campaigns.

Blog and product images

Blog and product sections pull blog posts and products into your campaign from your site, including the post or product featured images.

It's not possible to change the post or product featured images in these sections, but you can hover over them and click the pencil icon to open the image editor. To add a different image entirely, change the featured images in your blog page or store page, or use an image section to directly choose the image and caption.

Footer Image
  • Get help from our community

  • Get help from our community on advanced customizations.

  • Hire a Squarespace Expert

  • Stand out online with the help of an experienced designer or developer.