The use of images

All images on the Caerphilly County Borough Council website should be linked to the written content. One big image has more impact than one or more smaller images.

Copyright information

You are violating the law if you are using pictures without consent. When using images on the Caerphilly Council website you will need to make sure that you do not infringe copyright.

Every image belongs to an someone, company or organisation. If you or the Caerphilly Council are not the image owner, or you do not have approval from the owner to use the image, you cannot legally use the image on the website

If you are in unclear whether to use an image then you must always ask the owner for consent, if in doubt do 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 Caerphilly Council photographers.
  • Images uploaded to our Content Management System (CMS) Media Library (these have permission to use and have been optimised for web use)
  • Images purchased from stock image websites (such as Adobe, as long as you comply with the terms of the license agreement)
  • Images that you download from free image websites.

Images you cannot use

You cannot legally use images that you get hold of from the following sources unless you have consent 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.

Avoid using text within an image

When text meant to be read is displayed as an image, screen readers and other assistive technologies cannot read text within an image. They will instead read the alt text provided.

Best practice for accessibility is to write text as text. Users can often miss valuable information that’s shared through an image of text.

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 the right 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 unnecessary wording such as “Picture of” or "Image of” in your alt tags as the screen reader will handle that for you.

Useful tips of how to 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
  • 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.