Image Editing
Introduction
This guidance is for service users and outlines the requirements for preparing images for use on Web CMS websites. It includes step-by-step instructions for preparing and uploading files to the Media Library, followed by a brief overview of how to edit images using Pixlr, a free, web-based tool for resizing and optimising images.
How to Prepare and Add Files to the Media Library
The process is straightforward: source assets responsibly, ensure they meet accessibility standards, are optimised for the web, and are named correctly before uploading to the Media Library.
Sourcing Assets
As part of your content planning, you may need assets such as images and documents to accompany your website copy. If using third-party assets, you must have permission before uploading them to the Media Library. This helps avoid copyright infringement.
Accessibility Requirements
All documents uploaded for use on your website must be accessible. Guidance on creating accessible documents, including using the Microsoft Office accessibility checker, is available in the Document Accessibility section of our Accessible Content Guidance.
Optimising Files for the Web
Before uploading, optimise images and documents to improve page load times and download speeds. You can use the following free tools:
- Pixlr and Photopea - Web-based editors for resizing and optimising images.
- Adobe Compress PDF - This tool can be used to compress newly created and existing PDFs. There are other great document conversion tools available there which may also help.
File Naming Convention
Once your assets are accessible, optimised, and saved locally, apply the correct file naming convention before uploading to the Web CMS. This includes files stored on your computer or SharePoint.
Full filenames is enabled for all files uploaded to the Media Library and File Stores.
Documents and images are the most commonly used assets in website content, and it's essential that final versions are correctly named before being added to the Web CMS.
Follow the naming convention below:
- Use only lowercase letters (a to z), numerals (0-9) and hyphens (-).
- Do not use spaces. Instead, use hyphens to separate words.
- Do not use special characters (e.g., £, %, &, á) or underscores.
Correct Examples
- annual-report-and-accounts-2023-24.pdf
- undergraduate-prospectus.pdf
- application-form.docx
Incorrect Examples
- Annual Report & Accounts 2023-24.pdf
- UG_prospectus.pdf
- Application Form.docx
Please Note: The Web Support Team reserves the right to change (or request changes to) filenames if they do not meet digital best practice.
How to resize and optimise images using Pixlr X
Follow these Steps
- Open Pixlr X
- Click Create New
- Enter the required content type image dimensions in Width and Height fields, eg, Width=800, Height=533
- Click Create
- Click the Add Element/Image icon
- Click Add Media (locate the image file on your own computer)
- Click the Zoom Out icon until until you see the drag handles around the image
- Click and drag each drag handle to shrink the image to the required appearance. Depending on the dimensions, you will lose some of the image itself, so you need to make your own decision on what you want to keep.
- Click Save. When you click Save, you will see the Image Optimisation options. These are asking you if you want to save the image as High, Medium or Low quality.
- Click JPG
- Click Med to optimise the image to 70%. You can also use the Quality sliding bar to define a precise percentage. Typically 60-70% is an effective range to optimise to.
- Click Save As and save the image to the required folder on your computer, making sure you are following the correct naming convention for your file.
The image has now been resized to the correct dimensions, optimised for use on your web page and uses the correct naming convention.
You next step is to upload the image to the Media Library and insert it into the required content type.