• Computer Pictures
• Printers
• Bitmaps
• What about colour?
• Vector
• Which is best?
• Which Editor?
• Formats
• Graphics on the web
• Effect on speed

Computer Pictures

Computer pictures are made up of dots. The number of dots per inch (dpi) is known as "resolution". In general terms, the more dots per inch, the clearer the picture. But it also means the smaller the picture. A picture file large enough to print clearly at a reasonable size on high resoultion printer is also said to be high resolution. All the graphics supplied by Christian Computer Art are high resolution without being small.

Printers

Printers have resolutions of 240 dpi (dot matrix); 300 dpi, 600 dpi (laser printers); 360 dpi, 720 dpi, 1440 dpi (ink jet). These are the common resolutions there are others. Computer screens show at much lower resolution, often between 70 and 90 dpi. They also use light to show colour (a mixture of Red Green and Blue - known as RGB), compared to ink or toner in printers. Printers usually operate on a mixture of the colours Cyan, Magenta, Yellow and Keyline Black - known as CMYK). So colours and resolution being handled differently, screens do not not necessarily give an exact representation of what will be printed.

Bitmaps

If you think about a picture, it is essentially a rectangular grid. Each square in that grid is a dot in the picture. Even a small picture that prints out one-third of an inch square on a 300 dpi laser printer (100x100) will have 10,000 squares, or "cells". These "Picture Cells" are referred to as pixels.

Let us assume for the moment that the picture is simple 2-colour (black and white). We already know that computers work in binary digits ("bits") and each bit can have only one of two states, often referred to as "0" and "1". The computer allocates one bit to each pixel and uses the 0 and 1 to represent black and white. Referring to each cell in this way is known as a "bitmap". A bitmap file contains all this information plus some other computer code which says what sort of picture it is, how big it is and so on. There are several bitmap formats. Most compress the bitmap data as well, so there is no direct mathematical correlation between file size and picture dimensions, especially when comparing different formats. Nevertheless, a bigger file usually means a bigger picture!

So what about colour?

To put colour to a picture, the computer simply increases the number of bits per pixel. There are four permutations of 1 and 0 with two bits, so you can use four colours. Three bits gives you eight colours and 24 bits allow approximately 16.7 million colours. This is a flexible system, because you can choose which colours you use. For example, a depth of 3 bits gives you eight colours. The computer will recognise these as colours 0 - 7 (computers prefer to start counting from 0 rather than 1). Your graphics software will allow you allocate whatever colour you want to each of the eight colour positions. The colours themselves are identified by numbers. The most common method is the combination of the three primary colours of light: red, green and blue (RGB). Each of the elements usually has 256 stages of strength (numbered 0 through to 255, or often in hexadecimal from 00 to FF). It's just a matter of mixing the amount of each of the primary colours to get colour you need. For example, maximum red plus maximum green and zero blue will produce yellow. Zero all values for black and maximise all values for white.

The RGB system is best for colours on screen. For printing, a system known as CMYK is used. This stands for Cyan, Magenta, Yellow and Keyline Black. These are the colours used on a four-colour printing press and if you are sending files to a printer, he will usually want separations; that is four pictures: each containing one of the four colours.

Common bitmap file formats are: BMP, PCX, PICT, TIFF, JPEG, RLE, IFF-ILBM, IMG, DIB, PNG, GIF.

The other method of storing graphics is called "vector". Rather than store a bit-by-bit representation of the graphic as with bitmap formats, vector formats store instructions to the computer on how to draw the picture. When the picture is resized, the computer simply follows the drawing instructions again making best use of pixels to ensure a well-defined graphic every time. To get good definition on bitmaps the file must be reasonably large. The same picture could often be stored in a smaller file in a vector format. Vector does not handle the very small pictures, such as icons, very well. These are better done as bitmaps.

There are fewer vector formats. Look for EPS, CDR, WMF, CGM

Both systems have their merits and demerits. Both systems have their afficionados and their opponents.

Generally speaking, graphics created in vector format look "flatter" and often have more regular shapes than bitmap pictures. With the right software it is possible to convert between the two systems. The Christian Clip Art CD contains vector pictures created from bitmaps, so they do not look as flat as those created as vectors.

The problem with bitmap files is that they do not lend themselves to increasing in size. Curves and lines that are not horizontal or vertical suffer from a pronounced jagged edge, because the dot pattern is magnified.

