Preparing images for use on the website and digital channels

  • 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.

    1. 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.

    2. Select good images

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

    3. Set the image resolution to 72 dpi (dots per inch)

    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.

    4. 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 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

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

    5. 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.

    6. 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

    7. Aim for the smallest reasonable file size

    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:

    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.

    8. Use relevant and descriptive alt text on images

    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.

    9. Use Siteimprove to monitor your site for large images

    Siteimprove has an inventory feature that lists images. These can be sorted by size and filtered by group:

    https://my2.siteimprove.com/QualityAssurance/8086/Inventory/MediaDetails/1/Size/desc?FileType=Image

    To request access to Siteimprove please contact the web team on  webdev@brookes.ac.uk.