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.

Important: images that rely on text within them to convey information, such as an image of a poster, are not accessible. This is because the text they contain is unavailable to some people, for example users who rely on screen reader software or significant magnification of content. You should avoid the use of such images, or ensure that you provide a text-based alternative. For example, adjacent to the image, you could provide a link to a separate page containing a text-based version of all the information contained in the image.

If you want a small amount of text to appear over the top of an image, you can use the 'Add an image with overlaid text' option below.

In this article:

    Add an image to your page, with or without overlaid text (Components Editor)

    The Components Editor is an evolution of the old visual editor, for editing the content of web pages within SiteBuilder.

    1. Edit the page with the Components Editor.
    2. Place your cursor where you want to add the image.
    3. In the left-hand menu, select Add images, media, files and carousels > Add an image.
    4. In the Image popup, specify the image to use by doing one of the following:
      • Select the magnifying glass icon next to the Image URL box to specify an image that's already uploaded to your website.
      • Drag and drop one or more images into the dotted-line box.
      • Select Browse in the above box to find images on your computer and upload them.
      • Select an image under Recently uploaded files, if any are present.
    5. If the image is described in the text or is just for decoration, select the checkbox This image is purely decorative.
    6. Otherwise, enter a brief but meaningful description in the Alternative text 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.
    7. Optionally, specify the following settings:
      • Relative size - use the dropdown to choose what proportion of the width of your page, or the component the image is within, should be occupied by the image. The default, Auto, means the image will be displayed at its full size, except where this is too large for the page or the component it's within, in which case it will be resized to fit.
      • Float - by default, your image appears on the left, with no other content next to it. You can instead use the dropdown to choose:
        • Left - the image is left-aligned, with other content to its right.
        • Right - the image is right-aligned, with other content to its left.
      • Margin - use the dropdown to choose how much space there should be between the image and any content immediately adjacent to it. The options are None, Narrow and Full (the default).
      • Add a border - select the checkbox to add a solid line border around your image.
    8. To add a text overlay:
      1. Expand the Add a text overlay section.
      2. In the Text box, enter the text you want to appear on the image.
      3. Select the Text alignment for the text you entered. This is where on the image the text will appear.
      4. Select the Text colour. The text appears within a shaded box. When you select Light, the text is light and the shaded box is dark. When you select Dark, the text is dark and the shaded box is light.

      Note: a text overlay enables you to display text on top of your images in an accessible way. It helps avoid the use of images that have text saved within them, which are not accessible.

    9. Select Add image.
    10. To change any of the above, select the image and then in the toolbar that appears above it, select Settings.
    11. You can reposition your image as necessary.
    12. When you've finished editing your page, select Publish.

    Insert an image from your website (old visual editor)

    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.
      Insert image icon
    5. In the Image window, select Find. A popup appears containing two tabs: This web site and Your computer.
      Navigate to your image
    6. On the This web site tab, use the tree structure to navigate to a previously uploaded image. Select the file name of the image you want to insert, then Select.
    7. 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.

      Note: if the image is described in the text or is just for decoration, you can leave the Description box empty and select the checkbox This image is purely decorative.

    8. Select Insert at the bottom of the Image window.
    9. You can update the image's size, margins and alignment in the Image window. For more information on these options see: alignment and spacing.

      Image properties box
    10. When you have finished editing your page, select Publish.

    Upload an image from your computer (old visual editor)

    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 Find. A popup shows you two tabs: This web site and Your computer.
    6. Select the tab Your computer.
      Upload image from computer
    7. Select Choose file 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.

      Note: if the image is described in the text or is just for decoration, you can leave the Description box empty and select the checkbox This image is purely decorative.

    9. Select the Select button to add the image to your page.
    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 (old visual editor)

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

      Edit the image spacing and alignment

    2. You can change the:

      • Width or Height - these determine the size of the image, in pixels
      • Left margin, Right margin, Top margin and Bottom margin - these specify the space, in pixels, between the image and any surrounding content
      • Alignment - this determines how the image is positioned in relation to any surrounding content
    3. When you have finished editing your page, select Publish.

    Add an image with overlaid text (old visual editor)

    This option enables you to add images to your page with a text overlay in an accessible way. It helps avoid the use of images that have text within them, which are not accessible.

    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 Insert a... drop-down menu, then Image with text.
    5. In the Image with text overlay box, select the image you want to use, as described in the above sections:

        The Image with text modal, including boxes for the image URL, text to overlay, image description, text position & text colour

      • In the Text to overlay on image box, enter the text you want to appear on the image.
      • Enter a brief but meaningful description in the Image 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.

        Note: if the image is described in the text or is just for decoration you can leave this box empty.

      • Select the Text position for the text you entered. This is where on the image the text will appear.
      • Select the Text color. The text appears within a shaded box. When you select Light, the text is light and the shaded box is dark. When you select Dark, the text is dark and the shaded box is light.
      • Select Insert. You should now see the [image-with-text] tag, similar to the following, in the visual editor:

        [image-with-text] alt="Image description here" position="top-left" src="field.jpg"]Some overlaid text[/image-with-text]
      • You can select Preview to see how the image with text will look on the published page, then Publish when you're happy with the appearance. The image with overlaid text appears similar to this:

        Some overlaid text

      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.