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

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

By Michael Thompson

December 6, 2024 at 10:14 AM

Adding images to your website enhances visual appeal and effectively communicates your message. Here's a comprehensive guide on adding and resizing images effectively.

Adding Images

You can add images through various methods:

  • Image blocks for single images
  • Gallery sections for multiple images
  • Automatic layouts combining images, text, and buttons
  • Banner images for section backgrounds
  • Portfolio highlights
  • Logo and branding elements
  • Gallery blocks within blog posts
  • Featured images for collection items
  • Product images
  • Instagram feed integration

Image addition illustration

Image addition illustration

Image Upload Tips:

  • Follow formatting guidelines for device compatibility
  • Use high-quality images
  • Ensure proper file formats (JPG, PNG)
  • Utilize stock images from Unsplash or Getty if needed

Mobile App Image Upload:

  1. Tap [+] or [Add Image]
  2. Choose from:
    • Take new photo
    • Upload from library
    • Upload from files
    • Reuse existing image
  3. Add title, description, and click-through URL

Resizing Images

Block Resizing:

  • Creative Editor: Direct drag-and-drop sizing
  • Classic Editor: Use spacer blocks to adjust width
  • Specific block settings for customized dimensions

Section-Specific Resizing:

  • Gallery Sections: Adjust gallery styles
  • Portfolio Pages: Modify display settings
  • Store Pages: Set product image ratios
  • Banner Images: Adjust section height/width
  • Logo: Control position and size

Advanced Image Features:

  • Alternative text for SEO
  • Image animations and effects
  • Built-in image editing
  • Lightbox display options
  • Click-through URLs
  • Hover effects
  • Custom image shapes

Social Media Optimization:

  • Use Squarespace's image resizer
  • Select preset platform dimensions
  • Maintain original file format
  • Download as zip file

Accessibility Considerations:

  • Add descriptive alt text
  • Ensure proper contrast
  • Maintain readable dimensions
  • Support screen reader compatibility

These guidelines ensure your images enhance your site while maintaining professional quality and accessibility across all devices.

Related Articles

Previous Articles