other publications

cubaDemandsThumb

CUBA DEMANDS
This pamphlet reviews...
[read more]

signsThumb

SIGNS
This site is about...
[read more]

globalMediaThumb

URBAN WALLPAPER
This site is about...
[read more]

Images for the Web

Writing for the Web: a good demonstration by Catherine Fisher, GDNet / Eldis.

HTML Workshop #2

In the lab today, we will continue with basic webpage construction. By the end of today's lab, you should be able to construct a webpage with headings, tables, images, and external links, and be able to upload your webpage files to a server using either web folders or FTP.

Inserting Images
RGB Colour
Browser-Safe Colours
Image Formats
GIF vs JPEG
Transparent GIFs
Animated GIFs
Calibration and Gamma
Bit-Depth
Distortion

Basic Considerations

Much of the information in this section on the basics of using images on webpages is summarized from Lynda Weinman and Bruce Heavin's excellent book on the subject: Coloring Web Graphics. For an extensive list of links related to web design and colour, see Lynda Weinman's links. Creating colour artwork for the web differs from print-based media because you are publishing to people's screens. Screen colour is composed of pixels (picture elements) of projected light instead of ink on paper. As a result, publishing artwork on the web, including page layout and colour, has a number of unique features:

Almost Heaven (Frieberg, 1998, M. Soules)

Average computer screens display 72 pixels per inch for a MAC and 96 ppi for PCs. Thus, any image which is prepared at a higher resolution than 72 or 96 ppi will be enlarged when displayed on a monitor, and the intended effect of achieving a higher quality (i.e. higher resolution) image will be defeated by the display. Web page designers should work at a "screen resolution" of 72 or 96 ppi.

To test the colour combinations of a page use the Palette Colours Test Page: choose the hexidecimal code for the colour you want to view and click Submit. You'll be able to see how coloured fonts display on a variety of coloured backgrounds.

Inserting Images

Images are inserted on webpages with the command <IMG SRC>. A typical line of code will look something like this:

<IMG SRC="sonic.jpg" alt="sonic.jpg" width=450 height=198 align=right hspace=10 vspace=10>

The image file "sonic.jpg" is in the same folder as the .htm file which refers to it, since there is no additional directory information. This file is in the JPEG format. (The other image format commonly used on the WWW is GIF---pronounced as in "jiffy").

ALT specifies the words which will appear before the image loads onto the page, or if a viewer has chosen the option not to view images.

The WIDTH and HEIGHT commands specify the size of the image in pixels. When these dimensions are specified, the browser will load the text first, leaving a space for the image to appear later---highly recommended! Otherwise, the page will remain blank until the image is fully downloaded. Most general-purpose image utility programs will give you the exact size of an image in pixels. Or right click on the image to see its Properties.

If you specify WIDTH and/or HEIGHT values in an IMG tag that differ from the actual dimensions, the browsers will resize the image on the fly.

The image can be positioned on the page with the ALIGN command, which handles such variations as right, left, top, bottom, middle.

HSPACE specifies a distance in pixels between image and adjacent text on the horizontal plane; VSPACE controls this distance vertically.

Tables can be used to help with the placement of images on the page.

Images can be used as links. The general pattern looks like this:

<a href="URL"><IMG SRC="image.gif" border=0></a>

In this example, border=0 eliminates the coloured border around the image that signifies the image is being used as a link. You can increase the prominence of this border by increasing the number.

Background textures are specified in the <BODY> command:

<BODY BACKGROUND="image.gif" ALINK="#FF0000" BGCOLOR="#FFFFFF" LINK="#CC3300" TEXT="#000000" VLINK="#990000">

If you specify both a backgound colour and a background texture, the colour will display first, and the background texture will be tiled over it.

RGB Colour

Another feature of publishing on the Web is the use of RGB (red-green-blue) colour instead of CMYK (cyan-magenta-yellow-black), traditionally used for colour offset printing to paper. With RGB, pixel colours are created from an optical mixture of red, green and blue light to create an "additive" colour matrix. Most printing is based on the combination of Cyan, Magenta, Yellow and Black (CMYK) to create a "subtractive" colour matrix . Subtractive means that mixing multiple colours creates black. RGB colour is additive, meaning that mixing multiple colours creates white. Web designers use RGB colours almost exclusively.


RGB

CMYK

Hexadecimal numbers are used to convert RGB values so HTML can understand which colours have been chosen. The hexadecimal code for the colour R:255 G:00 B:51 is FF0033. For an online facility which will convert RGB values to hexadecimal code, see Color Page Builder .

Browser-Safe Colours

