Managing Your Media Library

Title: Managing Your Media Library
Category: website-editor

Where to find this

Navigate to your media library through the following paths:

• Services → Website Editor tab

Accessing the Media Library

You can open the media library when:

1. Adding an Image component to your page
2. Setting a background image for any element
3. Clicking the dedicated Media option in the editor

Uploading Images

From Your Computer

1. Click Upload in the media library
2. Select one or more images from your computer
3. Wait for the upload to complete
4. Your images appear in the library, ready to use

Supported formats: JPG, PNG, GIF, WebP, SVG

From a URL

If your image is already hosted online:

1. Click the Load from URL tab
2. Paste the image URL
3. Click Import
4. The image is downloaded and saved to your library

Stock Photos

Access millions of free stock photos directly from the editor:

1. Click the Stock Photos tab
2. Search for what you need (e.g., "office", "cleaning", "happy customer")
3. Browse the results from Pexels
4. Click an image to import it to your library

Using Images

Adding to Your Page

1. Drag an Image component onto your page
2. Click Select Image in the properties panel
3. Choose from your library or upload new
4. Click Select to insert

As a Background

1. Select any element that supports background images
2. In the properties panel, find Background
3. Click Choose Image
4. Select from your library

Background Options

When using an image as a background:

• Position – Where the image anchors (centre, top, bottom, etc.)
• Size – Cover (fill area), contain (show entire image), or custom
• Repeat – Tile the image or show once
• Attachment – Scroll with page or stay fixed

Image Settings

When you select an Image component, configure these settings:

Alt Text (Required)

Alt text describes your image for:

• Screen readers – Helping visually impaired visitors
• Search engines – Understanding what the image shows
• Broken images – Displaying when images fail to load

Good alt text:

• Describes what's in the image
• Is concise (under 125 characters)
• Doesn't start with "Image of" or "Picture of"

Examples:

• ✅ "Team member cleaning a kitchen countertop"
• ❌ "Image"
• ❌ "IMG_4532.jpg"

Display Options

• Width/Height – Specific dimensions or auto
• Object Fit – How the image fills its container
  • Cover – Fills the area, may crop edges
  • Contain – Shows entire image, may have gaps
  • Fill – Stretches to fill (may distort)
• Border Radius – Round the corners

Link Settings

Make images clickable:

1. Enable Link
2. Enter the destination URL
3. Choose whether to open in a new tab

Organising Your Library

Filtering

Use the filter options to find images:

• All – Show everything
• Uploads – Images you uploaded
• Stock – Images imported from Pexels
• URL Imports – Images loaded from URLs

Deleting Images

1. Hover over an image in the library
2. Click the Delete button (trash icon)
3. Confirm the deletion

Image Best Practices

For Performance

1. Use appropriate sizes – Don't upload 4000px images for small thumbnails
2. Compress images – Use tools like TinyPNG before uploading
3. Choose the right format:
   • JPG – Photos and complex images
   • PNG – Graphics with transparency
   • WebP – Modern format with best compression
   • SVG – Icons and simple graphics (scales perfectly)

For SEO

1. Always add alt text – Every image needs a description
2. Use descriptive filenames – Before uploading, rename files meaningfully
3. Don't overuse images – Balance visuals with content

For Design

1. Maintain consistency – Use similar styles and filters across images
2. Consider mobile – Large images may need different cropping on phones
3. Use high-quality photos – Blurry or pixelated images look unprofessional
4. Match your brand – Choose images that reflect your business style