Workspace Annual Plans 30% off for a strictly limited time. Use Coupon Code WORKSPACE3
HomeBuilding Your WebsiteGetting Started With The Website Builder

How to add and organise images on your website

Your images are central to your website, but a strong site is usually built from a careful edit rather than the largest possible collection. Choose photographs that explain your style, the work you offer and the experience a client can expect.

Choose the right presentation

  • Use an Image widget for one photograph within a layout.
  • Use a hero or full-width image to introduce a page.
  • Use a gallery, scrolling gallery, slider or slideshow for a connected group.
  • Use a gallery or client-site portal when you want visitors to enter another Workspace viewing experience.

A small group of visible images may be easier to scan than a slideshow, so choose the format for the visitor’s task.

Prepare images for the web

Use a web-ready copy rather than an unnecessarily large production file. Keep enough resolution for a sharp display without creating file sizes that slow the page. Use a consistent colour-managed export process and check the result in a browser.

Consider the shape of the space. Wide banners need images with room around important subjects, while portraits may suit narrower columns. Keep faces and essential details away from edges where responsive cropping could affect them.

Add a single image

  1. Open the page in Page Designer.
  2. Add or select its section and column.
  3. Add the Image widget.
  4. Select or upload the image.
  5. Choose the available ratio, width, crop and click behaviour.
  6. Add brief, useful alternative text where available.
  7. Save and preview the page.

Write useful alternative text

Alternative text helps someone understand the purpose of an image when they cannot see it. Describe the useful subject or information briefly and in context. You usually do not need to begin with “image of”, repeat a nearby caption or add search keywords that do not help the reader.

For example, “Bride and groom walking along a windswept beach at sunset” is more useful than “wedding photo”. If an image is purely decorative and the editor allows it, leave its alternative text empty so assistive technology can skip it.

Organise a portfolio

Lead with work that is both strong and relevant to the clients you want. Group photographs with a clear visual or story connection and remove near-duplicates. If you offer several types of photography, use separate pages or clearly labelled sections.

Check mobile crops and loading

Review banners, sliders and grids at several widths. If a subject is lost, choose a more suitable image or layout. Avoid very long pages filled with large images, and check the published page away from your usual editing computer and connection.