Images

Images are one of the many ways you can engage your readers and complement the message of your website. 

You can add an image to any content type using the 'Add image' page component. 

EdWeb 2 currently supports single file uploads of up to 100MB.

Allowed file types are :

• png
• gif
• jpg
• jpeg

Image styles

When adding an image, you can choose from various styling options which will impact how the image displays on your page.

These options include choosing portrait or landscape orientation, and selecting your desired image dimension in pixels, which will impact how big the image displays. 

The image styling options are: 

• 16:9
• 2:1
• No crop full width
• Landscape 450x300
• Landscape 750x500
• Portrait 300x400
• Portrait 575x500
• Portrait 675x900

Images styled with the 16:9 or 2:1 ratios can only be landscape orientation. If you upload a vertical photo into one of these styles, your image will be cropped and scaled to fit these dimensions and its subject may become unclear.

Images using the 'No crop full width styling' will be displayed with the full width of your original image, and no proportional cropping. 

Below you can see an example of how each image style could look on a page.

Images uploaded into the 16:9 style can only be landscape orientation.

If you upload a vertical photo into this style, your image will be cropped and scaled to fit these dimensions and its subject may become unclear.

Images uploaded into the 2:1 style can only be landscape orientation.

If you upload a vertical photo into this style, your image will be cropped and scaled to fit these dimensions and its subject may become unclear.

Images using the 'No crop full width styling' will be displayed with the full width of your original image, and no proportional cropping. 

Banner images

The only exception to the image options offered for page content is the banner image.

Every website needs a local banner image of 1500px x 275px, which is found at the top of every page in the local website.

This should be a unique image, not replicating any other banner in the University web estate.

Accessibility

Images should not be used in place of written information, and each page should make sense without the image. 

Make sure you add appropriate alt text for anyone unable to view the images, and explain any key information that the image might include, for example data from an infographic.

It's not recommended that you use too many images on the same page. Use less, and make sure that the ones you do use have an impact. 

For more information on making your image content accessible, visit our dedicated page on accessible media:

Free-to-Use Online Tools

If you're unfamiliar with the tools available on your computer to edit images, there are a number of free online graphics softwares you can use.

Pixlr Photo Editor

Adobe Image Resizing tool

Adobe Image Cropping Tool