Images

Course images appear publicly on Course Description Pages (CDP) and images can appear throughout the course content. 

It is strongly advised that you provide and upload imagery cropped to the exact dimensions outlined on this page. Imagery on this page is not to scale – unless otherwise stated.

Partner logos and partner images appear within organisation profiles and are set up when new partners join FutureLearn. 

Image must-haves 

1. Course images must be supplied to FutureLearn before being uploaded. They appear on the CDP and must meet our quality and technical standards. Step and activity images you can upload directly to Course Creator during your course build. 

2. Simple, bold, striking. Course images help to sell your course. Select yours carefully. Consider a close-up shot. The focus/subject should be positioned centrally. Images within your course should be clear and relevant.

3. Crediting and copyright. Ensure all images have been cleared for use within the course (copyright) and requested credits added. 

4. Help learners visually distinguish between steps. Select images which enhance learning in the course and support the text. They can help learners orient themselves when returning to steps. Avoid generic images and dark images. Low-resolution images will not present well on high-definition screens. Poor-quality or badly chosen images reflect badly on the partner’s brand.

5. Insert alt text but avoid text within images. Alt text must be included for all images. See our guidance below. No text or logos are permitted on course images. Step, inline and activity images should avoid text unless it is critical to understanding. 

6. Reflect diversity in your course images. Consider gender, race, and age when choosing images. Avoid stereotypes. Images can make learners feel excluded if they are not represented.  

Course images 

Course images appear on our various course index pages, at the top of the Course Description Page, and on all public open step pages. It will also be used for any marketing and promotional media.  

Either: 

1. Provide your own course image to the content team during course build. 

• Minimum dimension of 1600 x 1066 px (a ratio of 3:2). 
• Most important content in the centre of the image. 
• No watermarks, logos (including partner logo), or text. 

See our must-haves above.

2. Or our Media Specialists can find an image for you through our licensed stock image accounts such as Getty etc.

• No additional charge to you.

• You may wish to re-use that Getty course image for your own marketing activities in relation to your FutureLearn course. Certain types of re-use are permitted, subject to the following terms and conditions. By downloading your Getty course image through FutureLearn you warrant and represent that you are acting directly on behalf of the relevant FutureLearn partner organisation, and you have the legal authority to bind that partner organisation and confirm that by downloading the Getty course image through FutureLearn, you have read, and your organisation gives FutureLearn full legal authority to bind your organisation to, the terms of the Getty Images licence agreement (as updated and amended by Getty Images from time to time). Your organisation further agrees that it will only use the Getty Images content in accordance with the Getty Images licence agreement and will accordingly indemnify, defend and hold harmless FutureLearn in respect of any damages, liabilities and expenses arising in connection with any breach or alleged breach by your organisation of the Getty Images licence agreement.

See examples of how course images are shown on the course description page in mobile view towards the bottom of this page.

‘Billboard’ image

If you cannot make your image adapt to all crops in the PSD template above, you may upload an alternative (‘billboard’) image for your course. We recommend a width of 1600px, and a height of 500px. 

Microcredential and Expert Track Course Images

Images for the Course Description Pages of Expert Tracks and Microcredentials appear as a thin background banner image, rather than the usual 3:2 ratio of short course description page images. 

The FutureLearn platform automatically crops the image, and applies a purple filter to make the overlaid course title and partner logo more visible. When choosing your Expert Track or Microcredential description page banner image ensure that the subjects of the photo are vertically centred so they will be seen. The uploaded image must still be 1600x1066px.

Note: Only FutureLearn Admins can currently upload microcredential description page banner images.

Activity (to-do list) images

Every activity requires an image. Activity images appear within each week of the To-do list. Activities also require a title and description (230 characters including spaces). 

Dimensions 442px x 295px 72 dpi, RGB

Step images

Step images can be added to appear at the top of article or discussion steps. 

Upload: 1 step image per step (optional) – dimensions 900px x 600px 72 dpi, RGB

To insert a step image into an article step in Course Creator: 

• Within the course, select the article you wish to add an image to 
• Click edit article 
• Click choose file. Select your image. 
• Insert alt text and caption text. 
• Insert copyright 
• Insert copy for the body of the step 
• Update article 

Step inline images

Inline images are images contained within the body of a step (within the text).  

• Automatically scaled to the full width of the text area. Unlike the ‘Step Images’ above, they will not be cropped.
• Any image file you upload must be at least 648 pixels wide. Crop/resize your images for the web before uploading. The bigger the size of the image, the longer your step will take to load for learners to view. 
• Add an Inline image by first uploading the image as an ‘asset’ to an article step (see video at bottom of page). Find an article step in your course, before selecting ‘edit article step’ scroll down to the subheading ‘assets’. Select choose file.  Upload your inline-image. 
• Make a note of which article step you have uploaded the asset image to! And be sure to give it a clear title (particularly if you have two versions - one as an expandable image).
• Once the image has been uploaded, you will be presented with the image URL. Copy this to your clipboard.
• Add the image within the body of any step in the course (it doesn’t matter where the asset is attached) using markdown. 
• Include the function for learners to expand the image if it is detailed. Use markdown to do this also.

