Images

Learn about the benefits of image content and the different styling options offered by EdWeb 2.

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

Step-by-step guides to adding images

For more detailed information on how to add images in EdWeb 2, see our support guides: 

 

Adding images - EdWeb 2 Wiki [EASE login required]

 

Associated images - EdWeb 2 Wiki [EASE login required]

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.

16:9

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.

Students sit on the steps on Bristo Square. Some are talking to each other and others are relaxing alone. The image is displayed in landscape orientation in the 16:9 ratio style.

2:1

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.

A diagonal view of the front entrance of the Roslin Institute at the University of Edinburgh, made up of modern concrete and glass buildings. The image is displayed in landscape orientation with 2:1 ratio styling.

No crop full width

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

A panoramic view from the air across Edinburgh, with the King's Buildings in the foreground, looking towards Arthur's Seat and Salisbury Crags in the background. The image is displayed in landscape orientation, taking up the full width of the webpage no cropping to the original image..
A view from Princes Street looking across Waverley Bridge towards Edinburgh Old Town. The image is displayed in landscape orientation, taking up the full width of the page with no cropping of the original image.

Landscape 450x300

A group of students walk past the Murray Library on the King's Buildings campus on a sunny day. The image is displayed in landscape orientation with 450x300 pixel dimensions.

Landscape 750x500

Three young women sit on the grass in the sun in George Square Gardens. They are talking and laughing together. The image is displayed in landscape orientation, with 750x500 pixel dimensions.

Portrait 300x400

A view up the stairs in front of the historic New College building, with Edinburgh Fringe staff assisting visitors as they enter an events space. The image is displayed in portrait orientation with 300x400 pixel dimensions.

Portrait 575x500

A view of the 50 George Square building on central campus, looking across the lower courtyard of the neighbouring 40 George Square in the foreground. The image is displayed in portrait orientation with 575x700 pixel dimensions.

Portrait 675x900

A portrait of University alumna Gail Sant. She is standing in front of the School of Geosciences, smiling at the camera and with crossed arms. The image is displayed in portrait orientation with 675x900 pixel dimensions.

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

This article was published on