Steps to minimize unwanted cropping, and tips to help your images look their best.
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 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.
Usually, 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.
- In Fluid Engine, image blocks set to Fill crop when you resize them. Image blocks set to Fit get smaller or larger.
- In the classic editor, crop image blocks with the cropping handle. To reset the image to its original dimensions, double-click the cropping handle. Make the image smaller by adding spacer blocks on either side.
- After cropping, use the focal point to center the image.
There are other ways to control banner cropping on your site, depending which version of Squarespace your site is on.
Banners will always crop to some degree, especially on mobile. To customize the banner, you can:
- Style the banner image and text.
- Change the banner size, including height and width.
- Use the focal point to change how the image centers.
To learn how your banners appear on mobile, visit How will my site appear on mobile devices?
- Learn how to style your site's banners and set their height.
- Use the focal point to adjust how the image centers.
Images added to site-wide banner images (added within site styles) can repeat, display at the banner height or width, or fill the container completely.
Background images or videos
How you control background image or video cropping depends on which version of Squarespace your site is on.
If your section background image or video appears cropped, change the section height or width to show more of your image or video.
To learn more, visit Page sections.
Background images can repeat, display at the browser height or width, or fill the browser screen completely.
- Use site styles 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.
Gallery sections and gallery pages
Depending which version of Squarespace your site is on, your site has different gallery options.
Upload and manage images directly in the gallery section, then use the Gallery tab to control how images display.
To learn more, visit Gallery sections.
- 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 handle.
- Stacked - Each image expands to fill the width of the page or column the block is in.
Portfolio and index pages
Portfolio and index pages are different page types in different versions of Squarespace, but they work in similar ways:
Hover over a portfolio section to add an image, then use the Gallery tab to control how it displays.
To learn more, visit Portfolio pages.
How cropping affects product images depends on which version of Squarespace your site is on.
After uploading images to your store sections, use the store section tweaks to style them. While editing a page, click the pencil icon. You can change the spacing, columns, aspect ratio, and text alignment. Experiment with different style tweaks to set how your product images display. To learn more about customizing your store page, visit Collection page sections.
Product image aspect ratios
It's not possible to auto crop product images in store pages. We recommend your product images have similar aspect ratios. For example, before uploading images to your site, ensure your product images all have a consistent landscape or portrait orientation.
How your product images crop on the landing page depends on your template's store page type.
- In site styles, use the Product Image Auto Crop tweak to choose whether the images crop to the same shape, or display at their original shapes.
- If you're cropping, use the Product Item Size tweak to set the shape.
- Use the focal point to adjust where the image centers.
- If you're not cropping, use the Product Overlay Color tweak to choose the color that displays behind the image.
- For more help, visit Styling store pages.
- The advanced store page always crops images to the same shape. This helps give your page a cohesive look and feel.
- To set the shape for all images on your store page, use the Image Aspect Ratio tweak in the Products: Layout section of site styles.
- Use the focal point to adjust where the image centers.
Visit these links to learn about the thumbnail styles for either of the unique store pages:
Version 7.1 doesn't support cover pages.
Cover pages will always crop to some degree, especially on mobile. The amount of cropping depends on the height of the image, the width of the browser, and the layout you've chosen.