KCL • CCH • Minor programme • AV1000

AV1000
Fundamentals of the digital humanities
Images and image-manipulation

1. Introduction
   1. Digitisation
   2. Why imaging?
   3. References
2. Images on the Web
   1. File formats
   2. Location: in-line or separate
3. HTML command for displaying an in-line image
   1. Basic tag
   2. Attributes
   3. Alternative technique for positioning images
4. Capturing & preparing images
   1. Sources of images
   2. Image manipulation
   3. Practical design considerations
5. An exercise
   1. Capture
   2. Getting familiar with PaintShop Pro
   3. Modifying the image

I. Introduction

The following is intended to help you understand in greater detail what is involved in the preparation and use of digital images on the World Wide Web, with some brief notes on how images are digitised.

A. Digitisation

Images and sounds come in two forms, either as analogue or as digital data.

• Analogue data consist of a continuously varying signal, such as is found in nature, in certain artificial processes such as photography and sound recording and in devices used to handle such signals, such as amplifiers, speakers and the like. One characteristic of analogue signals is that they lose fidelity when carried from one medium to another; thus if you take a photograph of a photograph, the image will always and necessarily be less sharp, and similarly with a sound recording.
• Digital data consist of discrete symbols from a finite set, for example the two discrete states of a binary computer, its 1's and 0's. (Another example is the alphabet, in our case 26 discreet symbols; thus the astonishing survival of textual data through the millenia.) Because there are only these symbols and no intermediate states, unlike analogue data, a digital signal cannot be distorted. The individual bits can be lost in transmission, but there are techniques to compensate completely for this loss. In consequence a digital image or sound recording can be replicated any number of times with no loss of fidelity whatsoever.

Since data from nature and from other common sources are analogue, they must be digitised. Digitisation consists of a very fine sampling or chopping up of the analogue signal into chunks and assigning to each chunk a discrete symbol or number. The sampling is so fine that when we view a digital image or listen to a digital recording we do not detect the individual bits but see or hear a continuous signal.

Consider, for example, the following digital image (on the left) and a gross enlargement of a portion of the same image (on the right). What you see on the right are the individual squares out of which the apparently smooth image is constructed (shown is most of the left eye and some of the eyebrow). Thus the image actually consists of very small squares, each with a single shade of gray, but when these are viewed normally, we see a continuous image.

Since the image of the baby is digital, it can be manipulated with software. The aim of this unit in the course is to give you some experience with such manipulation.

B. Why imaging?

With the advent of digital imaging and especially the ease with which colour images may be published on the Web, imaging has become radically accessible and practical for individuals to use in their work. Highly visual disciplines like archaeology, architecture, art history and palaeography, are obvious beneficiaries, not merely because the basic data of these disciplines can be made widely available at very low cost—copyright permitting—but also because imaging techniques allow for sophisticated forms of analysis not widely available before. Other disciplines are perhaps more surprisingly affected, e.g. literary and historical studies, where the visual aspects of traditional materials can now be considered as data for study because they can so easily be seen. For relevant literature on imaging, see the course Bibliography.

II. Images on the Web

A. File formats

Images on Web pages are typically in either .gif (“Graphics Interchange Format”) or .jpg (.jpeg) (“Joint Photographic Experts Group”) format; a few others also work. The following explanations are derived from “A Legend to Popular Image File Formats” [X].

GIF is used frequently on the Web. It is limited to a 256-colour pallette. The pallette is adjustable; it can include only the colours needed in the given image, or it can be a standard system pallette, in which case any colour in the image but not defined by the system is produced by a technique called “dithering”. GIF files may not be usable by some applications, although all image-manipulation programs recognize it.

JPEG is good for saving continuous tone images because it retains all the color information present. JPEG uses a compression scheme which will reduce file size by not saving information that is not vital to the image integrity. (It is therefore called a “lossy” format because information is lost in the compression.) You can tell most programs which save JPEG files (such as Photoshop) whether file size or image quality is more important.

