← Back to Documentation

Adding Images

Images bring your website to life. This guide covers uploading images, configuring display options, and ensuring optimal performance.

Adding an Image Block

Method 1: Block Palette

  1. Press I or click the + button
  2. Select Image from the palette
  3. Click on the canvas to place the block
  4. The upload dialog appears

Method 2: Drag and Drop

  1. Drag an image file from your computer
  2. Drop it directly onto the canvas
  3. The image is uploaded and placed automatically

Method 3: Copy and Paste

  1. Copy an image from another application
  2. Paste with Ctrl/Cmd + V on the canvas
  3. The image is uploaded and inserted

Uploading Images

Supported Formats

| Format | Best For | |--------|----------| | JPEG/JPG | Photos, complex images | | PNG | Graphics with transparency | | WebP | Modern, efficient format | | GIF | Simple animations | | SVG | Vector graphics, logos |

File Size Recommendations

  • Maximum: 20MB per image
  • Recommended: Under 2MB for fast loading
  • Optimal: 500KB-1MB for most photos

Larger files are automatically optimized during upload.

Upload Dialog

When you add an image block:

  1. Drag and drop a file onto the dialog
  2. Click "Browse" to select from your computer
  3. Choose from library to reuse uploaded images

Image Properties

Select an image block to access properties:

Content Tab

Alt Text

Describe the image for accessibility and SEO:

  • Keep it concise (125 characters or less)
  • Describe what's in the image
  • Include relevant keywords naturally

Examples:

  • ✓ "Golden retriever playing fetch in a park"
  • ✗ "img_1234.jpg"
  • ✗ "dog image picture photo"

Caption

Add visible text below the image:

  1. Enable Show Caption toggle
  2. Enter caption text
  3. Style matches your theme settings

Link

Make the image clickable:

  1. Enable Link toggle
  2. Enter URL or select a page
  3. Choose open behavior (same tab/new tab)

Display Tab

Fit Mode

How the image fills its container:

| Mode | Behavior | |------|----------| | Cover | Fills container, may crop | | Contain | Shows entire image, may letterbox | | Fill | Stretches to fill (may distort) | | None | Original size |

Cover is best for most cases.

Position

When using Cover mode, control which part shows:

  • Center - Middle of image (default)
  • Top - Top edge visible
  • Bottom - Bottom edge visible
  • Left/Right - Side edges visible

Border Radius

Round the corners:

  • 0 - Sharp corners
  • 4-8px - Slightly rounded
  • 12-16px - Noticeably rounded
  • 50% - Full circle (for square images)

Style Tab

Shadow

Add depth with shadows:

  • None - No shadow
  • Small - Subtle elevation
  • Medium - Standard depth
  • Large - Dramatic shadow
  • Custom - Define your own

Border

Add a border around the image:

  • Border width (px)
  • Border color
  • Border style (solid, dashed, dotted)

Opacity

Control transparency:

  • 100% - Fully visible
  • 50% - Semi-transparent
  • 0% - Invisible

Lightbox Settings

Enable lightbox for full-size viewing:

  1. Select the image
  2. Enable Lightbox toggle
  3. Optionally set lightbox group name

When visitors click, the image opens in an overlay at full size.

Lightbox Options

  • Zoom animation - Smooth or instant
  • Background - Dark, light, or blurred
  • Navigation - Arrows for grouped images
  • Close button - Position and style

Image Optimization

New Salon automatically optimizes uploaded images:

Automatic Processing

  • Format conversion - Converts to WebP when beneficial
  • Responsive sizes - Creates multiple sizes for different screens
  • Lazy loading - Images load as they enter viewport
  • CDN delivery - Served from global edge servers

Manual Optimization

Before uploading, you can optimize images yourself:

  1. Resize to maximum display size needed
  2. Compress using tools like TinyPNG or ImageOptim
  3. Choose appropriate format (JPEG for photos, PNG for graphics)

Checking Image Performance

  1. Open your published site
  2. Use browser DevTools (F12)
  3. Check the Network tab for image sizes
  4. Larger images may indicate optimization opportunities

Replacing Images

Replace Image Content

  1. Select the image block
  2. Click Replace in the properties panel
  3. Upload or select a new image
  4. Position and size are preserved

Swap with Library Image

  1. Select the image block
  2. Open Media Library
  3. Choose a different uploaded image
  4. Click Use This Image

Batch Image Upload

Upload multiple images at once:

  1. Open the Media Library from the toolbar
  2. Click Upload
  3. Select multiple files
  4. All images upload simultaneously
  5. Drag images to canvas as needed

Image Gallery vs. Single Image

| Feature | Image Block | Gallery Block | |---------|-------------|---------------| | Images | One | Multiple | | Layout | Freeform | Grid/Slideshow | | Lightbox | Individual | Grouped navigation | | Best for | Hero images, features | Collections, portfolios |

For multiple related images, consider a Gallery block.

Common Image Tasks

Making a Full-Width Hero

  1. Add an image block
  2. Stretch to page width
  3. Set height as desired
  4. Set fit mode to Cover
  5. Position to show key content

Creating an Avatar/Profile Image

  1. Add a small image block
  2. Make it square (equal width and height)
  3. Set border radius to 50%
  4. Result: circular image

Adding Image Hover Effects

  1. Select the image
  2. Open Style > Hover
  3. Enable hover effects:
    • Scale (zoom on hover)
    • Opacity change
    • Shadow addition

Troubleshooting

Image not uploading?

  • Check file size (max 20MB)
  • Verify format is supported
  • Try a different browser
  • Check your internet connection

Image looks blurry?

  • Upload higher resolution source
  • Check display size isn't larger than original
  • Disable any forced compression settings

Image loading slowly?

  • Original file may be too large
  • Check your internet connection
  • Try re-uploading to trigger optimization

Next Steps

Adding Images - Salon Docs