Adding Images

Photographs can be used to liven up pages where what they add to the page outweighs the extra download time.

People

Photographs in which individuals are identifiable should only be added to the site after the people pictured have been asked whether this is OK.

We will not normally add identifiable photographs of people under the age of 18 to this site.

File size

Pictures inline in a page should be quite small thumbnails, a reasonable limit would be 10kB for images that are mainly decorative, but often you will be able to get them under 5kB. For pictures that convey significant information, more is fine. They say a picture is worth a thousand words. A thousand words of text in HTML format will average about 7kB!

If it is necessary to show a large image, consider putting a small thumbnail inline, which links to the large image. The British Go Association Picture Gallery is a good example of this.

File format

Photographs, and similar images, should be in JPEG format, with a ‘.jpg’ file extension.

Diagrams, with large areas of solid colour and sharp outlines, should be in PNG format, with a ‘.png’ extension. However, if you can't avoid it, use GIF format.

File names and places

The name of the file should be the surname followed by the first initial (that he/she's known by) and the extension in lower case, e.g. hitchensb.jpg. Thumbnails are probably not needed anymore: Where you have both a high-resolution image, and a corresponding thumbnail image, then the thumbnail image should have the same name as the full-sized image, with ‘-t’ added at the end of the name and before the file extension. For example ‘th.jpg’ and ‘th-t.jpg’ in the picture gallery.

In general pictures of people should be added to the directory /files/people and then referenced from there, as in done of the People involved in running the BGA page. To get a picture added to the gallery, ask the webmaster.

Pictures that go only with a particular page can be added to that page as a file attachment in which case they will be loaded into the /files directory. Only to be used in exceptional circumstances now.

If there are a lot of pictures with the same theme, for instance photos of a particular tournament, then a gallery can be created and the photos added to that with appropriate captions. For instance, see a WMSG gallery.

Alternatively photographs that were intimately related to a particular part of the site can be put in a relevant subdirectory within /files using FTP. For example /files/people on the BGA People page.

alt and title text

If you look at the specification for adding images to HTML, you will see that all images should have some ‘alt text’. This is text that can be displayed if the image is not used. This might happen for several reasons: the person reading the page may be blind or partially sighted; they may be using a browser that cannot display images; or the may have chosen not to display them. Therefore, the alt text should be an alternative to the image. It should convey the same information. A good rule of thumb is this: imagine that you are dictating the web page to someone else over the telephone. What mention, if any, would you make of the image. That would probably be suitable alt text. For mainly decorative images, you might not think them worth mentioning. In that case, you should specify
alt="". You should also specify the size of the image in the HTML, so the template HTML for an image is:
<img src="..." width="..." height="..." alt="..."> You should also specify some text that is displayed as a tool-tip when the user mouses-over the image. The correct way to do this is to specify a
title="[some more information about the image]"
attribute on the image. Some people abuse the alt="" attribute for this purpose. This is a serious sin. Do not copy it. It does not work in all web browsers anyway.

Image positioning

Unless you take special precautions all images will be displayed inline with the text, i.e. left aligned as if it were a separate paragraph. The most common alternative for positioning is to make it appear to the right of some text. To do so use the following CSS reference that we've set up for you as part of the <img reference:
class="floatright" Another alternative is to use a table if you have a series of images that need to be displayed vertically in a separate column. See Pictures for an example of this.