Images within Open Steps

On open steps the step image (if present) appears at the top of the page, and the course image appears both at right of the open step content, and lower down the page, cropped to give it a more rectangular format, similar to that of the mobile view on course description pages. We also apply a 43% black (#000000) overlay to the course image.

Here is a live example of a popular open step.

Alt text

Alt-text is a text-based description of an image that can be picked up by a screen-reader and converted into a form (often audio) that the user can access. Alt text is typically a short phrase or sentence which succinctly and accurately describes the contents of that image.

Alt-text provides access to content to those with little to no vision and also the many learners using their mobile phones with limited mobile data. Learners can ‘turn off’ images to conserve data.  Alt text also assists search engines. 

All images in a course - graphs and images of tables, course images, activity images, step images- require descriptive alt-text that captures the full detail of the image. 

Top tips for alt text 

1. Alt text should describe the image in enough detail to make it meaningful.
2. Imagine that you are unable to see the image. What features would need to be described for you to understand it fully?
3. Don’t include the name of the photographer, or any copyright information. 
4. Don’t start alt text with ‘photo of…’ or ‘image of…’. Screen readers automatically add this as a default.
5. Keep it concise. Don’t describe absolutely everything in the image, unless relevant and in the context of the rest of the content. 
6. End alt text with a full stop. This causes the screen reader to pause briefly after the last word of the alt text, which makes for a more pleasant reading experience.

Add alt text in Course Creator 

For images at the top of the article steps, simply add alt text to the box below the image uploader. If you are uploading an image to a step in Course Creator, add this to the field ‘Image description (alt text) for screen readers.

For inline images (images within the body of text), alt text can be added in square brackets. Refer to our markdown page for more details.  

Alt text can be delivered as a separate document if it is too long for alt text. 

What are screen readers?

Screen readers are a form of assistive technology that helps those who are blind or partially sighted to access content presented on the web.

Screen reader software attempts to convert visual information on a screen into a non-visual form. It provides a mechanism for blind/partially sighted people to access what is being conveyed in images. 

Alt text example

Adequate alt text for below image: “Two eggs in a nest”

There is useful detail in the photo that hasn’t been captured by the alt text.

Better alt text:  “Two small, bright turquoise-coloured Bullfinch eggs sitting in a nest surrounded by green foliage”.

Too much detail: including details about the species of tree the nest is resting in.

Captions 

Text captions are different to alt text. They are often shorter and do not describe the visual elements that make up the image, but give a more general summary of the image. 

You will also see the option for giving credits under an image. This should solely be used for accrediting the image to its copyright owner or original creator.  

Image dimensions

Commercial licence 

Within all FutureLearn courses and course description pages, we can only host images that fall under a commercial licence as opposed to a non-commercial licence.

Stock library lists 

• Nappy - All images can be downloaded and used for free, for commercial and non-commercial use, with no permission needed. More details here. You can also donate to Nappy too via their website helping support the business. 
• Istock - works on a subscription model. The content is licensed for worldwide, unlimited, perpetual use. More details here 
• Pond5 - works on a subscription model and also has free content. The content is licensed for non-exclusive, worldwide, perpetual rights. Bear in mind that the Editorial content on the site is for non-commercial use only and for FutureLearn images, we can only host images that fall under a commercial licence.
• Eye for Ebony - works as a subscription model or single image purchase, only the extended commercial licence is applicable with unlimited lifetime viewers. The subscription model is recommended for large projects only.
• Pocstock - works on a subscription model. The content is licensed for worldwide, unlimited, perpetual use, and pricing is based on the file size. Bear in mind that the Editorial content on the site is for non-commercial use only and for FutureLearn images, we can only host images that fall under a commercial licence.
• Pexels - All images can be downloaded and used for free, for commercial and non-commercial use, with no permission needed. More details here
• Unsplash - All images can be downloaded and used for free, for commercial and non-commercial use, with no permission needed. More details here
• Pixabay - All images can be downloaded and used for free, for commercial and non-commercial use, with no permission needed. More details here

Representation and diversity are important when selecting the right images. Read this article from The Learning Network on where to find diverse images and why representation matters.

Successful image examples 

Course images on the Course Description Page 

In mobile view the top and bottom are cropped off the image to give it a more horizontal format: 

Video of how to insert an inline image 

More information 

• Alt-texts: The Ultimate Guide on Axess Lab's website. 
• Web Content Accessibility Guidelines (WCAG).
• Guidance on writing alt-text

Downloads

• Download our Photoshop template as a guide, it shows how course images are cropped. 

Terminology on this page that you aren’t familiar with? Check out our glossary. 

Contact FutureLearn