Images

For information about banner images view the banners webpage.

Image formatting

You can upload JPG, PNG, SVG and WEBP files to the website. Only use SVG files for images that contain diagrams or charts.

All standard images must be 800 pixels wide by 450 pixels high at 72 dpi (dots per inch). SVG files can be any size and do not need resizing.

Avoid adding white borders to images that do not resize to the above sizes. Add a light grey background or transparent overlay.

Avoid adding borders to images.

Image file names

Give your images a meaningful file name before uploading. This helps users find images to reuse. Do not use special characters or spaces in the file name. Use underscores or hyphens instead.

Image with caption

All standard images should be cropped to 800 by 450 pixels.

Note: This is available as a widget when editing pages.

Preview
Code

Group of undergraduates dressed in caps and gowns — Students on graduation day

<figure class="image">
  <img src="/getmedia/036d3d80-1bee-4be0-85c2-50d043b9de4a/Graduate-in-ceremony-800x450.jpg" alt="Group of undergraduates dressed in caps and gowns" />
  <figcaption class="is-size-7 p-10 has-background-grey-lighter has-text-black">Students on graduation day</figcaption>
</figure>

Sponsor/funder logos

Preview
Code

<div class="columns is-multiline">
	<div class="column is-one-quarter-desktop is-half-tablet">
		<div>
			<div class="cms-content has-text-centered">
				<a href="#">
					<img class="m-right-10 m-bottom-10" alt="Oxford School of Nursing and Midwifery" src="/getmedia/be5a289f-efc6-40ed-a529-65d4b984f594/OSNM-logo.jpg">
				</a>
			</div>
		</div>
	</div>
	<div class="column is-one-quarter-desktop is-half-tablet">
		<div>
			<div class="cms-content has-text-centered"> 
				<a href="#">
					<img class="m-right-10 m-bottom-10" alt="University of Birmingham" src="/getmedia/035fc2cd-5835-4657-847c-45501957f6d4/University-of-Birmingham-logo.jpg">
				</a>
			</div>
		</div>
	</div>
	<div class="column is-one-quarter-desktop is-half-tablet">
		<div>
			<div class="cms-content has-text-centered">
				<a href="#">
					<img class="m-right-10 m-bottom-10" alt="Cardiff University" src="/getmedia/97055ee3-e3ad-4549-ac27-06fa911260e6/Cardiff-University.png">
				</a>
			</div>
		</div>
	</div>
	<div class="column is-one-quarter-desktop is-half-tablet">
		<div>
			<div class="cms-content has-text-centered">
				<a href="#">
					<img class="m-right-10 m-bottom-10" alt="Ulster University" src="/getmedia/dec8d434-052d-477d-980d-a264fa39d221/Ulster-University.png">
				</a> 
			</div>
		</div>
	</div>
</div>