Preparing images for use on the website and digital channels

Images must be optimised before they are used on the Oxford Brookes University 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 the tips on this page to ensure your images are optimised before you upload them to the site.

Consider if you need to use an image at all

Stop and think if an image is actually the best way to achieve your goal. For in-page styling and effects there may be other approaches using CSS and JavaScript. Google’s Image Optimization documentation states:

The very first question you should ask yourself is whether an image is, in fact, required to achieve the effect you are after. Good design is simple and will also always yield the best performance. If you can eliminate an image resource, which often requires a large number of bytes relative to HTML, CSS, JavaScript and other assets on the page, then that is always the best optimization strategy. That said, a well-placed image can also communicate more information than a thousand words, so it is up to you to find that balance.

If you're not sure if an image is what you need, please contact the web team on webdev@brookes.ac.uk.

Select good images

The Oxford 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 webdev@brookes.ac.uk.

Resize images to the appropriate dimensions

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. If they are too small their apparent quality will reduce as the browser stretches them to fit.

In Photoshop and Gimp image editors the DPI and image size are in the Image menu option.

Choose the correct file format - gif, jpg, png or svg?

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.

Format	Best for	Notes
JPG	Photographs	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.
PNG	Graphics, icons, line drawings, photographs	A successor to JPEG and GIF. Uses better algorithms for compressing images (but JPEG is still the preferred format for photographs)
GIF	Graphics, icons, line drawings, animations	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.
SVG	Icons, line drawings, graphs and charts	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.

Choose an appropriate quality when saving your image

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.

Aim for the smallest reasonable file size

Images with large file sizes are a major cause of slow page loading times on our 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, please read this guide to optimising images for the web in Photoshop.

Image compression tools

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.