Images

Images on the web need to be hi-resolution and crisp. But this comes at a price. Large images also come with large file sizes, which results in an increased page load time which might lose us visitors, and negatively impact our SEO.

It is therefore really important that images are:

• resized to meet the required dimensions
• compressed to help page download speeds

The majority of images should be below ~100 KB.

Styling

• Do not use odd filters
• Do not blend several images into 1 banner
• Do not use drop shadows or reflections for visual effect
• Do not round corners

Simple and flat design across the website is highly appreciated, we can add extra touches if required via central templates.

Resizing images for the web

Images should always be resized and optimised for the web (using Adobe PhotoShop where possible). If you need a license for PhotoShop please contact the IT Service Desk.

There are free alternatives to PhotoShop. If you are using Paint.NET, we recommend switching to Photopea. There is also the Gimp image editor that is open source and cross-platform (Win, Mac, Linux).

Photopea users, please see our video tutorials - resizing and cropping images for the web.

Alternatively, free, quick and easy to use online image editors are also available. Check out Pixlr Editor, PicResize or Web Resizer.

Please see the CMS user guide for general advice, recommendations and guidance on image dimensions.

Compressing images for the web

It is vital that you not only resize your images for the web, but that you also compress them.

The act of compressing an image will minimise the file size and will speed up page load times.

JEPGs should be saved as progressive JPEG wherever possible.

Photoshop has an option available via 'File -> Export -> Save for web'. Other applications may not have a 'save for web' option but in any case, you should always run additional compression through the services mentioned above. 

Saving an image at 40-50% image quality can result in little-to-no perceptible visual difference, but will be a much smaller file size.

Once you've exported your image, further reductions can be made by using tools such as the free, open-source application ImageOptim (Windows, Mac or Linux) or the free online services TinyPNG or compressimage.io (highly recommended).

Choosing the correct image filetype

As a general rule, photographic images should be saved as JPEGs. Images with sharp edges such as logos should be saved as PNGs. If you need advice, please contact the Strategic Comms and Brand Team.

Naming

All images must be uploaded to the CMS without spaces in the filename. Please replace any spaces with a hyphen. Example: 'Forest of light 960x640.jpg' should be 'forest-of-light-960x640.jpg'.

This is both a technical requirement and will also help with SEO.

Floating images

To float images left or right within a text block, right click on the image and ‘modify attributes’.

Next, add 'right' or 'left' to the class field.

Please do not add anything to the 'float' field.

Images within course page tabs

Images must be landscape with a width of 960px, preferably with 640px height. This is to cater for pages being viewed on tablets.

There should be no more than one image per tab in order to keep the tabs clean and reduce page download speed.

It is advisable to use the ‘k- Gallery’ content type if you require a number of images on a page.

Read our blog

For more information, read our project blog!