Many images on your site will crop either horizontally, vertically, or both. This helps your images look their best within your site's layout and in different browser sizes.
This guide will help you understand the normal cropping that happens in Squarespace and learn how to minimize it as much as possible.
Tip: To crop the original image, use the Adobe Creative Cloud Image Editor or third party software.
Every image on your site is in a container, which is an invisible box that controls how the image displays in relation to other content on the page. When an image is loaded into a container, one of two things happens, depending on the container's settings:
- Most of the time - The image conforms to the container's dimensions, which vary based on browser width. If the image isn't the same shape as the container, the image crops to fill the container completely.
- Sometimes - The container’s shape conforms to the dimensions of the image so the whole image displays.
In most cases, images on your site display within the containers' dimensions, and will experience some cropping. This helps images look their best while adapting to different browser sizes.
Image Blocks display images at their original height and width ratio, within your site's layout restrictions.
- Crop the image with the cropping handle. To reset the image to its original dimensions, double-click the cropping handle.
- After cropping, use the focal point to center the image.
- If the image is smaller than the Image Block container, check Stretch to fill the container.
- Make the image smaller by adding Spacer Blocks on either side.
Images that are wider than they are tall usually work best. If all your banner images have the same aspect ratio, it'll be easier to anticipate how they'll crop. Set your images up for success with our best practices for responsive design.
- Visit your template's guide to learn how to style your banners.
- In many templates, you can set the banner height.
- Use the focal point to adjust how the image centers.
Images added to site-wide banner images (added within the Style Editor) can repeat, display at the banner height or width, or fill the container completely.
- Use the Style Editor to set how the banner image displays.
- Choose tweaks that look good on both mobile and desktop.
- Use an image that's between 1500 pixels and 2500 pixels wide.
Background images can repeat, display at the browser height or width, or fill the browser screen completely.
- Use the Style Editor to choose how the banner image displays.
- See our troubleshooting tips for help with mobile display.
- Images that are more than 2500 pixels along their longest edge can cause issues on mobile devices.
- When choosing a full-bleed background image, consider how visitors will access your site.
- For any format, resize the whole block by adding Spacer Blocks on either side.
- Slideshow - The gallery’s height is set by the widest image. To avoid cropping or blank space around images, use images with similar aspect ratios.
- Grid - In the Design tab, use the aspect ratio to crop all images to the same shape, and change the number of thumbnails per row to change their size. Use the focal point to adjust how each image centers.
- Carousel - Adjust the height with the cropping tool.
- Stacked - Each image expands to fill the width of the page or column the block is in.