Because both formats make compromises that affect image-quality, when working with a high-definition image it is best to retain the original format. If considerable manipulation is involved, then save the manipulated file in TIFF (“Tag Image file Format”, saved as .tif), because it has no limits on size or resolution and is not lossy. TIFF files tend, however, to be very large.

In this exercise we will use only .gifs.

B. Location: in-line or separate

An image may be displayed “in-line”, i.e. on a WWW page, possibly alongside text (as below), or as a separate item shown by the Web browser on its own. The choice is a matter of the relation you wish to have between the image and the contents of the page you are designing. In-line images will be dealt with here.

III. HTML command for displaying an in-line image

A. Basic tag

In its simplest form, the command for displaying an in-line image is:
<img src="filename.ext" />
Thus if the file is called “market.gif”, the command will be
<img src="market.gif" />, which produces the following result:

B. Attributes

The image-tag takes a number of attributes. The three we consider here concern placement of the image on the page (align), substitution of text in case the image cannot be displayed (alt) and display or concealment of a border when the image is designated as a hypertextual link (border).

1. align. Without the align attribute, the image is placed against the current left-hand margin or indent (as above), and any subsequent text begins immediately to the right at its base-line. When align is present, the image “floats” into the next available space with subsequent text flowing around it. The two most common values for the align attribute are given with their effects as follows:

   1. align=right, e.g.

      <img src="market.gif" align="right" />, which yields

      (Here text that immediately follows the image-tag will fill up the space to the left of the right-justified image and then continue on below it until the beginning of a new paragraph.)
      

   2. align=left, e.g.

      <img src="market.gif" align="left" />, which yields

      (Here text that immediately follows the image-tag will fill up the space to the right of the right-justified image and then continue on below it until the beginning of a new paragraph.)
      

      With floating images, space to the right, left, or both may be cleared, so that subsequent text is forced to begin after the image, by using the <br /> tag with the clear attribute, thus:

      Tag	Effect
      <br clear="right" />	breaks the line, moves the text down until there is a clear right margin
      <br clear="left" />	breaks the line, moves the text down until there is a clear left margin
      <br clear="all" />	breaks the line, moves the text down until both margins are clear

      The <br> tag with the clear attribute is in fact used in each of the two examples above to clear the space following the text in parentheses.

      For an alternative way of aligning images and text, see below.

2. alt. For browsers that cannot display images or for those with the display option turned off (sometimes necessary for people at a distance, always for those who are blind), this option provides text to explain what the image represents. Such an explanation is an act of courtesy in all cases and a necessity for your reader if the graphic image is used as a navigational “button” (as below).

   For example, we might describe the current picture as the “Image of a small shop”. This would be written in the tag,

   <img src="market.gif" alt="Image of a small shop" />

   It is a good idea always to provide such information.

3. border. When the image serves as a hypertext link, a border will be put around it. This option controls the size of that border; currently the only accepted values are -1 (the default) and 0 (none). For example, if we wanted to link our small image of the shop to a larger version of the same, we would write a statement of the form,

   <a href="bigmarket.gif"><img src="market.gif" /></a>, which produces the following (try it):

   

   showing you the default border (which has been made red for the sake of visibility). To turn the border off, and thus hide the fact that the link is there, we modify the statement to read,

   <a href="bigmarket.gif"><img src="market.gif" border="0" /></a>

   

C. Alternative technique for positioning images

Often a preferable way to position images in relation to text, and always to position them with respect to other images, is to use the HTML table element. To make use of this technique, simply put the image-tag inside a <td> … </td> element. Note the following example:

<table border="border"> <tr> <td><img src="towerbridge.gif" /></td> <td>Tower Bridge, looking across from the north side of the river near the Tower. </td> </tr> <tr> <td>A door and window in Brick Lane. </td> <td><img src="door.gif" /> </td> </tr> <tr> <td><img src="rosetta.gif" /></td> <td>The Rosetta Stone, in the British Museum; until recently it was surprisingly accessible to the touch.</td> </tr> <tr> <td>A street scene outside the main gate of the British Museum.</td> <td><img src="bm.gif" /></td> </tr> </table>

