A picture is worth a thousand words
Uploading images to the website
They say a picture is worth a thousand words. But when it comes to pictures on the web, they might also be worth a thousand kilobytes!
It goes without saying that images on the website 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
Images should always be resized and optimised for the web, using Adobe PhotoShop* where possible. In our opinion, this is the best software to use for image manipulation, and worth the investment.
The majority of images on the website should be below 100kb. Anything over this will have a noticeable load time on mobile. The absolute maximum we allow is 300kb, and only in exceptional circumstances.
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 ultimately speed up page load times. Faster page loads result in a better user experience, and also a better search engine score.
Photoshop and paint.net have an export option available via ‘File > Export > Save for Web’. When you ‘Save for Web’ you see the estimated final file size of the image. Saving at a 30% quality tends to get a good balance of image quality vs file size.
There are free alternatives to PhotoShop (but again in our opinion, not as good!). If you are on Windows you can use Paint.NET. There is also the Gimp image editor that is open source and cross platform (Win, Mac, Linux).
Watch our super helpful video guides on using Paint.NET to resize and crop images.
Alternatively, free, quick and easy to use online image editors are also available — although we do not recommend these over PhotoShop. Check out Pixlr Editor, PicResize or Web Resizer.
Choosing the correct image filetype
As a general rule, photographic images should be saved as JPGs. Images with sharp edges such as logos should be saved as PNGs. If you need advice, please contact the Comms Team.
Naming images for the web
All images must be uploaded to the CMS without spaces in the filename. If you use a space in a filename then it can have major consequences on the server, so please resist!
Please always use a hyphen instead of a space.
For example: ‘Forest of light 960x640.jpg’ would become ‘forest-of-light-960x640.jpg’.
This is both a technical requirement and will also help with SEO.
Final thoughts and further reading…
Please do not upload an image that is comprised entirely of text. Text should always be added as text, and images should always be picture-based with a maximum 20% text-to-space ratio if required.
Text alternatives for any non-text content (e.g. photos) should be provided so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.
For more advice, and to download a full set of correctly sized holding images (very useful!), please read our style guide, especially the pages about images and page banners.
*If you need a license for PhotoShop please contact the IT Service Desk to arrange a subscription.
Pro tip — Once you’ve resized your image and ‘Saved for Web’ from PhotoShop, further reductions can be made by using tools such as the free, open source application ImageOptim (Windows, Mac or Linux), or the free online service TinyPNG.
