Images
Images help tell our story. They allow us to show who our students are, our facilities and to help prospective students to get a feel for our campuses before they see it for themselves.
Images bring to life the words we use. They embody our 'show don't tell' philosophy giving students insight into what our campuses, students and staff look like. This will encourage them to feel a part of our community before arriving.
Getting imagery right on the web is vital for accessibility, search engine optimisation and signposting. The guidance on this page provides an overview of best practice when using images on our website. However, if you're stuck, we advise speaking to the Digital Team for expert advice on image selection and optimisation.
Selecting the right image
Good imagery helps tell and illustrate the textual content on your webpage. It should break up text in a meaningful way, but not distract the reader.
✅ It should | ⛔️ It should not |
---|---|
Be used as a storytelling device to illustrate and signpost textual content | Be used to fill a space with no relation to the textual content |
Engage audiences showcasing key features of courses, facilities and student-life | Distract the reader from the story the webpage is trying to tell |
Provide insight into our community showing the diversity in our student population |
If you're having trouble selecting the right image for your requirements, get in touch with a member of the Digital Team who will be able to offer advice and suggestions based on your needs and content.
Sourcing images
It is important to ensure you have the correct permission to use the images you upload onto the website to help us comply with copyright law, and that they align to our photographic styles. We therefore have limitations on where we can source images from:
✅ Source images from | ⛔️ Do not source images from |
---|---|
University of Hertfordshire Asset Library | Search engines |
Commissioned photography from an approved photographer | Stock image libraries, unless in agreement with Marketing and Communications |
High-quality personal photography |
Asset Library
We recommend using the University's own stock of photography within our Asset Library. For full guidance, check out our Asset Library guidance.
Commissioning photography
Where an activity or facility is new, has been updated, or current imagery is not appropriate, we can commission new photography from one of our approved photography suppliers. Full guidance can be found in our Photography guidance.
Third party images
Use of third party images is not generally advisable, due to concerns around copyright, permissions and alignment to our photographic styles. Check out our third party image guidance for more information.
Personal photography
Where commissioning photography is not feasible, self-taken images may be used. Any imagery taken from a personal device must be of a suitable quality and in line with photography guidance. All participants must have signed a model release form so their image can be used in University of Hertfordshire collateral. Evidence of this will be requested. Marketing and Communications reserve the right not to publish content that does not meet the required quality threshold.
Image size and optimisation
Images are important part of our website, however, if not optimised correctly they can cause problems such as slow load times and poor accessibility for users whom are visually impaired.
Effective image optimisation includes:
✅ Correct image dimensions |
✅ Less than 1MB file size |
✅ Descriptive ALT tag included when uploaded |
✅ Descriptive title name when uploaded |
Accessibility
We have a responsibility to ensure our content is accessible to all. Guidance on how to use ALT tags and descriptive titles can be found on our Accessibility page.
Compressing file sizes
Before uploading to the website, all images must be compressed to a suitable file size. We recommend less than 1MB to ensure quick load times across desktop and mobile devices. The maximum file size accepted by our CMS is 10MB, however we recommend using image optimisation tools to reduce their file size. Failure to compress the file size of you image will result in your changes being rejected and not being pushed live. For expert advice on optimisation tools available for you to use, get in touch with the Digital Team.
Image sizes
Images on our website follow a set template to ensure consistency and effective optimisation across devices.
Homepage images
Container | Image size (W x H) |
---|---|
Hero image | 1920 x 700 pixels |
Mobile hero image | 425 x 800 pixels |
Featured pod | 590 x 442 pixels |
Image slider | 936 x 526 pixels |
Events image | 720 x 450 pixels |
Standard pages
Container | Image size (W x H) |
---|---|
Hero image | 1730 x 347 pixels |
Mobile hero image | 425 x 275 pixels |
Thumbnail image | 512 x 288 pixels |
Landing pod | 512 x 288 pixels |
Lightbox image pod | 512 x 288 pixels |
Featured pod | 680 x 382 pixels |
Full width highlight | 1440 x 432 pixels |
Image slider (60 width) | 1040 x 625 pixels |
Image slider (80 width) | 1440 x 720 pixels |
Image block | 1040 x 632 pixels |
Image drop down | 232 x 160 pixels |
Logo carousel | Width of 200 pixels is advisable |
News pages
Container | Image size (W x H) |
---|---|
Hero image | 1074 x 500 pixels |
Mobile hero image | 425 x 275 pixels |
Thumbnail image | 1074 x 500 pixels |
Event pages
Container | Image size (W x H) |
---|---|
Hero image | 1730 x 347 pixels |
Mobile hero image | 425 x 275 pixels |
Thumbnail image | 1730 x 347 pixels |
Related Guidance
Get in touch
If you have any questions please contact a member of the team:
Contact | |
---|---|
Web and Digital team, Marketing and Communications | websupport@herts.ac.uk |
Jak Kimsey, Head of Digital and Creative Experience (he/him) | j.kimsey1@herts.ac.uk |
Marketing and Communications Business Support | marketinguh@herts.ac.uk |