Adding and Resizing Images in Squarespace

Images are essential for creating engaging websites by breaking up text, showcasing products, and expressing your brand's personality. Squarespace automatically adjusts image sizes for different devices through responsive design.

Ways to Add Images:

• Single images using image blocks
• Gallery sections for multiple images
• Smart layouts combining images, text, and buttons
• Background images for page banners
• Portfolio page images
• Branding elements (logo, social sharing logo, favicon)
• Blog post and collection item images
• Product images with multiple angles
• Instagram feed integration

Adding Images via Mobile App:

1. Tap + or Add Image
2. Choose from options:
   • Take a new photo
   • Upload from gallery
   • Upload from files
   • Reuse existing images

Resizing Images:

Fluid Editor:

• Drag selections to resize directly on page

Classic Editor:

• Adjust width by adding adjacent blocks
• Use cropping handles for height adjustment
• Customize gallery layouts and aspect ratios

Advanced Image Features:

• Add alt text for accessibility
• Apply animations and effects
• Edit images (crop, rotate, filter)
• Enable lightbox viewing
• Create clickable image links
• Add hover effects
• Apply custom image shapes

Image Optimization Tips:

• Follow formatting guidelines for optimal display
• Use the Resource Library to manage uploaded images
• Access stock images through Unsplash and Getty partnerships
• Utilize Squarespace's image resizer tool for social media

Troubleshooting:

• If uploads fail, check browser compatibility
• Follow browser troubleshooting steps
• Ensure proper file formats and sizes
• Use Resource Library for efficient image management

Remember that all images remain responsive across devices, automatically adjusting for optimal viewing on desktop, tablet, and mobile screens.

Related Articles

Previous Articles