Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Using the Image Block

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

  1. Open a page or post editor.
  2. Click an Insert Point or the +.
  3. Select Image from the menu.
  4. 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 - Customize the image

After adding an image to the Image Block, follow the sections starting here to customize it. There are many ways to make the Image Block your own depending on the design you want to achieve, including:

Step 4 - Save

Click Apply to save any changes to the block.

Step 5 - Resize and 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.

To change the image's size relative to other page content, visit Resizing an image.

Stretch and fill the blank space

If the image is narrower than the content area, the image will retain its width, and 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 display the image at the full width of the block, check Stretch. Stretching an image may affect image quality.

Set the image to open in a lightbox

Check Lightbox to have the image display in a lightbox when clicked.

Captions display in the lightbox even when set to Do Not Display Caption. Using lightboxes disables clickthrough URLs.

Set your lightbox style by choosing Dark Overlay or Light Overlay from the drop-down. 

Link the image by adding a clickthrough URL

You can turn the image into a link by adding a clickthrough URL.

Add a caption and alt text

Captions are a great way to display an artist name, credit a media outlet, or display the image title. The caption is used as the image's alt text.

Captions aren't recommended for long blocks of text.

Setting the text

To add a caption/alt text, apply any changes to the block, then click Write here... below the image, and enter the caption.

Setting the display

To change where your caption displays, double-click the Image Block to open the editor. You can select:

  • Do Not Display Caption - No caption will display on the page unless the image is viewed in lightbox.
  • Caption Below - Caption appears below the bottom-left corner of the image.
  • Caption Overlay - Caption appears over the image in a dark gray overlay bar.
  • Caption Overlay on Hover - When the cursor hovers the image, a caption appears in a dark gray overlay bar.
Tip: To use alt text but not a caption, add the caption and set the display to Do Not Display Caption.

Styling the text

For most templates, the caption text follows the same font style and color as the site's body text.

In the Skye, Foundry, and Tudor templates, use the Image & Gallery Block Captions tweaks to set the caption's font and color.

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.

FAQ

How do I resize images in the Image Block?

You can resize Image Blocks by cropping or using additional blocks. To learn how, visit Resizing an image.

Can I add alt text?

Yes. To add alt text, add a caption for the image following steps in this guide. Captions act as the image's alt text, even if you've selected to not display the caption.

To use alt text but not display a caption, add the caption and set the display to Do Not Display Caption.

Can I style captions?

When the caption is set to Caption Below, it usually takes the same color and font as regular text.

In the Skye, Foundry, and Tudor templates you can use the Image & Gallery Block Captions tweaks to set the caption's font and color style options.

I can't add lowercase letters to captions on the Five template.

Captions added to Image Blocks on the Five template will always be capitalized. As Five captions are fairly small by default, this helps make the captions more visible. 

Image links are the wrong color.

This usually happens when the Image Block has a clickthrough URL and a link in the caption. To resolve the issue, only use one or the other.

Can the image open in a new tab when clicked?

Yes. You can do this by adding a clickthrough URL.

The image keeps cropping.

Most likely this is a result of using the bottom or side handles to resize the image. To reset the image to its original dimensions, double-click the circular cropping handle at the bottom.

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.

To rotate the image, you can use the Adobe Creative Cloud Image Editor. You can also edit it in an external program of your choice and re-upload it.

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.

Was this article helpful?
16 out of 47 found this helpful
Using the Image Block