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 size of the original image
- The layout you've chosen for the Image Block
This guide covers ways to resize images in an Image Block.
Before you begin
- This guide focuses on Image Blocks, the most common way to add images in Squarespace. For information about other image types, see the Other images section.
- 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.
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 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.
- Haz clic en un Insert Point (Punto de Inserción) para añadir un nuevo Bloque de Espacio.
- Arrastra el Bloque de Espacio hacia la izquierda o derecha del Bloque de Imagen.
- Haz clic y arrastra el icono del controlador para cambiar de tamaño.
Para centrar la imagen, añade Bloques de Espacio de igual tamaño a ambos lados.
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 by cutting portions of the image away.
Tip: In most cases, the 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
Another 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.
- 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.
- 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 the center of the cropped image with focal points.
- Double click the cropping handle to undo cropping.
Haz clic y arrastra el controlador de recorte hacia abajo para recortar horizontalmente. Esto hace zum sobre la imagen y recorta los lados.
Resize with the Style Editor
The Card, Overlap, and Collage layouts have a resizing option in the Style Editor.
- From the Home Menu, click Design, then Style Editor.
- Scroll to the section for that layout. (For example, scroll to the Image Block: Overlap section.)
- Use the Image Width tweak to change the size. Image text will automatically get bigger or smaller to fit the space.
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 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, open the Image Block and check Stretch. Stretching an image may affect image quality.
- If the image is wider than the Image Block area, it will shrink to fit (not crop).
- The other layouts stretch automatically.
Esta guía brinda información acerca de los Bloques de Imagen, el lugar más común para añadir imágenes en Squarespace.