The use of images

All images on the CCBC Website should be professional quality and should be related to the written content. A single large image has more impact than one or more smaller images.

Copyright Information

When using images on the CCBC website you will need to make sure that you do not infringe copyright. If you use images without permission, you are breaking the law.

Every image is owned by an individual/company/organisation. If you or the CBBC are not the image owner, or you do not have permission from the owner to use the image, you cannot legally use the image on your website

If you are in unclear whether to use an image then you must always ask the owner for permission, if in doubt to not use the image.

Images you can use

You will be able to use images from the following sources:

• Images taken by yourself.
• Images taken by official external CCBC photographers.
• Images uploaded to the Kentico Media Library (these have permission to use and have been optimised for web use)
• Images purchased from stock image websites (such as Shutterstock, as long as you comply with the terms of the license agreement)
• Images that you download from free image websites (such as Free Images)

Images you cannot use

You cannot legally use images that you get hold of from the following sources unless you have permission from the image owner:

• Images from other websites, such as blogs or company websites
• Images from search engines, such as Google Image search
• Images from image hosting websites such as flickr, which do not have the appropriate license.
• Images scanned or photographed from books or printed materials.

To use the images from the above you will need to gain permission from the image owner, the website owner, or the book publisher.

Optimising Images for the Web

Before uploading images to the CMS, they should be optimised for the Web.  This can be done in Adobe Photoshop or an online tool such as Pixlr Editor.

Optimising an image means to reduce its file size and pixel dimension to a suitable size for the web without losing quality.

This is essential as it will ensure that your pages will load quicker, which is particularly important for users on slower connections and on mobile data plans.

Image File Names

Images saved for the web will need to have a web-safe filename. They should be all lowercase, no special characters except hyphens and no spaces. (eg caerphilly-council-building.jpg).

This will ensure that the images will display correctly on all web browsers and devices. It will also help search engines locate the page which they are used on.

Image Formats

Graphics should be saved in either jpg, png or gif format. Here's a general rule of thumb when saving images for the web:

• JPG should be use for photographic type images.
• GIF or PNG8 should be used for logos or images with blocks of flat colour and no gradients.
• PNG24 should be used for graphics using effects such as drop shadows or glows, which also require transparency.

Image Accessibility

Alt tags provide text to describe images on your web page. When a user of screen reader technology encounters an image, the alt text is what they will hear so it is important to provide an alt tag for all images.

Make sure to convey any meaning in the alt tag that the picture would provide for a sighted user. Also avoid redundant wording such as “Picture of” or "Image of” in your alt tags as the screen reader will handle that for you.

Write Good Alt Text

• Add alt text all non-decorative images.
• Keep it short and descriptive, like a tweet.
• Don’t include “image of” or “photo of”.
• Leave alt text blank if the image is purely decorative
• It's not necessary to add text in the Title field.

Complex Image Types

Icons: alt text for icons should be the equivalent to the information intended by the icon, such as “Download PDF” or “Visit our Facebook Page”

Images as Links: If the image is being used to link to another page, the alt text should describe what will happen when the image is clicked (rather than what it looks like). For example, the alt text for an image of a question marks that links to a help page should be “Contact Support” rather than “question mark.”

Images with complex information: If the image is a chart, diagram, or illustration, consider how to convey the information contained in the image using both the alt-text and the adjacent page text.

Why should you never use an image instead of text?

When text that is intended to be read is presented as an image, screen readers and other assistive technologies cannot read text that’s contained inside an image. They will instead read the alt text provided.

Best practice for accessibility is to write text as text. Users can often miss out on important information that’s conveyed through an image of text.