Publishing on the WWW. Part 1 - Static graphics.

An on-line journal's ability to publish graphics at no additional cost is a major advantage over conventional printed journals. This article outlines technical, copyright and other issues related to graphic publishing on the world-wide-web.

Introduction

An on-line journal has several advantages over a conventional journal, and these advantages relate mostly to the unrestricted ability to display information in multimedia format, which includes still pictures, and animations which may also include sound, or audio information alone. An on-line journal does not incurr additional costs for publishing papers which rely heavily on graphics, and it makes no difference whether such graphics are in colour or in black and white. Moreover, it is simply not possible to display multimedia in a conventional journal. In this article, I will address the commonest issues pertaining to the on-line publishing of static graphics.

Graphics may be supplied by authors as photographs, which can then be scanned, or as digital images obtained by means of a digital camera or prescanned images by the authors. A drawing package, such as PaintShop or Adobe Photoshop, allows the acquisition and editing of digital images including clipping, resizing, and general enhancement such as adjustment of contrast and brightness.1 The image manipulation outlined below can also be carried out with one of these drawing packages. The final image that is to be published on the web is usually produced in one of two formats: GIF or JPG (or JPEG). These file types can be viewed by almost all internet browsers.

An overriding concern for on-line journal editors is that readers should not need to wait excessively for an article in web page format to download, as readers will lose patience and browse off elsewhere. Download speed is determined by four factors:

Website server speed: How fast is the server that hosts the journal?

Journal demand: if the journal is widely read, then the server must be powerful enough to maintain fast internet access speeds.

The speed of the connection at the readers’ end which is mostly a function of user modem speed.

Web page size: the smaller the overall size of the web page, the faster the download time.

In practice, the only variable over which the journal editors have direct control is the last point. Web page size is determined mostly by the size of the graphics which the page carries, and the size of a graphic is determined by three factors:

The actual physical size of a graphic in pixels, and resolution (pixel density).

The file format used.

The degree of compression used.

1. Graphic physical size and resolution

Monitor displays, pictures viewed on monitors and pictures printed on paper are all made up of small dots called pixels.

Monitor displays

Readers may be browse at different screen resolution settings. The commonest screen resolution setting used at the time of writing is 800 by 600 pixels (horizontal and vertical dimensions respectively). A significant number of readers also browse at 640 by 480 pixels or at 1024 by 768 pixels. Because of the group browsing at 640 by 480 pixels, graphics should not exceed 600 by 350 pixels in size. Images should first be cropped in order to remove parts around the edges that are not useful. Textual or other indicators of identity within graphics should be eliminated. Images should then be resized without changing the aspect ratio which is the ratio of the width of an image to its height.

Image Resolution

Images of the same on-screen physical size may have different resolutions, depending on their pixel density. An image with smaller pixels contains more pixels, and therefore has a higher resolution, with more detail, and is a larger file size than an image with bigger pixels. Image resolution is the number of pixels per unit of length within an image, and it is usually measured in pixels per inch (ppi). The higher the ppi, the sharper an image appears.72 ppi is sufficient for on-screen viewing.

2. File formats

Two basic graphic file types are most commonly employed on the internet, and these are known as GIF files and JPG files. Both formats utilise compression algorithms in order to reduce file size.

GIF

GIF stands for Graphics Interchange Format and is a standard defined by CompuServe for images compessed by the LZW (Lempel-Ziv Welch) non-lossy algorithm.23 This format supports a maximum of 256 colours (8 bits per pixel) and also supports transparency, such that the background of the web page on which the graphic is pasted to be viewed through the transparent part of the graphic.3

This is easily illustrated by using the journal banner which is a transparent GIF file. Different backgrounds were possible within the same web page by pasting each banner within a different table row. Each row had different background properties assigned (figs 1–3).

Figure 1

no background - the web page background is visible through the image

Figure 3

Graphic table row background visible through the image

Green table row background visible through the image

JPG/JPEG

