How to Add and Resize Images in Squarespace: A Complete Guide

How to Add and Resize Images in Squarespace: A Complete Guide

By Michael Chen

December 6, 2024 at 11:15 AM

After adding images to your site, you can resize and customize them to create more engaging pages. Here's what you need to know:

Adding Images

You can add images in several ways:

  • Use image blocks for single images
  • Add gallery sections for multiple image layouts
  • Create banners with background images
  • Upload product images for e-commerce
  • Add Instagram blocks for social media feeds
  • Include logos and favicons for branding

alt text

alt text

Image Upload Tips

  • Follow formatting guidelines for optimal display
  • Use the asset library to reuse uploaded images
  • Access stock photos through Unsplash and Getty Images partnerships
  • Upload via desktop or mobile app

Resizing Options

Block-Based Resizing:

  • Intuitive Editor: Click and drag to adjust
  • Classic Editor: Use spacing blocks to control width
  • Gallery blocks: Customize layout and crop settings
  • Summary blocks: Adjust through design settings

Section-Based Resizing:

  • Gallery sections: Choose from multiple styles
  • Portfolio pages: Set image display preferences
  • Shop pages: Control product image ratios
  • Banner images: Adjust section height/width

Advanced Features

Enhance your images with:

  • Alt text for SEO and accessibility
  • Animations and effects
  • Image editing tools (crop, rotate, filters)
  • Lightbox viewing options
  • Clickthrough URLs
  • Hover effects
  • Custom image shapes

Social Media Optimization

Use Squarespace's image resizer to:

  • Convert images for social platforms
  • Choose preset sizes for Instagram, Facebook, YouTube, X
  • Maintain original file format
  • Batch process multiple images
  • Download resized images as .zip files

For maximum impact, ensure images are responsive across devices and follow recommended dimensions for each platform.

Remember to make images accessible by adding descriptive alt text and optimizing file sizes for faster loading times.

Related Articles

Previous Articles