Images for web pages

	Chazin Home \| Ca-binding Protein DB \| Vanderbilt Home
	Research Description \| Publications \| Wisdom \| Search
	How to contribute \| About this page

Image preparation for web pages

Image conversion/editing programs

Program name	Use	Remark
SGI		Programs are in the usual system paths or in /usr/local/bin
imgworks	editing/conversion	supports a.o. JPEG, GIF, TIFF and RGB formats
imgview	viewer	supports a.o. JPEG, GIF, TIFF and RGB formats
imginfo	get info (e.g. size)	supports a.o. JPEG, GIF, TIFF and RGB formats
addbevel makebevel	make buttons from images for web pages	for SGI RGB images (usually end in .rgb)
xv	image display and editing	v3.1 - supports most image formats, some versions can import PostScript
xpaint	paint program	similar in spirit to MacPaint
SUN
xv	image display and editing	v3.1 - available from /tsri/grafx supports most image formats
imagetool	image display and editing	supports many image formats

Image formats

There are two image formats in common use on the internet, GIF and JPEG. Almost all web browsers support both formats as inline images.

Which format to use?

From the JPEG FAQ:
JPEG is designed for compressing either full-color or gray-scale images of natural, real-world scenes. It works [very] well on photographs, naturalistic artwork, and similar material; not so well on lettering, simple cartoons, or line drawings. [...] GIF does significantly better on images with only a few distinct colors, such as line drawings and simple cartoons. Not only is GIF lossless for such images, but it often compresses them more than JPEG can. [...] Plain black-and-white (two level) images should never be converted to JPEG.

Faster image / page display

Making the image file size smaller:

Try JPEG if you have a photorealistic image and experiment with the quality setting
Reduce GIFs to fewer colors (imgworks on SGI will let you do this, xv to some extent)
Reduce the image size
Speeding up the page display:
Always specify the image size in the <IMG> tag
most HTML editors ask for this when you inline an image and most browsers reserve a space for the image while it loads and go on displaying the rest of the page if they have info about the image size
the HTML syntax is <IMG SRC="some.gif" ALT="some text" WIDTH="200" HEIGHT="300">
Use interlaced GIF (imgworks on SGI will let you do this)

More resources: Guide to Web Style: Graphics

last edited May 14, 1994 by Christoph Weber