Invited article (0.4M)	Grech V*. Publishing on the WWW. Part 1 - static graphics. Images Paediatr Cardiol 2000;5:9-15
*	Editor-in-Chief, Images Paediatr Cardiol, Paediatric Department, St. Luke's Hospital, Guardamangia, Malta

Article
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.¹ 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:

1. Website server speed: How fast is the server that hosts the journal?
2. Journal demand: if the journal is widely read, then the server must be powerful enough to maintain fast internet access speeds.
3. The speed of the connection at the readers' end which is mostly a function of user modem speed.
4. Web page size: the smaller the overall size of the web page, the faster the download time.

1. The actual physical size of a graphic in pixels, and resolution (pixel density).
2. The file format used.
3. The degree of compression used.

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.^2,3 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.³

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 2: Green table row background visible through the image

Figure 3: Graphic 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.³ 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.⁵ 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 File size: 6,078 bytes

Figure 5: Progressive encoding File size 6,256 bytes

 
 

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 File size: 11,140 bytes

Figure 7: Standard conversion File size: 19,052 bytes

Figure 8: Optimised median cut File size: 37,323 bytes

 

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 File size: 11,140 bytes	Figure 10: 25% compression File size: 8,409 bytes
Figure 11: 35% compression File size: 6,965 bytes	Figure 12: 45% compression File size: 5,992 bytes
Figure 13: 60% compression File size: 4,861 bytes	Figure 14: 80% compression File size: 3,096 bytes

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.
 

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.
 
References

1. Barry CJ, Yogesan K, Constable IJ, Eikelboom RH. A case for electronic manipulation of medical images? J Audiov Media Med 1999;22:15-20
2. Welch TA. A Technique for High Performance Data Compression. IEEE Computer 1984, 17;8-19
3. Balter S. Fundamental properties of digital images. Radiographics 1993;13:129-141
4. Ziv J, Lempel A. A Universal Algorithm for Sequential Data Compression. IEEE Transactions on Information Theory 1977;IT-23, 337-343
5. McCarthy KP, Ho SY, Anderson RH. Ventricular Septal Defects: Morphology of the Doubly Committed Juxtaarterial and Muscular Variants. Images Paediatr Cardiol 2000;4:4-19

Contact information

Dr. Victor Grech Editor-in-Chief Images Paediatr Cardiol Paediatric Department St. Luke's Hospital Guardamangia, Malta victor.e.grech@magnet.mt