How to use images/photos on your webpage
Images play a crucial role in web design, not only making your pages visually appealing but also by improving user engagement and accessibility. This guide will help you navigate the essential aspects of using images effectively on your web pages.
Last updated: Wednesday, 19 February 2025
On this page you can find information and advice on:
Step 1: Where to find images
Before diving into the specifics of adding and editing images, it’s essential to know where to find high-quality visuals that are both effective and compliant with copyright regulations.
- Before searching for new images, it's important to check if the image you need is already uploaded to the website. This can save time and ensure consistency across your pages. Duplicate images can clutter your library and make it harder to find the right one. If you find duplicates, consider archiving (but not deleting) the extras to keep your library organised.
- The Digital Asset Library (DAL) is a valuable bank of images specifically curated by Brunel for university use. Here, you can find a wide range of visuals that reflect our brand, identity and values.
- If you can’t find a suitable image, you can search for stock photos on our Envato portal. No login or download is needed; just email us at marketing-channels@brunel.ac.uk and let us know the URL of your chosen images. We will send you the high-resolution, unedited version of the images. Please note that these images will be in multiple megabytes (MB) and you will need to edit them for the correct ratio and downsize them to kilobytes (KB) to ensure faster download speeds and better website performance. We recommend using stock images as a last resort solution. Original images are preferred because they are unique to your content and help maintain a consistent and authentic visual identity.
- If you choose to upload your own images, please ensure they are high resolution and clear for effective editing. By uploading, you confirm you have the necessary copyright permissions or usage rights. It’s crucial to verify the source of your images, as using them without rights can lead to penalty fees.
- We strongly advise against using images from search engines like Google Images or free stock libraries, including those with Creative Commons licenses, due to potential restrictions and legal risks. Creative Commons licenses often come with specific terms and conditions that must be followed. Misunderstanding or overlooking these terms can lead to copyright infringement, resulting in penalty fees.
For guidance on copyright, check the Library pages or contact copyright@brunel.ac.uk for more information.
↑ Top of the page
Step 2: How to choose the right image
Here are some simple steps to keep in mind when creating and uploading images to your webpages:
- Use clear images: Choose images that are easy to see and understand. Avoid overly complex or noisy images that might confuse users. Noisy images, which contain a lot of visual clutter or unnecessary details, can negatively impact web performance and distract users from the main content. By using clear and simple images, you can improve the user experience, page load times, and ensure your content is easily understood.
- Avoid text on/in images: We do not use images with text, except for specific cases such as logos or when the text is part of the background, like a building name on a wall, a pull-up banner at an event, or the brand name on lab equipment. In these instances, the text is naturally part of the image and does not need to be added separately.
- From an SEO perspective, search engines cannot read text embedded in images, which means any valuable keywords or phrases included in these images will not contribute to your search engine rankings. This can reduce your page's visibility in search results.
- Text within images can be difficult to read, especially on smaller screens or devices with lower resolutions. This can frustrate users and lead to a poor overall experience.
- In terms of accessibility, text in images is not readable by screen readers, which are used by visually impaired users to navigate the web. This means that important information may be inaccessible to these users, violating web accessibility guidelines.
- Where it's possible to add text on top of images that is built into the Contensis content management system, such as messages in page banners, do so. This ensures that the text remains accessible and readable.
- Image resolution and quality: If your image is not from the Digital Asset Library (DAL), choose a high-resolution and clear image that you can edit. High-quality images look more professional and are more engaging for users. However, it's important to optimise these images for web use to avoid slow page load times (more about how to do this later).
- Consistent style: Use images that align with the overall visual style of the website and our brand. Consistency in image style helps create a cohesive and professional look. This includes using similar colour schemes, lighting, and composition across all images. A consistent visual style enhances the user experience and reinforces our brand identity.
↑ Top of the page
Step 3: Editing and optimising images
Ensuring your images are edited and optimised effectively is essential for creating visually appealing and fast-loading webpages. In this section, we’ll explore how resizing, cropping and compressing optimises your images for the web. Please follow this step-by-step guide when uploading images.
Image size
Selecting the best images for your website goes beyond simply finding ones that look appealing. It’s also important to consider how these images will fit into your overall design, particularly in terms of size and orientation.
For the Old Contensis (Classic), sizes are determined by the various components. You can find a complete list of these components and their sizes under the 'layout components' drop down menu on the bottom right of the Advanced Resources webpage.
The New Contensis (Entries) provides the correct sizes for each image section when you start creating your webpage. For example, below you can see the recommended sizes for a thumbnail and a banner:
Cropping your image
When you download an image from DAL, you can select the size that best fits your component. This ensures the image is optimised for your specific needs without additional editing.
If you use images from other sources, you may need to resize or crop them to fit your component's dimensions. To do this, visit the Image Resizer and follow the instructions to crop your image to the required size.
Compressing your image
Images must be efficiently compressed using TinyJPEG or similar tools, which reduces file size without compromising quality.
This compression is vital, as large files can slow down page loading times, leading to a frustrating experience for users. By minimising image sizes, you enhance loading speed and improve overall site performance, ensuring a smoother user experience.
Naming your image file
Properly naming your images is crucial for organisation, easy identification, and accessibility. When you use generic names like "DAL 1234", "event photo 2" or "James 02" in Contensis, it becomes difficult to remember what the image is about. Instead, use descriptive names that clearly indicate the content of the image, for example, "teaching in computers science lab" This way, you can quickly understand the subject of the image without having to open it.
Descriptive names also help with search engine optimisation, making your images more discoverable online. It also improves accessibility. Screen readers, which assist visually impaired users, rely on meaningful file names to convey the content of images.
Additionally, using descriptive names makes it easier to find and reuse images that have already been uploaded.
Write your alt-text
Alt-text, or alternative text, is a brief description of an image that is added in the backend of our content management system. It serves as a textual alternative for images, allowing screen readers to convey the content of the image to users with accessibility needs. If an image fails to load, the alt-text provides context, helping users understand what they’re missing. Search engines, like Google, use alt-text to index images, which can improve our website’s visibility in search results.
Please make sure you write your alt text before starting to upload your image.
You can use online tools like the AI Alt Text Generator to create alt-text quickly. Just drop in your image, and it will generate a description for you. However, please remember to double-check the generated text to ensure it meets our guidelines and accurately describes the image.
How to write an effective alt-text:
- Be descriptive: Clearly describe the image content and its purpose. For example, instead of 'dog,' use 'golden retriever playing fetch in a park.'
- Keep it concise: Aim for a brief description, ideally under 125 characters, to ensure it’s easily read by users.
- Avoid redundancy: Don’t start with 'image of' or 'picture of.' Instead, jump straight into the description.
- Context matters: Tailor your alt-text to the context in which the image is used. Phrase your descriptions so that people unfamiliar with Brunel can easily grasp the meaning. For example, if the image shows an accommodation block, explain that it’s a place where students live on campus, rather than just adding the name of the block in the description.
Examples of good and bad alt-text:
Alt-text visual
Bad Alt-text: An image showing a student in a classroom
Good Alt-text: A student in a blue lab coat is working at a laboratory table with equipment and a computer in a bright, modern lab environment
Alt-text visual
Bad Alt-text: a person standing in a classroom
Good Alt-text: A lecturer gestures while presenting to a classroom of students, with a whiteboard displaying lesson notes in the background
Alt-text visual
Bad Alt-text: a view of the Eastern Gateway building
Good Alt-text: Modern university building with large glass windows, featuring a curved entrance and people walking on a sunny day
↑ Top of the page
Step 4: Adding images to your webpage
Incorporating images into your webpage is a straightforward process that improves visual appeal and engages your audience. Here’s how to do it effectively.
Before you start uploading your image, please make sure you check out the Where to find images, How to choose the right image and Editing and optimising images sections of this page.
Where to save your image in Contensis
In the Old Contensis (Classic), we recommend organising your images into folders based on image size. This helps maintain order and makes it easier to locate specific images when needed. If you encounter any difficulties creating folders, please reach out to marketing-channels@brunel.ac.uk for assistance.
In the New Contensis (Entries), your image is automatically saved to the relevant folder when you upload it through your page. This ensures that your images are well-organised and easy to find.
Uploading images in the Old Contensis (Classic)
To add an image to a webpage you need to upload it to a specially setup image folder (contact marketing-channels@brunel.ac.uk if you need assistance to create the folder). Click on the ‘images’ folder, then click on ‘new content’. You will see the images icon in the workspace below.
You are then presented with two options, either to ‘drag and drop’ from the desktop or ‘select files’. A wide variety of image content types can be used. You may also upload in bulk.
Below is an example of dragging and dropping the images into the ‘drag and drop’ area.
The next step, click on the edit edit button, add your pre-written alt text to the relevant section, then click on done editing.
Once they all have the green tick, you then have three options at the bottom ‘Save’ (1), ‘Save and Submit’ (2) and ‘Save and Approve’ (3). ‘Save and Approve’ (3) should only be available if you have approval rights to the folder otherwise you will be submitting them for approval.
Inserting an uploaded image to a component in the Old Contensis (Classic)
After uploading an image into a folder, you are then able to insert it into a webpage.
To insert an component on your webpage, right click on where you want the component on your webpage, click on 'insert webcontrol,' click on 'custom,' and select your component, like image box or splitbox.
Once your component is in place, then right-click and select 'webcontrol properties.' You’ll then see a pop-up, if you click on the Box image section, click the folder icon, you can select the image you had saved in the projects folder earlier. Hit save and the image will appear in the component.
After inserting your image, preview your changes to see how the image looks on the page. If everything appears as desired, save your changes.
Inserting an uploaded image to a generic or landing page text in the Old Contensis (Classic)
After uploading an image into a folder, you are then able to insert it into a webpage.
Drag and drop from navigator: Open your page to edit in the Editor. Locate the image to be inserted in the left toolbar. Click on the image icon and whilst keeping the mouse button depressed, drag and drop the image to the required location.
Aligning image on old Contensis: to align an image first left click and right click the image (1), (2) click 'image properties.' (3) Type 'right' or 'left' in the CSS Class and then click 'save'(4). You will see an immediate change of position.
After inserting your image, preview your changes to see how the image looks on the page. If everything appears as desired, save your changes.
Adding a banner image to your page in the Old Contensis (Classic)
Please follow our video guide to add a banner to your page:
How to add a banner image
Uploading and inserting images on the New Contensis (Entries)
Using the new Contensis to upload and add images is a much more straightforward process. You no longer need to upload images to a specific folder. Instead, you can easily upload and insert your image directly onto the webpage you’re editing.
When you have a banner box or thumbnail box, you’ll see two options: uploading or selecting an image. If you choose to upload, you can pick any image from your device. The box will show you the exact size of the image, so make sure to resize it to the right dimensions before you upload.
If you want to use an image that’s already there, just click on 'select an image'. A pop-up will appear with some options. At the top, there’s a disclaimer letting you know that the gallery shows images similar in size to the banner. This happens automatically, but if you’re looking for something specific, you can use the search box in the top right corner to search by filename, tag, or folder path. Once you’ve found your image, just click on insert, and it will be added to your page. The next step is adding your pre-written alt text to the page in the relevant section below the image.
↑ Top of the page
We're here to help
If you have any questions or need further guidance, we’re here to support you every step of the way! You can explore Silktide for helpful informational videos that cover various topics related to alt-text best practices and image accessibility.
If you prefer direct assistance, please don’t hesitate to reach out to us via our team inbox: marketing-channels@brunel.ac.uk. We’re always happy to help with any queries you may have.
For personalised support, you can also book a one-to-one session with a member of our team using this link: Book a Session.