Tower Bridge, looking across from the north side of the river near the Tower. A door and window in Brick Lane. The Rosetta Stone, in the British Museum; until recently it was surprisingly accessible to the touch. A street scene outside the main gate of the British Museum.

IV. Capturing and preparing images.

A. Sources of images

There are three main ways to acquire images in digital form for display online:

1. Capture from an existing online source. All images displayed online can be taken directly from the page and stored on the computer you are using. (Remember this when you put your own images online.) On a Mac, drag the image to the desktop; on a PC running Windows, right-click the mouse when the pointer is on the image, then choose the “Save Image As…” option. Try this on any of the images above.
2. Scan from a photograph, slide or other printed source. Because scanning is an analogue process, the quality of the image will be degraded somewhat by scanning, but for your purposes the change may be insignificant. (Scanning facilities for photographs and slides are available at King's by special arrangement.)
3. Photograph what you wish to have as an image. This is best done with a digital camera, which produces an image-file directly. If you do not have access to such a camera, however, you may use an ordinary 35mm camera, then ask the photo-processing shop to put the results on a CD. (This is actually quite an inexpensive option.)

B. Image manipulation

Whichever method you use, the image-file is likely to require some kind of processing, e.g. to rotate or flip it (the image may come out backwards or on its side), change its size, crop it to eliminate unwanted parts, adjust the brightness and contrast, etc. Hence an essential piece of equipment when working with images is an image-manipulation program. Freeware, shareware and commercial programs are listed in the course Bibliography. Note that all such programs make heavy demands on hardware (large amount of memory, hard-disk space, 17-inch or larger screen with good video).

C. Practical design considerations

Since image files tend to be large in comparison to text files, you have reason to use them sparingly, or as sparingly as the purpose and design of your page will allow, and to keep them as small as is practical. A page with too many images, or images that are very large, may not be viewable elsewhere in the world because network transmission speeds are too slow. In addition, be aware that in general you have no control over the browser and equipment used to view your page. Colours may not be as you wish when the page is viewed, and the screen may be of a different size, affecting the placement of items.

V. An exercise

Assuming that you begin with an existing Web page and are working on a PC, this exercise shows you how to capture, manipulate, and insert an image onto the page.

A. Capture

For purposes of the exercise, select a new image from our departmental repository, “Scenes of London”, or via the Creative Commons Images page. (NB: when you have found the image you want, right-clicked the mouse and selected the Save Image As… option, the filename should be something of the form “Img0024.gif”. If it does not end in “.gif” or “.jpg” or another image-file extension, then you have selected the HTML page on which the image appears, not the image itself.)

B. Getting familiar with PaintShop Pro

Before doing anything in particular, spend a little time familiarising yourself with the software by performing some trial modifications of the selected image. Although it may seem perfect as it comes, experience suggests that very few images are exactly right for the purpose without some alteration.

1. Copy your chosen image-file under another name, say “test.gif”. (This is a cautionary step. As long as you do not save a modified image file, it will not be permanently changed, but you may forget not to save it, or you may wish to because you have stumbled on an interesting effect and wish to preserve it.)
2. Run Paintshop Pro.
3. Open test.gif.
4. First look at the menus specific to image manipulation. (Note that until you open a file, the options described below will not appear.)

   View menu. Note especially the options in the bottom section, which allow you to overlay a grid onto the image, put rulers along the side and select or deselect toolbars. For this exercise, you need not make any changes here.

   Image menu. These change the orientation of the image (flip, mirror, rotate), add a border, resize the area on which the image is displayed (the canvas) or the image itself, or transform the image by applying a number of “filters”. Again experimentation will show you what these do.

   Colours. The Adjust submenu you will find is particularly useful, as images often need to be adjusted in the ways shown, especially for Brightness/Contrast. Whatever image you have selected, make sure to try adjusting brightness and contrast, then save it under a new name. The effects to be applied are previewed in the small window within the Brightness/Contrast dialogue box.

5. Now inspect the vertically orientated Tool Palette along the left-hand side of the screen.

   This contains icons for the most commonly used tools, some of which are for selecting all or part of the image, the others for drawing or painting on it. When you click on one of these, thus selecting it, the corresponding set of “Tool Controls” appears in the Control dialogue box. Experimentation will teach you relatively quickly what these various tools do and the effects of the options associated with them.

   NB. If you want to undo the last change you've made, use the Undo function under the Edit menu. The image you have captured is not permanently affected by a change until you save it; as you modify an image it is thus a good idea to save it in stages, perhaps giving each stage a slightly different filename.

6. Familiarise yourself with the tools on the Tool Palette, shown here to the right, by working through the Help Topics dialogue box: click on the Help button on the horizontal toolbar (the last button to the right), then place the tip of the arrow on the tool you wish to investigate and click. Concentrate particularly on the following tools:
   1. Zoom: allows you to work with fine detail in the image or to see the whole of an image that otherwise would not fit on screen.
   2. Crop: select a rectangular portion of an image then discard everything else.
   3. Mover: grab an image and move it around.
   4. Select: define a rectangular area within an image to which subsequent operations will be applied.
   5. Freehand selection: similar to Select but allows freehand definition, as the name suggests.
   6. Dropper: choose an existing colour on an image and make that the foreground colour.
   7. Paint brushes: paint freehand on top of the image using the foreground colour (for which see below) and the size and shape of brush currently selected. If the size of the brush is set to 1, then the tool will act like a pen or pencil.
   8. Eraser: erase portions on the top layer of the current image; note that erasure will expose whatever is the currently selected background colour (for which see below).
   9. Airbrush: spray-paint in the current foreground colour.
   10. Flood fill: fill the defined area with the current foreground colour.
   11. Text: enter and place text within an image.
   12. Line: anchor a line at a position and extend it elsewhere within the image.
   13. Shapes: draw one of four geometrical shapes (rectangle, square, ellipse, circle).
7. The tools under the Image menu. Try out Flip, Mirror and Rotate, using Help Topics as needed. Concentrate your attention, however, on the following:
   1. Add borders. Allows you to put a coloured border around an image. Very useful for giving an image definition. The values to be filled in are given in pixels. Usually a border of thickness 2 or 3 is sufficient.
   2. Resize. In effect this enlarges or reduces the image, either preserving the “aspect ratio” (relation between height and width) or not, as you choose. Standard screen-related sizes or custom are possible. Some deterioration of the image quality may be expected when an image is enlarged.
8. The tools under the Colors menu. Understanding what several of these do requires rather more knowledge of colour-theory and how colours are represented in digital form than we have time for. The most commonly useful tools here are under the Adjust item, and in particular Brightness/contrast, as images are frequently either too dark or to light. Note that the thumbnail representation of the image changes as you adjust the percentage values.

Modifying your Web image

The objective here is for you to improve the image you selected for your page by applying a few of the tools listed above.

1. Dismiss test.gif and open your image file.
2. Use the Crop tool to select a portion of the original image—in order to improve it by eliminating parts you judge to be extraneous. Remember: you can crop experimentally, then use the Undo function to return to the whole. When you are satisfied, save the cropped image under a new name.
3. Alternatively, or in addition, a defective image may be retouched. Use the magnifier to look at portions of it. If you spot imperfections, try to repair them with the Paint brushes tool (with the proper size of brush selected), using the Dropper to get the right colour. Be careful here, and mind that you Undo any changes that you do not like.
4. Adjust the brightness and contrast for optimum appearance. The preview will let you see the result of your changes.
5. Place a border around it, choosing a colour most complementary to the image. Black often works best.
6. Replace your online image with the revised one using FTP.

revised October 2007