Pictures with a lot of data do not lend themselves to vectoring. Colouring of vector images is very basic. Vector cannot support full-colour pictures. So photographs and other continuous tone images are usually bitmap.

If you want graphic editors, usually bitmap editors have the words "Paint" or "Photo" in the name, whereas "Draw" is often in the name of vector editors.

I like to use Paint Shop Pro for bitmaps and Corel Draw for vector.

If you want to place a graphic on the world wide web, you must first make sure that it is in one of the formats supported. Web graphics are all bitmap formats. (Note; Shockwave/Flash is a vector format which requires extra browser plug-ins to work).

There are many shareware conversion utilities available. In addition, many paint programs will load and save in different formats thereby giving a conversion facility.

The most common format for the web is GIF. There are two types of GIF file: 87 and 89. Both can be either interlaced or non-interlaced. Both types take about the same amount of time to appear. A non-interlaced GIF will gradually appear on the screen. An interlaced GIF will appear much quicker, but will be blurred. As more of the picture downloads, the clearer it becomes.

GIF 89 can also be transparent. That is, you can nominate one of the colours to be "see-through". When a picture is placed on the web the background of the page will show through where the transparent colour is. Transparency is mostly used on the background colour where you want the graphic to appear to as a cut-out, rather than a rectangle. Look at the two Good News Bible Logos* on the left, which have been placed on a red background. The first file has no transparency. The second has the white background marked as transparent.

A common use for GIFs is animation. Just like a TV cartoon, an animated GIF is composed of a series of still pictures that "play" one after the other. Animating a GIF will put movement onto a web page, but will also increase the size of the file.

The next most common format is JPEG (JPG). Generally speaking, JPEGs are used for photographs and GIFs for other pictures. Most programs that save in JPEG format offer a choice of compressions ratios. Whilst JPEGs can compress very well, it is sometimes at the expense of clarity of the picture. In many cases a small loss of clarity is imperceptible. The advice is: experiment to get the best trade-off between file size and picture clarity.

As full-colour photographs, JPEGs are often 24-bit (16.7 million colours) and therefore larger files, where compression is more important. GIF formats, however, are restricted to 8-bit (256 colours). To reduce a photograph to 256 colours can sometimes lead to tones that are not smooth.

The third format is a new one that has been slow taking off. It is the PNG (Portable Network Graphics) format. Very few web images are in this format.

Web browsers are designed in such a way that when they encounter a file in one of these formats, they will display it on the screen. If you mean for the picture file to be downloaded without being shown, compress it as a zip file (or stuffit, or LHA etc. according to the destination computer) first.

Please note that technology is moving fast and it is possible that there will be exceptions to the above when you read this!

An image can either be "Background"" or "Inline". A background image is tiled and is like a wallpaper. The orange mottled colour behind the items on this page is a background image. It is placed using the BACKGROUND option within the BODY tag. See an HTML reference for more details.

An inline picture is one that appears on the page along with the text and is placed with the IMG tag. Because the amount of control you have over text in HTML is limited, you may decide to present your text as a graphic.The question mark on the right is an inline image. It is a stylised letter prepared in graphics program and saved as a graphic. You don't know what fonts people lookong at your web page will have on their computers. If you want some text displayed exactly as you see it, then you must save it as a graphic. It will take longer to load, but it will be exactly the right shape.

Images can be clickable to take the reader to another site. Just nest the IMG tags within 'A' tags. Images can be placed to allow text to flow around one side of them or they can be placed on their own. This subject is beyond the scope of this article and you should refer to an HTML reference document for more details.

Anyone who has been involved in graphic design knows the value of using graphics well on the printed page. To a certain extent, this holds true on web pages, also. However the one dimension the webmaster has to pay attention to is the size of the graphic file. The bigger the file, the longer it takes to download. The longer your reader has to wait, the less attractive your site becomes. Take these steps to ensure your graphics are fast loaders:

• Reduce your image palette to as few colours as it will take without spoiling the picture (you can get programs that will do this for you)
• Reduce the dimensions of the image
• Make GIFs interlaced (at least there's something to watch during the wait)
• Compress JPEGs as much as you dare - more compression means less quality
• Make your animations simple
• Try to repeat some images, e.g. bullets, rather then use different pictures. (They do not have to be downloaded for each instance).
• Use a facility such as GIF Wizard to reduce your file sizes
• Place images as low down the page as possible, so the reader can be reading text while the pictures are loading.