Insert an image

Images can add value to your FLO site if they are:

  • meaningful (eg a chart, flow diagram)
  • contextual (eg image relates to content in the module where it is included)
  • consistent in style (eg cartoon-like, real-life, graphic representations, square edges)
  • consistent in size (eg 300 pixels width) and suitable for online (72 dpi1
  • consistent in location and layout (eg right-aligned, white space around the image)

Make sure any images you select are copyright assured (ie you have permission to use them) if you are not using self-created images.

1. dpi = dots per inch (see Wikipedia for further explanation)


Finding free images

Where necessary, you should acknowledge the origin of the image (see particularly the section ‘Attributing use of copyright material’). Respect the creator’s moral rights and, where possible, attribute their details against the picture. Another consideration if using the internet to source images is to ensure the image has come from a legitimate webpage source. It is a good idea to keep a record of what images you use, where you sourced them and any other details in case licensing changes over time or you need to reuse the image elsewhere. Read the usage rights carefully before you select an image for your site – make sure you understand how to use the image correctly.

See Adding a table so you can provide a caption for your image for layout information.

Creative Commons copyright for free use

Check the attribution details anyway – you may still see the warning ‘Images may be subject to copyright’, or you may need to attribute the designer/contributor. 

  1. Go to Google images
  2. Type in your search keywords
  3. In the next screen, open ‘options’ (top-right corner – looks like a small cog)
  4. Choose ‘Advanced search’ from the pull-down menu
  5. Top field – type in keywords
  6. Bottom field (usage rights) – choose ‘free to use, share or modify, even commercially’ (to be really safe)
  7. Click the ‘Advanced Search’ button and select from the result


Steps to uploading

It might be helpful to source your images first, and store them in a folder for uploading to your FLO site. Make sure you resize your images outside of FLO. You can resize them in FLO when adding them, but it only appears as though they are resized – in fact, they remain the same size. The FLO site may take longer to load if you have large file sizes, so for usability it is best to resize large image files in image editing software such as Paint.net (free) or University-licensed software such as Adobe Fireworks or Photoshop. ITS can support installation (extension 12345). 

  1. Edit (if required) and store your image (see above) 

  2. Go to the page, book chapter or wherever else you want to insert an image, that has the HTML editor toolbar

  3. Click on the image icon in the toolbar
    Default toolbar - image icon
  4. Click Browse repositories... then Choose File to find an image to upload

  5. Choose license from the pull-down menu, then Upload this file

  6. Put a description for the image (Describe this image for someone who cannot see it) and choose the Alignment (left or right is a good choice, but be consistent)

  7. Click Save image

Providing a caption for an image

You may want to attribute your image if you have found it on the web, or simply provide a caption for what the image represents. There are several ways to do this, outlined below.

Use a 2-column layout 

  1. In your FLO resource/module, in the HTML editor toolbar click on the Show more buttons Show more buttons iconicon
  2. From the toolbar menu, select the Bootstrap grid  bootstrap grid iconicon
  3. From the pull-down Bootstrap grid icon menu, choose the layout option 25%, 75% Columns OR 75%, 25% Columns
  4. grid layout 25% 75% options
  5. Place your image in the 25% column and put text in the other column (these instructions assume your image has been resized in an image editing software)
  6. Save changes

Use bootstrap styling to create a 'container' for your image and caption

If you unafraid of using HTML code, a cleaner way to create a container for your image and caption is to use a bootstrap style for images. This requires you to work in HTML view (to do this, click on the Edit HTML source icon  Edit HTML source icon in the page/book chapter or wherever the HTML editor is available).

You might also be interested in…

» How do I...? OLD GLOSSARY