Styles and layout - insert an image

Show more buttons iconThis entry relates to styles and layout, in particular the HTML editor.

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 dpi = dots per inch) 
  • consistent in location and layout (eg right-aligned, white space around the image)

Table of contents

Sourcing and using images

All images you use should be referenced with the author and source (either a URL or publication title).

Wherever possible, you should use your own images or source ‘openly licensed’ images where the owner has given upfront permission for reuse (this is not automatic, even for images from the internet). If it is necessary to use other copyrighted images, the University has a paid licence that covers this use as long as you provide the appropriate copyright notice. If using images in a PowerPoint presentation, download the PPT teaching template so that the appropriate copyright notice is automatically included in your slides.

When uploading a third party image, you should select the relevant licence according to the terms/conditions the image was accessed under. For example, if the image sourced was licensed as ‘All rights reserved’, you should choose ‘All rights reserved’ when you upload it to FLO (see instructions below). If the image is available under a Creative Commons licence, look at the individual licence conditions to ensure you select the correct licence.

For more information on locating images appropriate for reuse, see the Using images in teaching page in the Copyright for academic staff FLO site.

Creative Commons copyright for free use

Even if these images are 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. 

The Copyright for academic staff FLO site (Copyright and teaching > Using images in teaching) provides information on how to source free images.


Use your own image

While copyright in teaching material belongs to Flinders University (as per the Intellectual Property Policy), it is recommended that you still attribute yourself as the author of images you create so that you can be cited correctly.

Resize an image

You can resize images in FLO when adding them, but it only appears as though they are resized – in fact, they remain the same size. Using images that are bigger than they need to be can make your FLO site take longer to load, so to accommodate students with slower internet connections it is best to resize large image files before putting them in FLO.

We recommend doing this using Snagit, a University-supplied program with that can do everyday image editing. Snagit is available through the IDS Support Portal. Home-use licences are also available (request via Service One)

Resizing an image in Snagit
  1. Source your images first (as above). You may find it helpful to store them in a folder before uploading to your FLO site, so they are easy to find later on.

  2. Go to the File menu and select Open. You can then find the file on your computer.
    Open is the second item in the file menu

  3. On the centre-bottom of Snagit, you will see the measurements of your image. Click on the measurements to edit them.
    change the size of your picture by clicking on the measurements next to the zoom
    What do the numbers mean?
    The numbers refer to pixels (or px for short). A pixel is a single dot on your computer's screen. For reference, most desktop computers are 1920 pixels wide, and laptops are generally either 1920 or 1366 wide. The following image shows measurements of 100 pixels.
    each colour is 100 pixels wide
    The size of the images in the grid layout is 210 by 140 pixels.

  4. Once you have settled on a size, save your image (go back to the File menu, and select Save).

What is an ideal file size?

The ideal file size depends on the image. For example, if you have an image of the human brain, the image may need to be big enough so students can easily identify its various parts. This, in turn, will make the file size bigger. But if your image is only for decoration it can be smaller, as the teaching materials you've provided are the main focus.

It's good to remember that some students will have dramatically slower internet speeds than we enjoy on campus. While images definitely have an important role to play in education, it does need to be weighed against the needs of our students in remote Australia and developing countries.

If you have a jpg file (typically used for photographs) and are finding that the image size is still too large, you can reduce the quality of the file:

  1. Go to the File menu and select Save As.
    'Save as' is in the FIle menu, next to the 'save' option

  2. Make sure that the Save as type is set to 'JPG', then click on the Options button at the bottom of the window.
    Make sure the 'save as type' is set to jpg, and click on the options button

  3. Try reducing the image quality to 60, and then increase it to 70 or 80 if you find it is too blocky (here is an example of a blocky picture). Higher quality/larger images generally can have a lower quality than smaller or previously edited pictures.

Upload an image

  1. Edit (if required) and store your image (see information 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
    image icon

  4. Click Browse repositories... then Choose file to find an image to upload from your computer

  5. Choose license from the pull-down menu (if required). See Find free images, or Use your own image for more information. If the image is your own, you can select the default option (All rights reserved). Click 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 the main thing is to be consistent with image placement in your topic site)

  7. Click Save image

Provide 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 a couple of ways to do this, outlined below, from easiest to most difficult.

1. Add a note 

You could simply put a note (eg Image attribution: details here) in the module or resource (book, page etc) where the image is placed. This is the simplest method.

2. Use a 2-column layout

This option is part of the HTML editor in FLO. Note that if you choose this option in a module, the entire module will be in this format, not just the text and image. The other option is to create a label for your image, text and caption, and use the 2-column layout in that. This method means the rest of the module will be in normal (= 1 column) layout.

  1. In your FLO resource/module, in the HTML editor toolbar click on the Show more buttons icon Show more buttons icon

  2. From the toolbar menu (2nd row), select the Bootstrap Grid icon  Bootstrap Grid icon

  3. From the pull-down Bootstrap Grid icon menu, choose the layout option 25%, 75% columns OR 75%, 25% columns
    columns layout

  4. Place your image in the 25% column and put text in the other column (these instructions assume your image has been resized in image editing software such as Snagit)

  5. Click Save changes

» How-to glossary