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.

add-image.jpg

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.

add-getty-image.jpg

Step 3 - Choose a design

For Image Blocks on Regular Pages, choose a layout in the Design tab:

  • Inline - Display a plain image with an optional caption (our classic Image Block).
  • Poster - Display text over the image.
  • Card - Align text to the left or right of an image.
  • Overlap - Display an image on one side with text on the other, partially overlapping the image. Add a background color to the title for a highlighting effect.
  • Collage - Display an image on one side and text over a background "card," offsetting and overlapping the image.
  • Stack - Display an image with text below, with an optional background color.

Other areas of your site, such as sidebars and blog posts, only support the Inline layout.

To learn more, visit Styling the Image Block.

Step 4 - Add and style text (optional)

Click Write here to add a caption or title and subtitle text to the image. To learn more, visit Styling the Image Block.

Text fields and style options vary by layout:

Tip: You can also create alt text to help search engines recognize your image.

Step 5 - Save

Click Apply to save any changes to the block.

Step 6 - 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.

moving_a_block.gif

Resize and crop the image

To resize your image:

On Regular Pages, each layout has its own additional resizing and cropping options.

You can turn the image into a link by adding a clickthrough URL. On Regular Pages, most layouts support buttons.

Note: Lightboxes disable clickthrough URLs.

Set the image to open in a lightbox

Only the Inline layout supports a lightbox. To have your image open in a lightbox:

  1. Double-click the image to open the image editor.
  2. Click the Design tab.
  3. If your Image Block is on a Regular Page, ensure your layout is set to Inline.
  4. Check Enable Lightbox.
  5. Choose your lightbox style with the Lightbox Theme drop-down.
Note: Captions always display in lightbox view. Lightboxes disable clickthrough URLs. 

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

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, or edit it in an external program 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.

Why can't I see all the layout options?

Only Regular Pages support multiple layouts for the Image Block. Other areas of your site, such as sidebars and blogposts, only support the Inline layout.

Was this article helpful?
17 out of 54 found this helpful
Using the Image Block