How to Resize an Image in Squarespace

Resizing images in Squarespace is key to achieving a clean, balanced layout. Whether you need to scale images, adjust dimensions, or fit them into your design grid, Squarespace offers multiple methods to change image size without distortion. This guide walks you through all the effective ways to resize and optimize images on your website.

Resize Images Using the Image Block

The Image Block is the most direct method for adjusting image dimensions in Squarespace. You can place it anywhere and scale it using built-in tools.

1. Open the Squarespace editor and select the page or section.
2. Click an existing Image Block or add a new one via Add Block → Image.
3. Upload your image or choose one from your library.
4. Click the image, then drag the blue handles to resize it manually.

Adjust Image Size via Design Settings

Some image size changes must be made through the Design settings, especially in sections using stacked or grid layouts.

Use section settings

• Click the section containing your image.
• Select Edit Section, then open the Design tab.
• Adjust image ratio, spacing, or column width to change how images scale.

Control image display via padding/margins

• Use Spacing to add white space around your image, reducing visual size.
• Adjust alignment to center or justify images for better flow.

Fit Images to Design Grid or Columns

Using Squarespace’s column or grid layout? Resize images by structuring your layout first.

Resize Images Before Uploading

Sometimes the best way to control image display is before you even add it to your website. Compress and scale images using editing tools.

• Tools: Use Photoshop, Canva, or TinyPNG.
• Best Practice: Keep image width under 2500px and file size below 500KB for fast loading.

Change Display Options in Image Block Settings

Squarespace image block settings let you tweak visual presentation without needing to edit the image file.

Key options to adjust

• Image Format: Inline, Poster, Card, or Overlap
• Image Ratio: Crop image to fixed ratios like 1:1, 3:2, etc.
• Caption Settings: Add captions to influence spacing and context

Responsive Image Sizing on Mobile

Squarespace automatically scales images for mobile, but issues may arise if dimensions are too extreme or layout is not balanced.

Best practices for mobile:

• Avoid large images with no padding
• Test your website with different screen sizes using the preview tool
• Use Spacer Blocks to create breathing room between images and text

Advanced: Use Custom CSS to Resize Images

If the built-in tools don’t give you full control, using custom CSS in Squarespace lets you resize images with precision. This method is especially useful when you want to apply consistent image sizing across multiple pages or need to override theme defaults.

Where to add custom CSS in Squarespace

1. Go to Design → Custom CSS in the Squarespace dashboard.
2. Paste your CSS code into the editor window.
3. Click Save to apply changes across your website.

Example: Resize all image blocks

/* Resize all image blocks globally */
.sqs-block-image img {
  max-width: 400px;
  height: auto;
}

Example: Resize images in a specific section only

/* Resize images inside a specific section with ID */
#page-section-123 .sqs-block-image img {
  max-width: 300px;
}

Optional enhancements

• Add a hover effect: Resize or scale images on mouse-over for interactive elements
• Use media queries: Make image sizes adapt to different screen widths for full responsiveness

/* Responsive image resizing */
@media (max-width: 600px) {
  .sqs-block-image img {
    max-width: 100%;
  }
}

How to Make Images Smaller on Squarespace for Better Performance

Understanding how to make images smaller on Squarespace is essential for improving your website’s loading speed and overall performance. Large images can slow down your website, increase bounce rates, and negatively affect mobile usability. To avoid this, reduce file size before uploading without sacrificing quality.

• Use TinyPNG or ImageOptim to compress images while maintaining clarity
• Enable Lazy Load in Settings → Performance so images load only when needed
• Choose efficient formats like WebP or optimized JPGs to reduce bandwidth

Useful Links

Adding and Resizing Images – Learn how to add images to your site and adjust their size using the Image Block and other tools.

Formatting Your Images for Display on the Web – Tips for styling images to display clearly on any screen size, ensuring optimal appearance across devices.

Using the CSS Editor – Apply custom CSS to style fonts, colors, and backgrounds beyond Squarespace's built-in options.

Device View – Preview your site on mobile devices to ensure responsive design and proper image scaling.

Reducing Your Page Size for Faster Loading – Strategies to optimize your site's performance by minimizing page size, including image optimization techniques.

Enhance Your Squarespace with Powerful Plugins!

Elfsight created dozens of useful plugins to make your website more attractive and boost its performance in so many ways. Try these no-code solutions for free on Squarespace!

Conclusion

Learning how to resize images in Squarespace gives you greater creative control over your layout and ensures a responsive, professional look. Whether you're using the Image Block, adjusting design settings, or editing images before uploading, each method contributes to a visually balanced and fast-loading website. Use the tips and tools in this guide to make the most of Squarespace's image customization options.