This is a guide to using images on your website. This will tell you about the different file formats available to you, naming conventions and the different tools you can use to edit or create images.
1. Types of image file
2. Size of images
3. Naming conventions
4. Optimisation and editing
5. Picture galleries
6. Sourcing images
7 Tools
1. Types of image file
There are 3 types of image file types:
JPEG
JPEG (or .jpg) images have become the standard image of the Internet. JPEG format mean that images are able to be compressed considerably, which results in quality images with small file sizes. For most situations if you are making your own images – JPEGs will be your best bet. They provide the best quality and the smallest file size.
Used for – detailed images or photographs
GIF
GIFs (.gif) are lower quality images than JPEGs and are used for more simple images such as icons and decorative images and simple images on a webpage (that are just a few colours). GIFs also support animation. For image optimization, it’s great to use GIFs for the plain imagery, but for complex images and photos, GIFs are not as effective.
Never use GIFs for large product images. The file size will be very large and there is no good way to reduce it.
Used for – simple images such as graphics and buttons
PNG
PNG images are an alternative to GIFs, they support many more colours than GIFs, and they don’t degrade over time with re-saves like JPEGs. Even though the PNG file type is starting to be used more, the file sizes can still be much larger than what you would find with JPEG images. If you are only able to get Brand Band/ Brand Hub image in PNG format, try using PNG-8 over PNG-24.
Used for – alternative to both JPEGs and GIFS.
2. Sizing:
Please use the image size reference guide when you add images to your site to make sure your image is the correct size. If your image is too big it may cause problems with page loading, especially on mobile, and if it is too small it may appear distorted or stretched.
In the upgrade CMS there is a built-in picture editor to enable you to edit your images directly when you have uploaded them – see our Uploading images and documents guidance. Optimisation and editing below also explains how you can use others tools to edit images to the correct size.
3. Naming conventions
It is important to name images and their associated Alt text appropriately. This is important for both accessibility and Search Engine Optimisation.
(Alt text is alternative text for an image for users who may have sight impairments.)
Two women clients of Age UK Todmorden enjoying a coffee morning
Image file names:
The name of your images should be representative of what it is of. So the above image is a jpeg of a Coffee Morning in Todmorden, so the file name shouldn’t be CMTod.jpg, but coffee-morning-todmorden.jpg or todmorden-coffee-morning.jpg.
However if there are views of the same event you might want to name them accordingly, for example, Todmorden-coffee-two-ladies.jpg, not todmorden-1.jpg, todmorden-2.jpg, etc.
Your image file names affect web accessibility and SEO – see below for more information.
If you are using the image in different places and in different sizes, you may want to put the image sizes in the name to help you differentiate between them when you are uploading e.g. 408×306-todmorden-coffee-morning.jpg.
Alt Text:
Be sure to add alt texts. This is very important for accessibility and can have an impact on Search Engine Optimisation. The alt text is added to an image on the webpage so that there will be descriptive text if the image for whatever reason can’t be displayed on the site. With alt text you can be more descriptive than the file name. For example:
| Image file name | Alt text |
|---|---|
| coffee-morning-todmorden-women.jpg | Two women clients of Age UK Todmorden enjoying a coffee morning |
| coffee-morning-todmorden-cake.jpg | A cake from the Age UK Todmorden coffee morning |
| Coffee-morning-todmorden-men.jpg | Three male clients of Age UK Todmorden at the coffee morning |
For more information about web accessibility see our guide to web accessibility.
SEO:
The above will help with your SEO (Search Engine Optimisation), as Google will use image names and the Alt text to help people searching for specific content.
Try to make sure the alt text includes some of your SEO keywords, however the primary use is to describe the image.
For more information about SEO see our guide on SEO.
4. Optimisation and editing
If you need to create or edit an image, you can use industry standard paid for tools, such as Photoshop. Most PCs have the free image software Paint, which can be used for creating or for editing images. Microsoft Office also has image editing software included.
In the upgrade CMS you can change the image sizes as you up load them. You can find out how to do this in the image instructions and the image upload video.
5. Picture Galleries
You can add a picture gallery to your content by embedding HTML code from photo sites such as Flickr. To do this, add a text block to your page and paste in the HTML code from a site like Flickr into the HTML box.
6. Sourcing images
Brand Hub
All cleared for use images can be found on Brand Hub. If you don’t have a log in, please contact brand hub.
The Centre for Ageing Better
The Centre for Ageing Better is a charitable foundation, funded by The National Lottery Community Fund.
They launched an Age-positive image library launched to tackle negative stereotypes of later life
Other free stock image resources
You can also use your own images if you have the agreement of the rights holder to use them.
7. Tools
There are also free online tools and resources which you can use to edit images, some require you to register:
PicMonkey – www.picmonkey.com/
Pixlr – https://pixlr.com/
It is user-friendly, and also comes with a 100% free app for your smartphone, so you can edit on the go.
FotoFlexer- fotoflexer.com/
Another fairly advance online image editor. FotoFlexer even allows you to work with layers!