# Images and media

Upload, file and find images, set focal points, and generate starting points with AI.

For: Everyone adding pictures to a site

## Adding images

Media is the workspace shelf, shared by every website you own. Upload files by dropping them in, or let an image field upload for you the first time you use one. JPEG, PNG, GIF, WebP and SVG are accepted, up to 10 MB each.

SVG is worth a note: it is a drawing rather than a photograph, so it stays sharp at any size. Logos and icons belong in SVG where the source is available.

Walkthrough: Uploading images to the media library (The media library)

1. **Upload**: Drop files in, up to 10 MB each: JPEG, PNG, GIF, WebP or SVG. One upload serves every website in the workspace.
2. **The shelf**: Everything uploaded, newest first, with the grid doing the finding when names are vague.
3. **A file like any other**: Click for details: where it is used, its size, and the focal point picker.

1. Open Media and create a folder or two before uploading.
2. Drop the files in, or upload from an image field where you need them.
3. Rename anything that arrives with an unhelpful file name.

## Folders, search and reuse

Folders are for people, not for the website: they organise the shelf without changing anything about how images are used. Folders can sit inside folders, three levels deep: open a folder, then New folder makes one inside it. Removing a folder removes the folders inside it too, and their images stay in the library, in no folder.

Pictures uploaded on a product file themselves under Products, in a folder named after the product, and pictures for a category under Categories. Rename the product or category and its folder follows, unless you have renamed the folder yourself. Choosing a picture that is already in the library never moves it.

Right-click a picture, or use its menu, to rename and describe it, download it, copy its link, move it to another folder or delete it. Search finds by file name, so tidy naming at upload pays off. Using the same image in several places is normal and costs nothing; it is one file on the shelf.

Walkthrough: Folders and search (The media library)

1. **Folders for people**: They organise the shelf without changing anything about how images are used.
2. **Folders inside folders**: Products, then the product's name: pictures uploaded on a product file themselves here, and the folder follows a rename.
3. **Search by file name**: Tidy naming at upload pays off here. "van-side.jpg" beats "IMG_2043".
4. **Reuse freely**: Using the same image in several places costs nothing; it is one file on the shelf.

Note: A photo used on the home page and in a blog post arrives from one upload. No duplicates, no drift.

## Focal points

Images appear in different shapes around a site: wide in a hero, square in a card, tall on a phone. The focal point tells CubeSites which part must not be cropped away. Drag the dot onto the face or the subject, and every shape crops around it.

A picture that keeps cutting someone's head off in one place is almost always a missing focal point rather than a wrong picture.

Walkthrough: Setting a focal point (The media library)

1. **Drag the dot**: The focal point tells CubeSites which part must not be cropped away, whatever shape the image is used in.
2. **Check a square and a wide shape**: A picture that keeps cutting someone's head off is almost always a missing focal point, not a wrong picture.

- [ ] The subject sits inside the dot
- [ ] Checked in a square card and a wide hero
- [ ] Descriptions written for every image used

## Generating images with AI

The Generate tab in the image dialog makes a picture from your description: "a van parked outside a terraced house, warm afternoon light". Results cover AI images on the allowance shown in the Media card.

Generated images arrive with an empty description field. Fill it in like any other image, and treat the result as a starting point: replace anything that claims to show a real place, product or person with a real photograph of it.

Walkthrough: Generating a starting point with AI (Choosing an image)

1. **The Generate tab**: Beside the library, one tab where images are made rather than found.
2. **Describe it plainly**: A sentence of scene and light works better than a list of keywords.
3. **Then describe it honestly**: Generated images arrive with an empty description field. Fill it in like any other image, and replace anything claiming to be real.

Warning: Never use a generated image to show a real customer's job, a real team member or a real product. If it should be a photograph, take one or buy one.

## Where are uploaded files kept?

In the workspace, hosted with your sites. Nothing is stored with a third party just because a site uses it.

## Do big images slow the site down?

Every image is resized and served in modern formats automatically, so a large upload does not weigh on visitors. An absurdly large source file is still worth avoiding.

## Related guides

- [Change text and images](/help/editor/text-and-images)
- [Add products](/help/shop/add-products)
- [Logo and site icon](/help/brand-and-design/logo-and-site-icon)
---

CubeSites is a trading name of Cube Systems Limited, part of Crushed Ice Group. Registered in England and Wales, company number 17220899. Registered office: Unit 11, Olney Business Park, Osier Way, Olney, Buckinghamshire, MK46 5FP. ICO registration number ZC216972.

Contact: hello@cubesites.co.uk | 01234 672 617 | https://cubesites.co.uk/contact