Guide to Upload and Edit Images: Best Practices for Your Website

Guide to Upload and Edit Images: Best Practices for Your Website

By Michael Turner

January 9, 2025 at 06:37 AM

Images are a powerful way to enhance your website's visual appeal. Here's how to effectively use Image blocks in Squarespace:

Adding Images

  1. Click "Add Block" or an insertion point
  2. Select "Image"
  3. Click the + icon
  4. Choose to:
    • Upload from computer
    • Select from image library
    • Browse archive images

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

Mobile Upload Instructions

  1. Click + in Image block editor
  2. Select "Upload from Mobile Device"
  3. Scan QR code if first time (to download app)
  4. Tap notification on mobile device
  5. Select image and tap "Upload"

Customization Options

Image block editor allows you to:

  • Replace or remove images
  • Set focal points
  • Configure design settings
  • Add alt text
  • Edit file names
  • Enable/disable lightbox
  • Add image effects

Urban skyscrapers illuminated at night

Urban skyscrapers illuminated at night

Adding Links and Shapes

To add links:

  1. Click the Image block
  2. Select Link icon or "Add Link" in editor
  3. Enter destination URL

Shape options:

  • Corner Radius: Round specific corners
  • Predefined Shapes: Circle, triangle, etc.
  • Custom ratios: 1:1, 2:3, or 3:2

Resizing and Layout

Resize options:

  1. Intuitive editor: Drag corners/sides
  2. Classic editor: Use spacer blocks

Gray wall with trees behind

Gray wall with trees behind

Layout options:

  • Inline (default)
  • Poster
  • Card
  • Overlap
  • Collage
  • Stack

Advanced Features

  1. Animations and Effects:
    • Site-wide animations
    • Individual block effects
  2. Text Integration:
    • Captions
    • Titles
    • Subtitles
  3. Overlay Options:
    • Color selection
    • Opacity control
    • Blending modes

Remember to optimize images for web display and maintain consistent styling across your site for professional results.

Related Articles

Previous Articles