Cropping issues can significantly impact the appearance of your website's images. Here's how to optimize and control image cropping across different Squarespace elements.

Understanding Image Containers

Images on your site are placed in containers that manage their display relative to other content. Two scenarios occur:

• Most common: Images fit container dimensions and crop to fill the space
• Sometimes: Container adjusts to image dimensions for full display

Image Blocks Optimization

• Fill setting: Images crop when resized
• Fit setting: Images maintain aspect ratio when resized
• Use cropping handle in classic editor
• Add Spacer blocks to reduce size without cropping
• Adjust focal point for better centering

Banner Images

Version 7.1:

• Background images always crop somewhat
• Control through content overlay amount
• Adjust banner size
• Use focal point for centering

Version 7.0:

• Page banners crop especially on mobile
• Customize height through site settings
• Site-wide banners can repeat, fill, or fit dimensions

Background Images

Version 7.1:

• Adjust section height/width to control cropping
• Images can duplicate, fill screen, or fit dimensions

Version 7.0:

• Use site styles for display settings
• Keep images under 2,500 pixels for mobile compatibility

Gallery Management

Gallery Sections (7.1):

• Direct upload and management
• Control display through Gallery tab

Gallery Pages (7.0):

• Display depends on template
• Refer to template guide for specifics

Gallery Block Tips:

• Slideshow: Use similar aspect ratios
• Grid: Set uniform aspect ratio
• Carousel: Adjust height with cropping handle
• Stacked: Images fill width

Store Pages

Version 7.1:

• Customize through Store section
• Adjust spacing, columns, aspect ratio
• Product images can't auto-crop
• Use similar aspect ratios for consistency

Version 7.0: Classic Store:

• Toggle Automatic Image Cropping
• Set Product Size for shape
• Use focal point for centering

Advanced Store:

• Images crop to same shape
• Set Image Aspect Ratio in Products section
• Adjust focal point for centering

Best Practices:

• Use consistent image orientations
• Pre-crop images before uploading
• Consider mobile display
• Optimize image sizes for web
• Test across different devices

Related Articles

Previous Articles