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, its size depends on the image file's width and the content area where it's placed. This guide covers ways to resize images in an Image Block and provides background information about how Squarespace handles image sizing.

Tip: Image Blocks support multiple layouts. The instructions in this guide primarily apply to the Inline layout. If you're working with any other layout, visit Image Block Overview for more help.

Resize gallery and banner images

This guide focuses on Image Blocks, the most common place to add images in Squarespace.

Use 2500 pixel-wide images for responsive design 

When you upload an image, Squarespace creates seven versions of it with different widths. This allows Squarespace's built-in responsive design to pick the appropriate image size based on the visitor's screen. To ensure your images look great on any device, we recommend uploading images at a width of 1500 pixels to 2500 pixels.

For more information, visit Formatting your images for display on the web.

Adjusting Image Block width 

Note: The Image Block supports multiple layouts. The instructions in this section apply to the Inline layout. All other layouts have different options.

Using 2500-pixel wide images

If your image width is equal to or larger than the content area, the image fills the full Image Block area. If the image is wider than the Image Block area, it will shrink to fit (not crop).

Using narrow images

As we mentioned above, it's best to upload an image at 1500 - 2500 pixels. However, if the image is narrower than those dimensions or the content area, it retains its width. You'll see blank space added to both sides of the image. This preserves image quality by avoiding stretching.

To remove this space and have the image occupy the full width of the content area, open the Image Block and check Stretch.

Resize Image Blocks with other blocks

Regardless of the uploaded image width, the entire Image Block (including blank space for narrow images) occupies the full width of the content area. You can increase or decrease this area using other blocks.

Spacer Blocks

Spacer Blocks 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.

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

Other blocks

You can also use these steps with other blocks to size images relative to your content. This is especially useful for text side-by-side with images as shown in the .gif below.

For detailed steps, visit Resizing blocks.

Resize images with cropping

Note: The Image Block supports multiple layouts. The instructions in this section apply to the Inline layout. All other layouts have different options.

Another option is to crop the image. Cropping changes image size by cutting portions of it.

Click the Image Block. A border appears with a circular cropping handle at the bottom. Click and drag the cropping handle to crop the image. You can adjust the focus of the cropped image with focal points. Double click the cropping handle to undo cropping.

Note: The cropping handle only appears after you add an image.

Crop height

Click and drag the cropping handle up to crop the image vertically.

Tip: 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.

Crop width

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

Note: You can also crop images using the Adobe Creative Cloud Image Editor.
Was this article helpful?
74 out of 185 found this helpful