Adding attractive visuals to your website is crucial for engaging visitors. Here's everything you need to know about adding and resizing images in Squarespace.

Adding Images to Your Site

You can add images in several ways:

• Use image blocks for single images
• Create gallery sections for multiple images
• Set up automatic layouts combining images, text, and buttons
• Add background images to section banners
• Display portfolio project images
• Include branding elements (logo, favicon)
• Create gallery blocks within blog posts
• Set featured images for collection items
• Upload product images
• Connect Instagram feeds

All images automatically adjust to different screen sizes thanks to Squarespace's responsive design.

Resizing Images

Block Resizing:

• Creative Editor: Click and drag to resize directly
• Classic Editor: Use spacer blocks to adjust width
• Image Block: Adjust cropping handles for height
• Gallery Block: Crop or resize based on layout
• Summary Block: Customize via design settings

Section Resizing:

• Gallery Sections: Choose gallery style and layout
• Portfolio Pages: Adjust display style
• Store Pages: Set aspect ratio and width
• Banner Images: Modify section height/width
• Site Logo: Change position and size

Advanced Image Features:

• Add alt text for accessibility
• Apply animations and effects
• Use built-in image editor
• Enable lightbox viewing
• Add click-through URLs
• Create hover effects
• Apply custom shapes

Social Media Resizing:

1. Use Squarespace's free image resizer
2. Upload .jpg or .png files
3. Select preset sizes for various platforms
4. Download resized images as .zip file

Best Practices:

• Follow format guidelines for optimal display
• Use the asset library to manage uploaded images
• Consider stock images from Unsplash or Getty
• Ensure proper compression for fast loading
• Maintain consistent aspect ratios
• Test display across different devices

Troubleshooting tip: If uploads fail, check browser compatibility and try again.

Related Articles

Previous Articles