Adding images in Drupal 10

Use this component if an image is needed to help users understand information in a different way.

Where to use this component

Anywhere on this page:

• basic page

Tips for using images correctly

• Do not add images to ‘liven the page up’ or ‘make it more engaging’ - only add an image if there is a real user need
• Do not use images of text – screen readers can’t access this information
• Add alt text if the image conveys important information. Find out how to write good alt text from GOV.UK.
• Mark images as decorative in Drupal if they’re for decoration only
• Reduce your image file size using tools like Squoosh before uploading. Aim for images under 50 KB. This speeds up page loading and improves user experience. It can also boost your search engine optimisation (SEO), helping your site rank higher
• Use screenshots sparingly as it’s better to provide text instructions instead. If you need to use them mark them as decorative
• Use real images, don’t use staged stock images, manipulated or AI-generated images
• Follow the University's brand guidelines for using photography. Our photographic style centres around people. It is candid and captures real moments.
• Use the University’s official photo libraries to find an image
• Make sure you have permission to use the image. Don’t use images from Google search results
• Images of charts and diagrams need to meet colour contrast ratios. Information must be explained in alt text or as part of the body copy. See data visualisation guidance from Harvard University

Good example

A good example of an image used to explain what facilities are like for architecture students:

drupal-10-architecture-student.webp

How to add this component to the page

1. Go to the page you want to edit, or the page you’ve created.
2. Select the ‘+ Add’ button.
3. Select the ‘Image’ component to add it to the page.
4. To add an existing image:
5. Select ‘Add media’
6. Scroll down to see a list of images in the media library. Select the image you want to add. It should display a tick if it has been selected.
7. Select ‘Insert selected’
8. To upload an image from your device:
9. Select Choose file
10. Find the image you want to upload and select it.
11. Add alternative text if the image conveys additional information. If it doesn’t mark it as ‘Decorative’ using the toggle.
12. Select Save.