The popular browsers--Netscape and Internet Explorer--share the same palette management process to work with the system palettes of Mac and Windows. Any image will be forced into a variety of different palettes, depending on which operating system it is viewed with. There are 212 common colours found in the 256-system palettes. Each operating system reserves 40 colours of the possible 256 for its own use--if you design images with the 212 common colours, they will be universally displayed between browsers, operating systems, and computer platforms. No matter what colours you choose from the 16.7+ million available, most browsers and monitors will convert those colours to the 216-system palette anyway.

Browser-safe hexadecimal combinations are always formed from variations of 00, 33, 66, 99, CC, and FF. The 216-colour palette for the Web has only 6 red values, 6 green values, and 6 blue values that range in contrast to create a 6x6x6 "cube":

colour cube

Image File Formats: Overview

JPEG

The JPEG (Joint Photographic Experts Group) standard is an excellent standard for most realistic images (photos for example, but not line drawings or logos). It is a powerful, though "lossy", compression method. JPEG is best suited for true color original images; avoid using it on images that have already been forced into a 256-color palette. Using JPEG for a photographic image, for example, can produce 10:1 savings compared to GIF, as well as permitting much better display quality on truecolor-capable displays. Unlike the GIF format, JPEG does not support transparent backgrounds.

JPEG is a 24-bit format developed specifically for photographic-style images. It looks to areas with subtle tonal and colour changes and offers the best compression when it encounters that type of imagery. JPEG does not compress solid colour well. JPEG is a lossy compression algorithm because it removes information from the image, sometimes resulting in a loss of quality. It also introduces "artifacts" in some instances, especially when it encounters solid colours.

Unlike GIF files, JPEGs require both compression and decompression. The JPEG might take longer to download than a GIF the same size because of the added time required to decompress.

JPEGs can be saved at a variety of compression levels, usually specified as maximum, high, medium and low. At times, low quality compression is quite adequate for web delivery, and the file size reduction can be considerable.

Portable Network Graphics: PNG

A newer lossless format which improves on GIF and (many uses of TIFF) for single images, the specification for PNG is now a W3C recommendation. PNG permits truecolor images, variable transparency, platform-independent display, and a fast 2D interlacing scheme.

GIF

Graphics Interchange Format is a commercial format which is widely used on the web: almost all browsers can handle GIF graphics. It allows 1 bit transparency (a pixel is either transparent or opaque) and a maximum palette of 256 colors, so representation of 24 bit color images in GIF involves loss.

TIFF

TIFF, "Tagged Interchange File Format" (not, as widely believed, Thousands of Incompatible File Formats) suffers from its extensibility: it is not easy to know what application will accept what TIFF file. TIFF is widely used in the publishing industry for its high quality results but is not found much on the Web; the main application has been for external links to lossless 24-bit RGB TIFFs, but PNG will soon take over that role.

GIFs vs. JPEGs

There are two main image file formats supported by the Web at this time: GIFs and JPEGs. Both formats have been widely adopted because they compress image files dramatically.

Photographs are the one type of artwork which do not benefit from using browser-safe colours: the browser dithers the image regardless of how the image is prepared. It is best to leave the photo in an adaptive palette or 24-bit file format so that it will have the added advantage of looking better in 24-bit browser environments. JPEGs will always produce the smallest file size for photographs and have the added advantage of being a 24-bit file format, unlike GIF, which cannot save images at higher bit-depths than 8-bit (256 colours).

GIF Compression was originally designed for Compuserve in the late 1980s for the online delivery of graphics. The GIF file format compresses graphics beautifully: it is accepted by all browsers, the files are small, and they are capable of animation, transparency, and interlacing. As noted above, the GIF format, by definition, can only contain 256 colours or less. This is not the case with JPEGs, which by definition contain millions of colours (24 bit).

There are two types of GIF: GIF87a and GIF89a. GIF87a supports transparency and interlacing, while GIF89a supports transparency, interlacing, and animation. GIF compression is lossless: the GIF compression algorithm will not cause any unwanted image degradation, though the effect of converting from 24-bit to 8-bit colour depth may cause image degradation of another sort.

The GIF compression algorithm looks at patterns of data. Whenever it encounters areas in an image that do not have changes, it can implement much higher compression. Similar to many types of run-length compression, GIF compression searches for changes along a horizontal axis, and whenever it finds a new colour, it adds to the file size. This means that artwork :

  • with horizontal changes compresses better than artwork that doesn't;
  • anything with noise will add dramatically to the file size;
  • large areas of colour compress well;
  • and complicated line work and dithering does not.

GIFs handle compression of solid colour better than the varied colours found in photographs. With all GIFs, the fewer the colours, the smaller the file size. Thus, when an image is anti-aliased--i.e. the ragged pixelated edge is given a smoother look by adding intermediary pixels to blend the edge--the size of the file is increased because anti-aliasing adds the intermediary colour. An aliased image might use only 4 colours, while an anti-aliased image might have up to 18 colours. Web designers should thus consider the performance advantages of using aliased artwork.

