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
|