Image Guide
Image Guide
Choosing an Image
Content can be enhanced using images to support your messages, if they are optimised for use on your website.
Images are used as supplementary content to support the information provided in the text content on a page. They should be used in context and not as a replacement for text.
Image quality
Use only high quality images. Images should not be:
- blurry
- stretched
- pixelated
Good quality University images are available in our photo library (University login required). Always preview your image to check the quality before publishing.
Images of text and complex images, like flowcharts or graphs, can present a barrier for users accessing your content. This content is effectively invisible to users of screen readers and anyone viewing the text only version of your site, for example a mobile user with images turned off. It is also impossible for search engines to index this content.
If you must include a complex image in your site then a text alternative of the essential information contained in the image is required.
Image size and orientation
Sites edited in T4 have many image options. We recommend that you use landscape images. Specific templates may have alternative sized images for banners and grid layouts. Check out our table of all required image sizes.
Editing images
You may need to do some basic editing of an image to get it ready to publish on your website. We recommend the browser based editing tool Fotor and have a Fotor User Guide (PDF: 306KB). Or you can crop and resize images in Photoshop, licences are available from Newcastle Uniiversity IT Service.
Alt text
Alt text provides alternative, textual content when an image cannot be displayed or for users of screen readers. It should be descriptive, but not necessarily a literal description of the image. Think about describing what the image represents.
Linking images
Many of our websites contain pages with grids of images. Hyperlinking the graphic or image used in a grid increases the area a user can ‘click’. This is useful for mobile users who may be trying to select links using their finger or a stylus. Image links should always be supported by links in the text of your page.
General Purpose Content
The images on this tab can all be added to the content area using the content type '01. General Purpose Content'. The details include size requirements and standards for captions.
Standard content images
Images are used as supplementary content to support the information provided in the text on a page. They should be used in context and not as a replacement for text.
Default alignment
A standard landscape image can be added to any content block. The default alignment is to the right of your content.
On mobile the image stretches to fill the full width of the screen and flows under the content. Try resizing and refreshing your browser to see this behaviour.
The required size for a standard image is 680x402.
Image with caption
You can add a caption to a standard image. It appears below the image on all devices.
The caption should describe what the image shows and/or provide information about the photographer and image rights.
The caption length is limited to 50 characters. This is around six to eight words.
Left aligned image
The default image alignment can be overridden to make the image left aligned.
Left alignment breaks up the flow of text content on your page. This can interrupt your users' reading, so think carefully before you choose this option.
On mobile they also stretch to fill the full width of the screen and flow below your content.
Full width image
The default image alignment can be overridden to make the image full width. The required size for full width images is 1200x469.
Full width images can provide a visual break in your content.
Depending on where they're used in a page they can also push content out of view. For this reason we don't recommend using a full width image towards the top of your page, and certainly not before your primary message.
You should think carefully before using this option and ask yourself: what does this type of image add to the user's experience. Does it support the content on the page or just act as decoration?
Inline image
Inline images align to the right on desktop and the centre on mobile. They retain the same dimensions on all devices. Try resizing and refreshing your browser to see this behaviour.
This image class is primarily used for logos, staff profile images and document thumbnails.
Mastheads and Grids
The images on this tab are for use in grids or masthead pages. The details include size requirements and standards for captions.
Masthead image
Mastheads are visual elements for use on section openers. Mastheads require a large, high quality image. Because the title and teaser overlays the image, make sure the focus of the picture is on the right.
The required size for a masthead image is 1790x700.
View our page about the masthead content type.
Grid images
Images can be used in grids on homepages and landing pages. Grids are built up using the Content Block content type '04. Box'. A box can be one of three sizes and the image requirements are different for each:
- Third = 818x428
- Half = 818x300
- Two thirds = 818x210
- Full width = 1200x344
View our content standards for boxes and grids.
News grids
Grids can also be used to display news. News grids are typically three columns.
The required size for grid images is 818x428.
View our example news grid.
Choosing and editing images
It is possible for the same image to be used in different contexts and content types. To do this you will need to crop and resize the image to the required sizes. Find out how to do this in our guidance on cropping images.
For general guidance on choosing and editing images view the image style guide on our website.
Image Sizes
For quick reference, here's a table of all the required image sizes for use in the different content types.
| Content Type | Image Size |
|---|---|
| Masthead | 1790 x 700 |
| General purpose content (right aligned) | 680 x 402 |
| General purpose content (full width) | 1200 x 469 |
| News item | 818 x 428 |
| Box (one third - 1/3) | 818 x 428 |
| Box (half - 1/2) | 818 x 300 |
| Box (two thirds - 2/3) | 818 x 210 |
| Box (full width) |
1200 x 344 |
| Staff Profile (Manual entry) |
456 x 456 |
| Slider (full width) | 1200 x 469 |
File Names
Our file naming conventions help you organise and keep track of the images being used across your site.
File names should:
- be short and meaningful
- be lower case
- use hyphens to separate words
To help you organise your images on your computer and in the Media Library, we recommend that you also include:
- the Photo Library ID
- a prefix for the content type the image has been cropped for, eg masthead
Example
The ideal file name will look like this: masthead-careers-40602.jpg