JPEG is more suited for photographic images. GIF is for line-art images, such as icons, graphs and line-art logos. You will very likely find that JPEG produces smudgy line art and GIF produces large and washed-out photographs. However, don't convert GIF to JPEG if you can help it. Once your photograph has been reduced to the 256 colours supported by GIF, it's too late. Go straight from a lossless 24-bit format supported by your scanner, such as TIFF or PNG, to JPEG.

Since JPEG is an approximate representation of the image, you shouldn't save things as JPEG and then edit them further later and save them again. You can expect progressive loss of quality each time you make any change, especially with different JPEG quality settings. If you must edit a photographic image, work with it in TIFF or PNG format until it is ready for publication, then convert it to JPEG for the web.

If your images can't tolerate being reduced to 8 bits for GIF or losing precise accuracy for JPEG, TIFF and PNG are your best options. Web browsers are beginning to support the latter, and many external viewers support both. The vast majority of web sites should be using GIF for line art and JPEG for everything else, and migrating from GIF to PNG as browser support for PNG becomes more widely available.

Also see the Independent JPEG Group's JPEG FAQ for more information about JPEG and software that can produce JPEG-format images, including progressive JPEGs.

Transparent GIFs

[An excellent tutorial on making transparent GIFs is available at Neil MacMillan's site at http://www.island.net/~neilm/transgif.html.]

All computer-made images end up in rectangular-shaped files. Transparent GIFs are used to create the illusion of irregularly shaped artwork. Certain file formats, such as GIF, can store masked regions, which create the illusion of shapes other than rectangles. This masked region appears to be transparent.

Transparent GIFs are useful because they appear to blend in smoothly with the user's display, even if the user has set a background colour that differs from what the developer expected. They do this by assigning one colour to be transparent --if the web browser supports transparency, that colour will be replaced by the browser's background colour, whatever it may be. A few things to keep in mind with transparent gifs:

  • Only one colour may be selected as the transparent colour.
  • All parts of the image composed of the transparent colour will not appear and the background will show through in its place.
  • Transparency works well on line art where there is a single colour surrounding the part of the image desired.
  • Transparency does not work well with most photographic images because part of the desired area may contain the same colour and because the surrounding area will not in general be exactly one colour.

Transparency comes in two forms: 8-bit transparency and 1-bit transparency. While 8-bit transparency provides greater versatility, it is not supported by GIFs or by web browsers. 8-bit transparency is used by such file formats as Photoshop, TGA, and PICT. GIFs support 1-bit transparency, which makes it a more versatile but more limited form of masking.

Animated GIFs

Animated GIFs are part of the GIF89a specification. They are also called multiblock images because multiple images can be stored as separate blocks within a single GIF document. When the GIF document is viewed, the multiple images display, one at a time, to produce streaming animation. Streaming means that each frame of the animation displays one after the other, so that your end user doesn't have to wait for the whole file to download before seeing anything. Animated GIFs function like slide shows which can include custom palette information and be set to play at different speeds. Animated GIFs require no plug-ins and are recognized by all major browsers.

Calibration and Gamma Settings

Computer monitors can be adjusted by calibration, or adjusting the colour, brightness and contrast settings. Across different computer platforms, the calibration problem is amplified by gamma differences. Gamma specifies the brightness and contrast of the computer's display. Typically, Macs are much brighter than PCs because of differences in system gamma settings. Both calibration and gamma differences create variables which are impossible to control by the web-page designer. For more information , see An Explanation of Monitor Gamma by Robert W. Berger.

Bit-Depth

Bit-depth refers to the number of colours in an image and can have a huge impact on file size:

  • 32-bit: 16.7+ million colours plus an 8-bit grayscale mask.
  • 24-bit: 16.7+ million colours.
  • 16-bit: 65.5 thousand colours.
  • 15-bit: 32.8 thousand colours.
  • 8-bit: 256 colours.
  • 7-bit: 128 colours.
  • 6-bit: 64 colours.
  • 5-bit: 32 colours.
  • 4-bit: 16 colours.
  • 3-bit: 8 colours.
  • 2-bit: 4 colours.
  • 1-bit: 2 colours.

The bit-depth of an image is not the same as the bit-depth setting of your viewer's monitor. While many digital artists may be using 24-bit monitors to view their artwork, most viewers will have an 8-bit (256 colour) monitor. They will not be able to see the 24-bit image as it was intended.

Image Distortion: Dithering and Banding

When an image with millions of colours is converted to an image with 256 colours or less, image quality is lost. Compromises are made when colours are removed from the image, and these compromises can take two forms: dithering and banding: