BGA Web Site style guide—Photographs

Photographs can be used to liven up pages where what they add to the page outweighs the extra download time. (Currently, there are probably too few images on the site, and it would be better if it were more lively.)

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 add identifiable photographs of of people under the age of 18 to this site. That was decided by Council when I asked them for a policy on this.

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

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.

Photographs which are a mug-shot of someone should be added to the picture gallery, 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.

Photographs that are intimately related to a particular part of the site, should go there. For example ‘/clublist/uk9.gif’ on the clubs’ map page, and the pictures on The British Go Championship 2002.

Alt 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="...">

(Note that another thing that you can do is to 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.)





Last updated Sun Jul 08 2007. If you have any comments, please email the webmaster.