Go to the Students section
Go to the Staff section
Go to the Alumni section
Go to the Study here section
Go to the International section
Go to the About section
Go to the Research section
Go to the Business and Employers section
Go to the Support us section
Images must be optimised before they are used on Brookes’ website.
Optimising means reducing the image size without losing the apparent quality for site visitors. Images taken on a phone or digital camera can easily have files sizes 20 times larger than they need to be.
Using well optimised images will:
improve the speed of our website for site visitors
improve our search engine rankings
reduce roaming cost for mobile visitors by reducing their data usage
Follow these tips to ensure your images are optimised before you upload them to the site.
If you're not sure if an image is what you need, please contact the web team on email@example.com.
The Brookes photo library contains a wide selection of images that are high quality, in line with our visual identity and which we have permission to use. Browsing through ‘recently added’ images, or searching by year, are good ways to make sure photo content is an up to date reflection of our campuses and Oxford. Images can be downloaded for web use at the correct preset sizes.
The photo library also allows you to download images at the correct dimensions for different uses on the website.
If you need advice on choosing images please contact the web team on firstname.lastname@example.org.
Raw images frequently have resolutions of 300dpi - print quality. Images for the website should be screen quality - 72dpi.
In Photoshop and Gimp image editors the DPI and image size are in the Image menu option.
Raw images frequently have dimensions that mean they are 5000 pixels wide. This is more than twice the number of pixels on a good quality desktop screen. Mobile users often have about 320 pixels.
Images should be resized to the correct dimensions for their purpose before they are uploaded into the CMS. If they are too big their file sizes will be unnecessarily large and if they are too small their apparent quality will reduce as the browser stretches them to fit.
The pixel dimensions for different uses on the website can be found in the pattern library.
Choosing the correct file format for your image will both improve its quality and keep its file size down. Here are the most commonly used image formats and when to use them.
Retains colours but loses quality in order to decrease file size (uses a ‘lossy’ compression method).
Most software packages will let you modify the level of compression and preview the image / see its file size so you can find a suitable level.
A successor to JPEG and GIF. Uses better algorithms for compressing images (but JPEG is still the preferred format for photographs)
Reduces the number of colours to a maximum of 256.
Retains quality (uses a ‘lossless’ compression method).
The only widely supported format for animations.
Succeeded by PNG for all uses apart from animations.
A vector graphics format so does not lose quality as you increase its scale.
Not suitable for photographs - the image is stored as machine-readable text and can become very large for images with a lot of detail.
Can be used alongside CSS to create animations and apply other effects.
Images do not need to use maximum settings for quality. The difference between a very high quality image and one that is of reasonable quality will be very small or not noticeable at all to our site users.
If you are using Photoshop, we recommend choosing a quality of 60% or level 5 or 6, depending on the method you use to save your images. For more details, see our guide to using Photoshop to prepare images for the web.
Images with large file sizes are a major cause of slow page loading times for the Brookes website. This hurts our search engine rankings and user experience.
When you save your images, check their file sizes and adjust their quality / crop to aim to keep them within these limits:
Images used on general pages (800 x 450 pixels): Aim to be somewhere between 60Kb and 120Kb, ideally less than 75Kb
Banner images used on landing pages: Under 120Kb, ideally less than 90Kb.
Note: sizes for JPEGs will depend on the level of detail and amount of colour contrast in the photograph. It is often possible to reduce file size significantly by cropping your photos carefully to remove unnecessary elements from the frame, or slightly adjusting contrast or levels in Photoshop.
For more details about optimising images in Photoshop, see:
There are several free tools you can use to further optimise your images before uploading them to the website. Search engine land has written an article that reviews 5 of the most popular image compression tools.
Follow the guidance in tip number 8 on the ‘ Search Engine Optimisation top 10 tips’ document to make sure you embed your image in a way that follows good practice for search engine optimisation and accessibility.
Siteimprove has an inventory feature that lists images. These can be sorted by size and filtered by group:
To request access to Siteimprove please contact the web team on email@example.com.