Managing Your Media Library

Where to find this: Services → Website → Website Editor

Your media library holds the photos you've uploaded to your website. You reach it through the Asset Manager, which opens whenever you choose an image.

Opening the Asset Manager

There's no Media option in the editor's menus — the Asset Manager appears when you're picking a picture:

1. Select an Image component on your page, or the header, footer, or any element that takes a background image.
2. In the Properties panel on the right, click Select Image (it reads Change Image if there's already a picture there).
3. The Asset Manager opens with three tabs: Photo library, Stock Photos and Load from URL.

Photo Library

The Photo library tab shows everything you've added, with a count of how many items you have.

Uploading a Photo

1. Click Upload a photo.
2. Pick a file from your computer.

Upload one photo at a time — the button takes a single file per go. While it's working the label reads Uploading…, then the new photo appears at the front of the library.

Common formats: JPG, PNG, GIF, WebP, SVG, HEIC, TIFF and more besides. Each file can be up to 25 MB.

Finding a Photo

• Search – Type in the search box to match a photo's title or, for stock photos, the photographer's name. Press / anywhere in the Asset Manager to jump straight to the box.
• Filter by source – The dropdown at the top right switches between All Sources, Pexels, Uploads and URL Imports.

Using a Photo

Click a photo's card. It's applied to whatever you were editing straight away and the Asset Manager closes — there's no second Select step.

Deleting a Photo

1. Hover over the photo's card in the library.
2. Click the bin icon.
3. Confirm when you're asked.

Stock Photos

Search millions of free stock photos without leaving the editor:

1. Click the Stock Photos tab.
2. Search for what you need (for example "office", "cleaning", "happy customer").
3. Browse the results from Pexels.
4. Click a photo to bring it into your library.

Load from URL

If a picture already lives somewhere on the web:

1. Click the Load from URL tab.
2. Paste the web address of the image.
3. Click Preview to check it loads and looks right.
4. Click Use This Image.

Image Settings

Select an Image component and the Properties panel shows these settings.

Image Source

• Select Image / Change Image – Opens the Asset Manager.
• Alt Text (Required) – Describes the picture.

Alt Text

Alt text matters for:

• Screen readers – so visitors who can't see the image still know what's there.
• Search engines – so they understand what the picture shows.
• Broken images – it's what appears if the picture fails to load.

Good alt text:

• Describes what's in the picture.
• Is short — under 125 characters.
• Doesn't start with "Image of" or "Picture of".

Examples:

• Good: "Team member cleaning a kitchen countertop"
• Poor: "Image"
• Poor: "IMG_4532.jpg"

Image Styling

• Shape – Default, Rounded, Circle or Thumb (a bordered thumbnail).
• Fluid – Let the picture scale to the width of whatever holds it.
• Object fit – How the picture fills its space: Cover (fills and crops), Contain (fits inside, may leave gaps), Fill (stretches, may distort) or None (original size).

Size, spacing, borders, effects and animation are set in the usual sections further down. Images have no link setting — to make a picture clickable, use a Button or put the image inside a linked element.

Background Images

Any element that supports a background image uses the same picker:

1. Select the element.
2. Find Background in the Properties panel and click Select Image.
3. Choose your picture — it's applied straight away.

Then adjust:

• Size – Cover (fills the area), Contain (fits inside), Auto (original size) or Stretch (fills exactly, may distort).
• Position – A grid of dots for which part of the picture stays in view.
• Repeat – No Repeat, Tile, Tile X or Tile Y.
• Dark Overlay – A slider that darkens the picture, shown as a percentage, so text on top stays readable.

There's no fixed-while-scrolling option.

Image Best Practices

For Performance

1. Use sensible sizes – Don't upload a 4000px photo for a small thumbnail.
2. Compress first – Tools like TinyPNG shrink files with no visible loss.
3. Choose the right format:
   • JPG – Photographs.
   • PNG – Graphics needing transparency, such as a logo.
   • WebP – Modern format, smallest files.
   • SVG – Icons and simple graphics; scales perfectly at any size.

For SEO

1. Always add alt text – Every image needs a description.
2. Name files meaningfully – Rename before uploading, so the photo is easy to search for later.
3. Don't overdo it – Balance pictures with words.

For Design

1. Keep a consistent look – Similar styles and colours across your photos.
2. Think about phones – A wide photo can crop awkwardly on a narrow screen.
3. Use good-quality photos – Blurry or pixelated pictures look unprofessional.
4. Stay on brand – Choose pictures that look like your business.