Image Production for the Web

Paul Haeberli

Oct 1994

Introduction

Generating good looking images for HTML documents can be made a little less unpleasant by using some of the tools and techniques described here.

Making "xv" Work (Better) for You

The program "xv" can be pretty handy for displaying a .jpg, .gif, or .rgb image. Unfortunately, by default, "xv" uses X colormaps to display an image and dithers the image onto the display. This can sometimes create problems, because "xv" is fighting with your Web browser for color map entries. If your machine supports a 24 bit visual in X, the best solution is to add the following lines to your ~/.mailcap file, and restart your Web browser:

    image/jpeg; xv %s -24 -visual truecolor
    image/jpg;  xv %s -24 -visual truecolor
    image/tiff; xv %s -24 -visual truecolor
    image/rgb;  xv %s -24 -visual truecolor
    image/gif;  xv %s -24 -visual truecolor

If you don't have a ~/.mailcap file, create one with this stuff in it.

An Alternative to "xv"

There are some licensing issues with "xv" that make it difficult to distribute. I have developed a simple display application called "iv" that will display JPEG, GIF, TIFF and SGI format images. To make your Web browser use this viewer for images, add the following line to your ~/.mailcap file, and restart your Web browser:

    image/jpeg; iv %s -f
    image/jpg;  iv %s -f
    image/tiff; iv %s -f
    image/rgb;  iv %s -f
    image/gif;  iv %s -f

If you don't have a ~/.mailcap file, create one with this stuff in it.

Enhancing IRIS Images

"enhance" is a program that lets you easily control the brightness, shadow detail, saturation, and sharpness, of your images. But before you start any major image hacking, first make sure your monitor is adjusted properly. To do this run "gamcal":

    % gamcal

Look at the vertical grey bands of color going from full brightness on the left to pure black on the right. Make sure you can see the steps in brightness from each bar to the next. Adjust the monitor brightness so you can just barely see the transition from complete black on the far right, to the bar just to the left, which has a brightness of 1/255.

Now, to enhance an input run "enhance" like this:

   % enhance in.rgb out.rgb

The program lets you select an image processing operation from a list, and will display a set of 9 images for you to choose from. Each time you make a choice, the process is applied to a small copy of your input image. When you've got the small image looking the way you want, press the "Write Output" button and the output file will be created.

Converting IRIS Images to JPEG Format

If you want to convert an SGI image to jpeg format, this command will do the job:

    % cjpeg -q 30 < pic.rgb > pic.jpg

The number 30 specifies a quality factor. This number can be any value between 0 and 100. The bigger the quality factor is, the higher the quality of the resulting JPEG image. Remember though, that higher quality images will consume more bytes, and therefore take longer to transfer.

Page Width Issues

When our current Web browser starts up, the document area is 564 pixels across. For html pages to be displayed through WIRED's HotWired service the maximum width of the document area is 476 pixels.

If custom horizontal rules are used they probably should be made exactly 564 (476) pixels wide. It's also probably good to make sure that no images are wider than 564 (476) pixels. What a jooooke.

Using Showcase for Design

Showcase can be a handy tool for combining graphics with images. It can also be used to add labels to RGB images, or to combine a series of images together. To convert a Showcase illustration into a GIF image, here are the steps: 1. Save the illustration in EPS format using the "Save As.." menu. 2. Convert the .eps file to a .gif file using the script "epstogif":

    % epstogif picture.eps picture.gif

The script "epstogif" uses a resolution of 66.3 pixels/inch for rendering EPS files. This value is used so that a picture that is 8.5 inches wide will end up exactly 564 pixels across. If you want to change this scale factor, you can make a new script based on the epstogif script in /usr/sbin/epstogif.

When an EPS file is converted, it is made into a GIF image with 64 or fewer colors. If you would like it to use fewer colors for the final GIF image, you make a new version of epstogif with different options for "togif".

Using Adobe Illustrator

The process described above can be used to convert graphics designed with Adobe Illustrator into GIF images. Just save the file in EPS format, transfer it to an IRIS and run the "epstogif" script.

TOTAL CONTROL in EPS Conversion

This describes some of the internal stuff that "epstogif" does to convert an EPS file into a GIF image with transparency. You may want to study this if you want additional control in how EPS files get converted to GIF images.

First a program called "fromeps" is used to convert the EPS file into an RGB IRIS image. To use this:

    % fromeps graphic.eps out.rgba -a -f -p 96

The -a option is to output an rgba file instead of rgb.
The -f option forces full page rendering.
The -p option specifies the resolution in pixels per inch.

You can use the program "unframe" to remove any extra white space around the image like this:

    % unframe out.rgba trimmed.rgba

Now the file trimmed.rgba will be an IRIS image file with an alpha channel that sez what parts are transparent. The next step is to make all the transparent parts be a perfect grey of 128,128,128, so "togif" will know which parts to make transparent:

    % trans128 trimmed.rgba trimmed.rgb

The last step is to run "togif" to actually convert the RGB image into a GIF file.

    % togif trimmed.rgb graphic.gif -x 128 128 128 -n 64

The -x option specifies an RGB color in the input image. that indicates transparent pixels.
the -n option specifies the maximum number of colors to use in the GIF image.

In this case togif will generate an optimal palette of colors, and dither the input RGB image to make a GIF image.

TOTAL CONTROL in GIF Conversion

If you would like to specify your own color map for "togif" to use, you can do it with a "-m" option. This will be useful if you have many small images on a page, and you want the whole page to look as good as possible.

    % togif in.rgb out.gif -m pal.map -x 128 128 128 -n 64

The pal.map file can be generated from a group of RGB image files with the "mkpal" program:

    % mkpal pal.map 128 in1.rgb in2.rgb in3.rgb

This will make a palette of 128 colors tuned to display all these input RGB images.

If you have navigational controls or other images that are used on many different pages of your document, you can make a separate color map for these images, and use the same GIF images on each page. Just make sure that the total number of colors needed for all the color maps on a given page doesn't exceed 240 colors or so.

Centering Images

Unfortunately, the current version of HTML does not support displaying images centered on the page. This may change in the future. However in the mean time, if you know the width of the viewer people are using, you can center images by using an invisible (transparent) image. There is a script called "gifspace" that will make a perfectly invisible image of a specific size.

To make a little horizontal spacer do:

    % gifspace xspace100.gif 100 1

To make a vertical space do:

    % gifspace yspace30.gif 1 30

This can be used to center an image in the default page. These spacing .gif files are teeny - a 100 pixel wide image is 49 bytes.

This will work until the next generation of HTML becomes widely available.

Getting Information About a GIF File

You can use the program "gifstat" to print information about the size of GIF images and also how many colors they use:

    % gifstat this.gif that.gif theother.gif

How to Get the Programs

ftp to sgi.com. Login as anonymous, use your email address as the password. cd graphics/mostools. Set binary mode on. Set prompt, get all the .Z files, and uncompress *.Z. Then copy all the programs except README into /usr/sbin. Finally type rehash.

NOTE: To run fromps, fromeps and epstogif you will need Impressario software from SGI. To order a copy, call 1-800-800-7441, then install

    impr_rip
    impr_fonts
    impr_server
    impr_base
    print.sw
    dps_eoe.sw.dpsfont

NOTE: To avoid confusion you should probably make sure you don't have old copies of these programs in /usr/local/bin or elsewhere.

    cjpeg
    conimg
    cutimg
    enhance
    epstogif
    fromeps
    fromgif
    fromps
    gifspace
    gifstat
    iflip
    ipaste
    iv
    izoom
    mkpal
    scope
    subimg
    togif
    trans128
    unframe