Please read our student and staff community guidance on COVID-19
Skip to main content Skip to navigation

Add images to a page

Before you upload images, ensure you save them with the appropriate dimensions, resolution and file size for the web. Large, print-quality images – for example, saved from a camera or phone – in web pages take longer to download and consume visitors' mobile data unnecessarily. See the guidance in: resize images for the web.

In this article:

Insert an image from your website

  1. Go to the page where you want to add an image.
  2. Go to Edit > Edit centre content or Edit right content.
  3. In the visual editor, place your cursor where you want to insert the image.
  4. In the toolbar, select the Image button. Alternatively, right-click in the visual editor and select Image.
  5. In the Image window, select the Search icon, which has the tooltip Find a page. In the next popup you will see two tabs This web site and Your computer.

    Navigate to your image
  6. Use the tree structure to navigate and your web pages to find images uploaded. Choose the image you want to insert by selecting its file name in the tree, then click Select to exit the tree view.
  7. Now enter a brief but meaningful description in the Description field. The description is the image's alt (alternative) text, which is important for accessibility. For example, the alt text Athena SWAN bronze award is better than asba-logo1.png or orange and blue logo.

    OR

    If the image you are uploading is described in the text or is just for decoration, you can instead tick the checkbox This image is for decorative purposes only.
  8. Click the Insert button at the bottom of the Image window.
  9. To change the image's alignment and spacing, select the image in the visual editor, then select the Image button. You can update the image's size, margins and alignment in the Image window. For more information on these options see: alignment and spacing.

    Decorative image checkbox shown in the image picker
  10. When you have finished editing your page, select Publish.

Upload an image from your computer

  1. Go to the page where you want to add an image.
  2. Go to Edit > Edit centre content or Edit right content.
  3. In the visual editor, place your cursor where you want to insert the image.
  4. Select the Image button in the toolbar. Alternatively, right-click and select Image.
  5. In the Image window, select the Find a page search icon. A popup will show you two tabs This web site and Your computer.
  6. Select the tab Your computer.
  7. Select the Browse/Choose file button and browse to the image on your computer:

  8. Enter a brief but meaningful description in the Description box. This is the image's alt (alternative) text, which is important for accessibility – see the guidance on text-based alternatives to visual media.
  9. Select the Select button to add the image and return to the visual editor.
  10. To change the image's alignment and spacing, select the image in the visual editor, then select the Image button. You can update the image's size, margins and alignment in the Image window. For more information on these options see the following section.
  11. When you have finished editing your page, select Publish.

Alignment and spacing

  1. Select the image in the visual editor, then select the Image button:

    Edit the image spacing and alignment

  2. You can change the:

    • Image size: specify the width and height in pixels
    • Image margin: specify the space to the left, right, top and bottom of the image in pixels
    • Alignment: specify how to align the image in relation to the surrounding text
  3. When you have finished editing your page, select Publish.

Related articles

Support

Email webteam at warwick dot ac dot uk
How to report a problem

Why are good image descriptions necessary?

Not all users can see images. Disabled visitors to your site may be using assistive technology like a screen reader which reads the page out loud, and this software will read the alt text to find out what the image represented.

A good description covers the information the picture intends to convey rather than what the picture looks like. For example if your site included the twitter icon, the alt text for this image could be alt="Twitter"<span "> but it should not be "blue bird".

To save the software reading out unnecessary information, use the checkbox for purely decorative images.