JPEG stands for the ‘Joint Photographic Experts Group’ which is comprised a group of experts nominated by national bodies and major companies in order to produce standards for continuous tone image coding. The group is more officially known as the ISO/IEC JTC1 SC29 Working Group 1. The JPEG standard in the public domain is version IS 10918-1 (ITU-T T.81), and supports 16,777,216 colours . JPEG uses lossy compression, and the level of compression is under the operator's control.3 Care must be taken not to compress graphics excessively or details will be lost and artifacts will occur.

A general rule is that whenever possible, especially if transparency is not needed, graphics should be in JPG format which allows higher compression and more colours. If GIF format must be used, file size may be reduced by colour depth reduction.

Both formats support progressive coding (interlacing), which is an algorithm that stores graphic data non-sequentially in such a way that downloaded data adds progressively greater resolution to a full-size image. This is different from sequential image coding whereby a graphic builds up from top to bottom during download. Progressive coding is generally preferable as such images are more likely to hold the attention of a browsing individual, but such encoding will slightly increase file size. This is illustrated by using part of a graphic from an article that appeared in this journal.5 The image has been cropped to an area of interest of 196 by 222 pixels with 44% compression (figs 4 and 5). Press the ‘reload’ or ‘refresh’ button now on your browser in order to see the effect of such encoding on the graphics below.

Figure 4

Standard encoding

Figure 5

Progressive encoding

The 256 colour depth restriction of GIF files makes this format generally unsuitable for displaying graphics from real life. Compare the JPG with 15% compression on the left hand side (fig 6) with the GIF file saved in standard format below (fig 7). Despite the larger file size, artifact and large pixels are clearly visible, particularly as a halo around the yellow text and arrows. This effect is lessened by saving in a more optimised format (below right - fig 8), but at the expense of a much larger file size.

Figure 6

JPG with 15% compression

Figure 7

Standard conversion

Figure 8

Optimised median cut

3. Compression

The degree of compression in a JPG graphic can be varied, and the higher the compression, the smaller the file size becomes, at the expense of resolution and the creation of artifact. I will illustrate this by using the above graphic at different compression levels with nonprogressive encoding. Note that artifact becomes visible first as a halo around the yellow text and arrows (figs 9–14 with progressively higher compression levels and lower image quality).

Figure 9

15% compression

Figure 14

80% compression

25% compression

35% compression

45% compression

60% compression

The compression of a JPG image is known as ‘lossy’. This term implies that data image data discarded by the algorithm is lost permanently. Therefore loading and saving the same image time and again will result in successive deterioration of the image quality, even if only a low level of compression is specified. It is therefore important not to output the final JPG version until all of the editing changes have been carried out. The LZW compression algorithm used in GIF files is non-lossy, but the reduction of colour depth to a maximum of 256 colours in effect also results in the loss of image information.

Advantages and disadvangates of the two file formats are summarised in table 1. In practice, graphic files should not exceed 20 kilobytes in physical size. A single 20 kilobyte file will download from the internet in19 seconds over a 14.4K modem, 9.3 seconds over a 28.8K modem and 4.8 seconds over a 56K modem.

Table 1

Summarised advantages and disadvantages of GIF and JPG files

Standard buttons and backgrounds

Logos, page backgrounds, buttons with text, page dividers etc may be created from scratch by one of the graphic packages listed above. Such graphics are also available for download for free from the world wide web. For example, a blank button may be downloaded, and then text added to the button in the required size and font. Alternatively, dedicated commercially available packages, such as Xara Webstyler, allow the easy creation of such graphics specifically for use on the internet. Moreover, modern web editors also incorporate in-built themes, which are matching sets of backgrounds, buttons, banners and dividers, for automatic application to a website. Logos and buttons may also be animated. Such animations can also be created by means of dedicated software such as Xara 3D or Animation Shop (Jasc), or may be created free, on-line, from sites such as Mediabuilder.com.

Page backgrounds may consist of a single colour which is preset when the web page is created, or may consist of a graphic. A graphical background may consist of a small picture rectangle that browsers automatically tile across the entire page, or of a wide and narrow graphic that extends across the width of the page and is automatically tiled down the entire page by the browser. The latter option allows a margin to be created, usually on the left hand side of the screen.