INLINE IMAGES FREQUENTLY ASKED QUESTIONS
Subject: Inline Images FAQ v0.9b
From:
blee@media.mit.edu (Brian Patrick Lee)
Version 0.9b, updated 11 December, 1994.
Maintained by Brian Patrick Lee (blee@media-lab.mit.edu)
This document addresses color mapping problems that can arise when WWW
browsers that display multiple inline images.
Contents
- Introduction
- General
- Inline Images vs. External Viewers
- Color Mapping
- True Color
- Indexed Color
- GIFs
- Transparency
- Interlacing
- JPEGs
- XBMs
- WWW Browsers
- XMosaic
- MacMosaic
- Netscape
- Other Browsers With Inline Images
- Imageless Browsers
- Downloading Inline Images
- Image Manipulation Tools
- Photoshop
- DeBabilizer
- Freely Distributable Tools
- DOS and Windows
- Macintosh
- OS/2
- Unix and XWindows
- Other
- Inline Image Tips and Tricks
- About This Document
- Feedback and Help Requested
- Credits
- Citing
- Copyright
A WWW browser running on a computer with a true-color display could
hypothetically display any number of GIFs as inline images with no
problems. However, many computers are equipped with 8-bit graphics
hardware, which can show severe color mapping problems with multiple
inlined images, and many browsers limit and distort inline image
palettes, even with true-color displays.
The information here is based on problems encountered while developing
a WWW server on a Personal DECstation 5000/25 with 8-bit graphics,
running Ultrix v4.2 and OSF/Motif v1.2. The WWW browsers used were
XMosaic v2.1 on the DECstation and MacMosaic v1.0.3 on an variety of
Macs, including an LCIII and a IIvx with 8-bit color graphics. GIFs
were manipulated with Adobe Photoshop 2.5 (commercial software) for
the Macintosh. All of the examples below are based on the above
configurations. Additional contributions were submitted by the people
listed in the credits.
Most WWW browsers will display GIFs and XBMs as inlined images, and
will launch external viewers to display JPEGs and other formats. With
8-bit graphics, a maximum of 256 colors can be displayed per window;
less if the window doesn't have it's own custom palette.
On a true color system, all images could potentially be displayed
inline without problems, but many systems don't have true color
graphics. With external images, the viewer has the responsibility of
rendering the image, and many can be set to use a custom palette and
dither true color images. For inline images, however, the browser must
do the palette mapping, and browsers vary widely in their ability to
display multiple images on page. Browsers also vary widely in their
ability to dither images well, even with only one image on a page.
This document can help you create pages with images that will look
good on most systems. Hopefully, all browsers will support beautiful,
fast dithering and image rendering for 8-bit graphics one day, so this
document will become obsolete. Even inline JPEGs must be dithered by a
client, so JPEGs are not the final answer, unless browsers do as good
a job as external viewers do.
True color images are stored in a 24-bit RGB format where each pixel
in a file can be any one of approximately 16.7 million colors. For
example, a 3 x 3 pixel image with the colors red, green, and blue
could be represented as:
Colors
P R G B R G B R G B
i 1 255-000-000 000-255-000 000-000-255
x 2 000-255-000 000-000-255 255-000-000
e 3 255-000-000 000-255-000 000-255-000
l (True Color)
Each pixel can have a value of 0 to 256 for each of the three colors,
so 256 * 256 * 256 = 1577216 possible colors. Each color, therefore,
has it's own RGB values as it is stored.
GIF is the acronym for Graphic Interchange Format. It was developed by
Compuserve as a standard to facilitate the display of downloaded
images on different computer platforms. GIF images handle simple
images with limited palettes best. A line drawing, for example will be
very sharp and compress well as a GIF.
The GIF format uses a color table with up to 256 colors. A color table
can be global, to be used by all of the GIFs in a data stream, or
local, to be used by the GIF immediately following the color table. A
local color table supersedes a global table, and if no color table is
present, a GIF viewer can use a previously used color table, a system
color table, or a color table of its own.
There are two GIF formats: 87a and 89a. Most viewers only support 87a,
and Photoshop only produces 87a. 89a has some graphic control
extensions, including a Transparency Index, which causes the
background color of the display to remain unchanged for the color
indexed as transparent. This can create an image that does not show a
rectangular border, like a normal GIF or JPEG would.
Transparent GIFs can be used as spacers, to position images evenly, or
wherever you want on a page. The best way to do that is to make
transparent GIFs that are only 1 pixel high by however many pixels you
need in width, so they will download quickly. Using transparent
spacers can be very useful to separate images, but when pages are
resized or font sizes are changed, the page will be reformatted, so
they are not very useful if you want to position an image in an exact,
particular way.
Many browsers do not support the transparency function. In order to
fake transparency, you can make your background color the same as the
default background color of your browser of choice, and index that
color as transparent also. Many browsers use a neutral gray of
192-192-192 for their background color. If your image is displayed on
a browser with that color as a background, it will apprear transparent
whether the browser supports transparency or not.
Make sure that the color you pick as transparent doesn't occur
anywhere in the image besides the background, or your image will have
``holes'' in it!
Interlaced GIFs contain the same information as non-interlaced GIFs,
but the rows are arranged differently.
Group 1: Every 8th row, starting with row 0. (Pass 1)
Group 2: Every 8th row, starting with row 4. (Pass 2)
Group 3: Every 8th row, starting with row 2. (Pass 3)
Group 4: Every 8th row, starting with row 1. (Pass 4)
When an interlaced GIF is decoded by a viewer, either the viewer
de-interlaces the image before display, or the interlaced picture is
gradually displayed in the order the rows are stored.
Row Interlace Pass
0 ------------------------------------ 1
1 ------------------------------------ 4
2 ------------------------------------ 3
3 ------------------------------------ 4
4 ------------------------------------ 2
5 ------------------------------------ 4
6 ------------------------------------ 3
7 ------------------------------------ 4
8 ------------------------------------ 1
9 ------------------------------------ 4
10 ------------------------------------ 3
11 ------------------------------------ 4
12 ------------------------------------ 2
13 ------------------------------------ 4
14 ------------------------------------ 3
15 ------------------------------------ 4
The format was intended to allow users to view an image with a slow
viewer, and get a sense of the overall image quickly. Now, interlaced
GIFs are very popular because the Netscape WWW browser displays images
as they are downloading, so interlaced GIFs are displayed with
gradually increasing resolution. Interlacing is not a feature of
Netscape, Netscape just displays them differently than the other
browsers.
Both 87a and 89a GIFs can be interlaced, and the files are about the
same size as non-interlaced GIFs.
To get more information about the GIF format, see the CompuServe GIF
Programming Reference. From a CompuServe account, follow these menus:
Graphic Forums, Intro to Go Graphics, Appendices, Download the GIF
Specification.
JPEG is a very efficient, true-color, compressed image format. It was
designed by The Joint Photographic Experts Group to compress
true-color images. JPEG compression works best with photograph-like
images, i.e. images that are complex, and have a wide range of colors.
An image of a person, for example, usually looks much better, and
compresses to a much smaller file size, in the JPEG format, rather
than the GIF format. On the other hand, a simple logo or line drawing
will usually compress better and come out more detailed as a GIF.
Even with JPEGs, an 8-bit graphics system can only display so many
colors, so if many images are on the same page with widely different
palettes, the images may get trashed. If an external viewer shows
images, most can use a custom palette, so although you'll get some
colormap flashing when you go from window to window, the images will
each get a custom palette temporarily. If they are inline, it's up to
the browser to handle dithering your 256 or less colors to best
represent the potential thousands or millions in the multiple JPEGs.
Most browsers just limit the number of colors per image as displayed,
because colors are allocated in the order the images are downloaded.
Although this delays the inevitable, it still leads to the trashing of
images once all of the available colors are allocated, and even
trashes images if there are still colors left, through palette
reduction.
X Bit Maps are two color images, usually rendered with the foreground
color as the text color, and the background color as transparent, or
the text background color. They are much larger than 2 color GIFs, and
are not compressed. XBMs are stored as ASCII. They are 3-10 times
larger than GIFs because they are not compressed. They are always the
text color and transparent.
XMosaic allocates colors in the order the inlined images are
displayed. If the first image has 256 colors, and the second image has
256 different colors, the second image will have to use the colors
already allocated, and will be messed up. In order to deal with this
problem, XMosaic limits inlined images to 50 colors by default. If you
load 5 256 color images, each will be reduced to 50 colors, and you
will have 5 x 50, or 250 colors. Aside from the 16 colors in the
window, and whatever else you have on the screen ``stealing'' colors,
it will look pretty okay. XWindows Mosaic does this to reduce the
chances of running out of colors with more than one image on a page.
This works okay if many images on the same page use different
palettes, but looks bad if there are more than 50, but less than 256
colors on a single page.
You can change the default 50 color limit by putting:
Mosaic*colorPerInlinedImage: #
in your .Xdefaults file, where # is a number between 50 and 256 that
would suit your needs.
Some colors will still be ``near misses'', but it will look a lot
better than the default 50 per image. Also, XMosaic will not have to
spend CPU time reducing the palette of an image to 50 colors. If you
run out of colors with multi-image pages, though, it will look pretty
awful.
MacMosaic seems to do a much better job with color allocation and
dithering than XMosaic does, and has no default 50 color per image
limit on 8 bit graphic systems. MacMosaic v1.0.3 doesn't support
transparent GIFs, but the background color, which cannot be changed,
is white. So, you can just make the color you want to be transparent
white, and you'll get the same effect.
Netscape does a number of things with inline images that make it a
very nice browser to use.
- It supports inline JPEGs. Hopefully, this feature will be
supported by most browsers in the near future.
- It displays images as they are downloading, as opposed to waiting
until after the whole page, including images, is downloaded. This
is what allows for the intersting interlaced GIF display effect.
- It shows you how large an image is, and how much of it is
downloaded, so you know what you're waiting for if you have a slow
link.
- It appears to be nearly identical on PCs, Macs, and XWindows.
In my opinion, Netscape has shaken things up in a very good way, by
showing how fast and slick a browser can be. I hope other browsers
soon follow suit.
I need more information on the following browsers that support inline
images, as well as all of the other browsers available. How well do
they render images in terms of quality? What types of inline images do
they support (JPEGs, interlaced GIFs, transparent GIFs, etc.). How
fast are they? What platforms do they run on? Comparisons would be
nice.
Browser Transparency Interlace JPEG Alt Tag
Air Mosaic yes ? ? yes
Amiga Mosaic yes no yes ?
Chimera ? ? ? ?
Emacs W3 ? ? yes ?
IBM WebExplorer ? ? ? ?
NCSA MacMosaic 2.0a3 yes no no no
NCSA WinMosaic 2.0a6 no no no no
NCSA XMosaic 2.1 yes no no no
Netscape yes yes yes no
Spyglass Mosaic ? ? ? yes
The Alt Tag column refers to a browsers ability to display the alt
text when autoloading of inline images is turned off.
More people have access to Lynx and the CERN WWW line mode (text
based) browsers than the browsers that support inline images. So it's
nice not to forget about them when you are creating pages. Seeing
[IMAGE] all over the place can get pretty annoying, and can easily be
replaced.
Instead, use the alt tag:
<img src="big-slow-loading-graphic.gif" alt="Text that describes the
image, or illuminates the following passage in such a way that the
image isn't sorely missed.">
or
<img src="big-slow-loading-graphic.gif" alt=" ">
(so imageless browsers won't see [IMAGE] and feel that they are
missing something, especially if it's just decorative.)
Some browsers that support inline images, including Spyglass and AIR
Mosaic will display the alt text when auto image loading is turned
off. This is another feature that will hopefully be implemented by
other browsers.
Many inline images are GIF previews (thumbnails) of images, and have
links to JPEGs, so they can be downloaded. If the image is displayed
by an external viewer, you can save it from the viewer. However, some
images are only viewable as inline images. There are a number of ways
to do this.
- Copy it from the temp directory.
- Figure out where your temp directory is, and copy the image
from there. On Unix systems, it's usually /tmp.
- Use a screen capture.
- Although it's easy to do a screen capture, you will get a
rendered version of the image. In other words, your display
system may not display the image with it's full resolution, or
there may be colormapping problems, etc. If it's a JPEG, you
won't get the high-quality compressed version, and if it's a
GIF, you won't preserve it's attributes, such as interlacing
and transparency. You'll also have to crop the image after the
caure.
- Download it with a URL.
- If you are using an imageless client, you can download images
if they have a link, but how do you see the inline images? If
you view the HTML source for the page, you can find the tag for
displaying the image.
For example, if you see this in the html:
<img alt=" " src="directory/path/image-you-want.gif">
You can use the following URL to dowload the image directly:
http://www.machine.name/directory/path/image-you-want.gif
If you are grabbing someone else's images, be courteous about it,
because you don't want to violate copyrights. Don't just steal them to
put on your page; get permission or design your own images.
One Palette Per Page
To create the best GIF images for display on systems with 8 bit
graphics, using Adobe Photoshop on a Macintosh for image manipulation:
- Combine all of the images that will appear on one page into one
large image. This image will be used to generate a palette.
- Convert it to an 8 bit indexed color image with an adaptive
palette. Photoshop will keep that palette in memory. Do not use
dithering, because it will prevent browsers with intelligent
color-management and/or dithering schemes from doing their job
well. If there is a particular area of the image that you would
like to preserve the quality of, Photoshop will favor an area that
is selected when it picks an adaptive palette.
- Open the original individual images for that page. This will give
better results than just chopping up the combined images.
- Convert them to 8 bit indexed color images with the Previous
Palette option, so they will all have the same adaptive palette
(from the combined image) for the whole page. Do not use
dithering.
- Save the converted images as GIFs.
This will look great on any color Mac. A default XWindows Mosaic
client will reduce each image to 50 colors, but as long as you don't
have more than 256 colors on a page, it should look okay.
For display with XWindows Mosaic with the 50 color per image default:
- For up to 5 images per page:
- Convert each image to an indexed color adaptive palette with
50 colors per image, with up to 5 such images per page, to
stay within the 256 color limit. (5 images x 50 colors=250.)
Do not use dithering. If you select an area, Photoshop will
favor it for adaptive palette color selection.
- Save the converted images as GIFs.
- For more than 5 images per page:
- Combine similar images into a large image.
- Convert it to an indexed color image with a 50 color adaptive
palette, to get a palette for that set of images. Do not use
dithering. Select an area for adaptive palette favoring if
you so desire.
- Open the original individual images in the similar set.
- Convert them to indexed color images with the Previous
Palette option, so they will have the same palette per set.
Do not use dithering.
- Save the converted images as GIFs.
- Don't use more than 5 such 50 color *palettes* per page. In
other words, you could use 4 images with one 50 color
palette, 3 images with another 50 color palette, 1 with
another 50 color palette, etc., for up to 5 palettes.
Since colors are allocated in the order displayed, you can reserve
colors by simply making sure that they are displayed first. For
example, if you have buttons at the bottom of a page that show palette
mapping problems, a ``quick and dirty'' solution is to put an insignia
or bullet with the same colors at the top of the page. This may not
work correctly, however, if someone uses the back button or a link to
get to the middle of the page, in which case the top of the page might
not be displayed before the buttons.
DeBabilizer is an image manipulation tool that can create a
super-palette for a set of images, alter the bit depth, and convert
each individual image to use that palette. It also supports scripting
to automate the process. It's available from MacConnection for $295.00
for the Macintosh.
- GIFtrans for Windows
- does tranparency and is available at
ftp://ftp.rz.uni-karlsruhe.de/pub/net/www/tools/giftrans.exe
- Graphic Workshop for Windows and DOS
- is available at
http://uunorth.north.net:8000/alchemy/html/alchemy.html
- LView Pro for Windows
- does 87a, 89a, and reads JPEGs and is available at
ftp://oak.oakland.edu/pub/msdos/windows3
- Paint Shop Pro 2.0 for Windows
- does 89a, interlacing, reads many formats and is available at
ftp://oak.oakland.edu/pub/msdos/windows3/psp20.zip
- PicLab
- does interlacing and some manipulation of GIFs
- TransGIF for DOS
- is available at
http://melmac.corp.harris.com/transparent_images.html
- WinGIF
- does interlacing
- GIFConverter
- will interlace GIFs.
- Transparency
- is available at
http://www.med.cornell.edu/~giles/projects.html#transparency
- PMJPeg
- converts BMPs, GIFs, JPEGs, and more, and is available at
ftp://ftp.cdrom.com/pub/os2/32bit/graphics/pmjpg163.zip
- ImageMagick
- is available at
ftp://ftp.x.org/contrib/applications/ImageMagick/ImageMagick-3.3.tar.gz
- giftool
- is available at
http://www.homepages.com/tools/
- TransGIF for Unix
- is available at
http://melmac.corp.harris.com/transparent_images.html
- netpbm
- is a set of graphic manipulation and conversion programs
available at
ftp://ftp.cs.ubc.ca/pub/archive/netpbm/netpbm-1mar1994.tar.gz
and
ftp://ftp.cs.umn.edu/.arthive0/X/R5contrib/netpbm-1mar1994.tar.gz
- xv
- use arguments -ownmcap and -perfect to display images with a
custom palette on 8-bit graphic systems. Available at
ftp://ftp.cis.upenn.edu/pub/xv/.
For extensions to write interlaced and transparent GIF files, write to
kevin@fink.com.
- Other XMosaic
- palette mapping problems and solutions, including Unix image
manipulation tools, are available at
http://rugmd4.chem.rug.nl/hoesel/expo/part2.html
or
http://nearnet.gnn.com/mag/1_94/articles/hassel/image-proc.html
- GD
- is a graphics library that you compile for your platform, and
can be found at
http://siva.cshl.org/gd/gd.html
- DOS, Windows, Mac, Unix, and XWindows
- graphic tools can be found at
http://www2.ncsu.edu/bae/people/faculty/walker/hotlist/graphics.html
- Use only the resolution necessary for your images. If your site is
an art gallery, JPEGs would be most appropriate. If you
intersperse your text with decorative images, GIFs with a few
colors should work just fine. If they are accents or incidental,
make them small.
- Thumbnail-sized inline GIF images are best to preview and link to
a high quality JPEG image. The thumbnail GIF will download fast,
and the viewer will have a preview before downloading a high
quality jpeg.
- Check the file size and quality of GIF vs. JPEG for your images.
- Experiment with reducing the palette to reduce the file size.
- Be careful about putting style over substance; enough WWW sites
are already sorely lacking in both! Good GIFs on a WWW site are
not really that impressive; many supermarket tabloids have better
resolution and more colors.
- A picture should certainly be worth a thousand words, especially
if the file size is a thousand kilobytes! How much is it worth if
no one is willing to wait for it to download?
- Since so many people have slow connections, it is most corteous to
go easy on the graphics for your homepage, and list the file size
of your larger files. This way, users with slow connections will
not spend a long time waiting before knowing what they are
getting.
- Colormap reduction will not only make your pages look better on a
wide variety of platforms, it also saves bandwidth and time.
- Hang on to your original images. Eventually, most browsers will
support inline JPEGs, so you may want to reconvert some of your
original images to that format.
- The screen capture function is an easy way to put nicely formatted
tables and such on your page as an inline image. Just capture
whatever you want and convert it to a GIF.
- Balance your images and text. Too much text on a page can lead to lead to
endless scrolling and boredom. On the other hand, you should make
sure that your pages are useable without images, where possible
(i.e. not an art gallery.)
Dan Lottero and I are working on a project called The Online Art
Gallery in The Computer Clubhouse @ The Computer Museum in Boston.
(It's not online yet.) The Clubhouse is an informal educational
environment for 10 to 16 year-olds from underserved communities, where
they learn to use computer technology creatively. The gallery features
art created by Clubhouse members with Adobe Photoshop. Many of the
images use thousands of colors, and have to be reduced to 256 color
GIFs to be displayed as inlined images. We decided to go with inlined
images for speed and simplicity, and to use the Mosaic window as a
``frame'' for the work. We noticed that the Macintoshes on our network
were displaying the images very nicely, even the Macs with 8 bit
displays, but they looked horrible on XWindows mosaic. This document
is the result of our looking into this problem.
Please send comments, corrections, and additional information to:
Maintained by Brian Patrick Lee (
blee@media-lab.mit.edu
) This FAQ
brings up more questions than answers, so I need some help in the
following areas:
All Browsers
- How do they deal with
- color mapping?
- Dithering?
- User control over dithering?
- User control over palette mapping?
Inline image features supported
- Interlacing?
- Transparency?
- JPEGs?
- Other image formats?
- Displaying alt text when autoloading of images is off?
- Graphic Tools
- Tools not listed here
- Addresses for all tools
- Features for all tools
I also welcome any comments, criticism, suggestions, etc.
I'd like to thank Dan Lottero for his indispensible help with this
document, The Online Art Gallery, and Unix; Dan Ellis for help with
XWindows and Unix; and Stina Cooke, Sam Christy, Noah Southall, and
the Clubhouse Members for making my job fun and rewarding.
I'd also like to thank the following individuals who contributed via
email:
Dwight Hare (dwight.hare@eng.sun.com)
Kee Hinckley (nazgul@wraith.utopia.com)
Frerk Meyer (frerk@educat.hu-berlin.de)
Kyle Shannon (kyle@indienet.com)
Jim Seidman (jim@spyglass.com)
Eric W. Sink (eric@spyglass.com) and
Bjoern Stabell (bjoerns@acm.org)
Copyright (c) 1994 by Brian Patrick Lee. All rights reserved. This FAQ
may be freely redistributed, as long as it is posted in its entirety
and includes this copyright notice. This FAQ may not be distributed
for financial gain, or incorporated into commercial documents or
compilations without the express permission of the author. This FAQ is
provided as is, without any express or implied warranty.
If you want to cite this FAQ for some reason, please use the following
format: Brian Patrick Lee, ``Inline Images FAQ'', version number 0.9b,
December 11, 1994. It would be nice if you let me know about it, also.
HTML version by Kevin Fink.
Last Revision: 4 January 1995.
Kevin Fink's Home Page
(http://www.fink.com/Kevin.html)
kevin@fink.com