Uploading and displaying images on your website is easy with image blocks. Here's how to use them effectively:

Adding Images

1. Click Add Block or the insertion point
2. Select Image
3. Click the + icon
4. Choose to:
   • Upload from your computer
   • Reuse from your library
   • Search stock images
   • Upload from mobile device (via Squarespace app)

Note: For optimal performance, use images under 500KB.

Customizing Images

The image block editor lets you:

• Replace or delete images
• Define focal points
• Set layout options
• Add alt text
• Edit file names
• Enable lightbox effects
• Add image links
• Apply animations

Layout Options

Choose from several layouts:

• Embedded: Basic image with optional captions
• Poster: Text overlay creating banner effect
• Card: Image with text on side
• Overlap: Image and text with partial overlap
• Collage: Images with background text cards
• Stacked: Images with bottom text

Styling Features

1. Shape Options:

   • Corner radius adjustment
   • Predefined shapes (circle, triangle)
   • Custom aspect ratios (1:1, 2:3, 3:2)

2. Size Control:

   • Drag corners to resize
   • Use spacer blocks
   • Fill container option
   • Mobile-responsive layouts

3. Text and Captions:

   • Add titles and subtitles
   • Position text overlay
   • Style with custom fonts
   • Set color overlays

Best Practices:

• Use images between 1500-2500 pixels wide
• Keep titles concise
• Consider mobile viewing
• Add alt text for accessibility
• Optimize image size for web

Related Articles

Previous Articles