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

Resizing an image

When you add an Image Block to a page or blog post, several factors affect how large it appears on your site:

  • The size of the Image Block
  • The layout you've chosen for the Image Block
  • The size of the original image (Inline layout only)

This guide helps you understand those factors, and explains the different options for resizing an image.

Watch a video

Before you begin

  • This guide is about resizing Image Blocks, which let you add images to Layout Pages, blog posts, and other content areas in Squarespace. For information about other image types, see our information on other images.
  • We recommend uploading an image that has a width between 1500 and 2500 pixels. This range is the best choice for images that look good but don't overload your site.
  • If you're using a pre-built layout with a placeholder Image Block, add your own image to the block before trying to resize it.

Resize with other blocks

When you add an Image Block, it expands to occupy the full width of the content area. You can decrease the size of the Image Block by adding blocks on either side. The aspect ratio (width to height) stays the same, so the whole image shrinks while keeping the same shape.

The most common way to do this is with Spacer Blocks, which create blank space. Add these to the left or right of an Image Block, then drag the resize handle to resize the Image Block.

  1. Click an insert point to add a Spacer Block.
  2. Drag the Spacer Block to the left or right of the Image Block.
  3. Click and drag the resize handle.

Resizing an image to make it smaller, using another block.

To center the image, add Spacer Blocks of equal size to both sides.


Other blocks

You can do this same method with other blocks. This is especially useful for text side-by-side with images, as shown in the .gif below.


Crop the original image

Cropping can change an image's height and shape by cutting portions of the image away. 

To crop the original image, use the built-in Image Editor, as shown in the image below, or use your own third-party software and re-upload the image.

Tip: In most cases, the cropped image will stay the same width on your site. To change the width, use one of the other methods in this guide.


Use the cropping handle

An option for the Inline and Poster layouts is to click and drag the cropping handle to crop the image vertically. This leaves the image the same width but changes the height.

  1. Click the Image Block. A border appears with a circular cropping handle at the bottom. 
  2. Click and drag the cropping handle to crop the image.


  • Press and hold Shift while dragging the cropping handle to resize the image in 20-pixel increments. This can help align the bottom of the image with another block.
  • The cropping handle only appears after you add an image.
  • You can choose a center for the cropped image using focal points.
  • Double click the cropping handle to undo cropping.
  • Pull the handle down to zoom in on the image.


Click and drag the cropping handle down to crop horizontally. This zooms in on the image, cutting out the sides. 


Resize with Image Block Styles

The Card, Overlap, and Collage layouts have a resizing option in their style settings.

  1. While editing a page, open Site Styles, then click Image Blocks.
  2. Scroll to the section for that layout. (For example, scroll to the Image Block: Card section.)
  3. Use the Image Width tweak to change the size. Image text will automatically adjust to fit the space.
  4. Click Save.
  1. In the Home Menu, click Design, then Site Styles.
  2. Scroll to the section for that layout. (For example, scroll to the Image Block: Card section.)
  3. Use the Image Width tweak to change the size. Image text will automatically get bigger or smaller to fit the space.
  4. Click Save.
Tip: This affects all Image Blocks with that layout.

Stretch to fill the block

If you're using the Inline layout and your image is narrower than the Image Block, the image will retain 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. 


  • 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 layouts stretch automatically.


Options by layout

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

Other images

Your site has other options for adding images, all of which have their own resizing options:

Tip: For any block, you can use the Resize with other blocks method.
Was this article helpful?
151 out of 530 found this helpful