images

previous | index | next

Two image formats are generally used to put on a web site, both with their advantages and disadvantages. The choice of the image format depends on the content. It is useful to give a bit of general information on web graphics before going into the HTML of including images in a web page.

It is said that an image says more than a thousand words. This is true, and it also explains why an image takes a thousand times longer to load. Use them well, and use them sparingly. Realize that there is no real additional load in using the same image over and over again, since a browser will store it in memory the first time, and retrieve it when required.

dithering

Hardware limitations may bring a browser to apply dithering to represent images containing colors that are not in the palette. This means that dots of close colors from the palette are mixed to give the appearance of the desired color, but results may be poor. Netscape can optionally use a range of 216 colors which will not be dithered. These colors can be constructed by taking values for red, green and blue of 00, 33, 66, 99, CC or FF. The image below shows these colors.

00	33	66	99	CC	FF
Non-dithering colors




For each of the 6x6 blocks the red value is given above, the green value increases from bottom to top, and the blue value from left to right. So the sixth value from the left, in the top row is #00FFFF.

The effects of dithering on an image depend on the color resolution of the computer system. A 256 color graphics driver will dither almost any image, while 65,536 color drivers will rarely have to resort to dithering, and do a good job if it has to.

GIF

GIF is a graphics format that is best suited for 'synthetic' images, like drawings and icons. It can at most contain 256 colors, and the type of internal compression works best on an image that contains regions of the same color. In addition, the latest standard (GIF89a) allows for one color from the palette to be 'transparent'. Limiting the number of colors benefits the compression rate. When designing or editing GIFs, it is best to select non-dithering colors. GIF files typically have the extension ".gif".

JPEG

The JPEG format is more or less the opposite of GIF, in that it can handle an infinite amount of colors (where infinity is defined as 16 million), and is at its best when containing material like photographs, all this with a good compression ratio. The downside is that the compression technique is 'lossy', which means that a certain amount of information is lost in the compression. The most prominent expression of this is the presence of 'fuzz' around objects that are supposed to be crisp. In addition to this, JPEG images are almost always dithered. The trick with JPEG is to find the optimal ratio between quality and file size. JPEG files normally have extension ".jpg" or ".jpeg" (which may become ".jpe" in the case of a filename challenged operating system).

tags

The <IMG> tag is used to insert an image in a web page. It can take a number of attributes, which will affect the appearance of the image. An image is placed inline, which means that you can include text at either side. There is no closing tag.

The <IMG> tag will be handled correctly when placed inside a link tag.

SRC="URL"

URL of image, normally speaking a file local to the page. The <IMG> tag is meaningless without this attribute.

LOWSRC="URL"

URL of low resolution (read: small file size) image, which is loaded before the actual image is loaded. This can be used to give a preview of an image that is very large, and takes long to load, so that the load proces may be aborted by the client. This attribute is not in the HTML 3.2 specification.

ALIGN=LEFT|RIGHT|TOP|MIDDLE|BOTTOM

alignment of the image with respect to the surrounding text. Note that LEFT and RIGHT result in the image not being placed inline.

ALT="alternative text"

alternative text to be displayed when the image is not loaded. This text may also show up as a tool tip when the mouse pointer is over the image.

Always include the ALT attribute when the image is contained in a link to another page.

WIDTH=pixels

the desired width of the image in pixels. If only the width is specified, the image height will be scaled proportionally.

HEIGHT=pixels

the desired height of the image. If only the height is specified, the image width will be scaled proportionally.

BORDER=pixels

The thickness of the border around the image. The color of the border depends on whether or not the image is linked to another page.

HSPACE=pixels

horizontal space in pixels left and right of the image.

VSPACE=pixels

vertical space in pixels above and below the image.

It may be that your audience has turned off automatic image display. The way to minimize the consequences for the display of of your page is the following.

Specify the height and width of the image, so that the browser always knows how much room to reserve.

This will at least take care of all alignment matters.

Vaguely related to the image tag is the <HR> tag, which inserts a horizontal rule, and is very useful in visually dividing your page in blocks. It can be customized by using the ALIGN attribute (LEFT, CENTER or RIGHT), the WIDTH attribute (in pixels or percentage), the SIZE attribute (thickness in pixels), and the NOSHADE, which takes no value, and results in a flat line, rather than the default 3D appearance.

example

The image above, containing all non-dithering colors, is placed inside a table using the statement:

<IMG SRC="course/colors.gif" ALT="Non-dithering colors"
  WIDTH=608 HEIGHT=102>

which results in a borderless image which is displayed at the specified size.

previous | index | next

---

I will not guarantee that any of these pages will exist indefinately, so please only bookmark the top page.