Newsgroups: comp.infosystems.www.providers,comp.infosystems.users,alt.graphics,pixutils,comp.graphics From: blee@media.mit.edu (Brian Patrick Lee) Subject: FAQ: Inline Images (Transparent and Interlaced GIFs !!) Message-ID: Sender: news@news.media.mit.edu (USENET News System) Organization: M.I.T. Media Laboratory Date: Wed, 14 Dec 1994 06:38:52 GMT Lines: 663 INLINE IMAGES FREQUENTLY ASKED QUESTIONS 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 * 1. Introduction + 1.1General + 1.2 Inline Images vs. External Viewers * 2. Color Mapping + 2.1 True Color + 2.2 Indexed Color * 3. GIFs + 3.1 Transparency + 3.2 Interlacing * 4. JPEGs * 5. XBMs * 6. WWW Browsers + 6.1 XMosaic + 6.2 MacMosaic + 6.3 Netscape + 6.4 Other Browsers With Inline Images + 6.5 Imageless Browsers + 6.6 Downloading Inline Images * 7. Image Manipulation Tools + 7.1 Photoshop + 7.2 DeBabilizer + 7.3 Freely Distributable Tools o 7.3.1 DOS and Windows o 7.3.2 Macintosh o 7.3.3 OS/2 o 7.3.4 Unix and XWindows o 7.3.5 Other * 8. Inline Image Tips and Tricks * 9. About This Document * 10. Feedback and Help Requested * 11. Credits + 11.1 Citing + 11.2 Copyright 1. Introduction 1.1 GENERAL INTRO 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. 1.2 INLINE IMAGES VS. EXTERNAL VIEWERS 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. 2. Color Mapping 2.1 TRUE COLOR 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. 3. GIFS 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. 3.1 TRANSPARENCY 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 creat 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! 3.2 INTERLACING 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. JPEGs 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. 5. XBMs 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. WWW Browsers XMOSAIC 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. 6.2 MACMOSAIC 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. 6.3 NETSCAPE 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. 6.4 OTHER BROWSERS WITH INLINE IMAGES 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. 6.5 IMAGELESS BROWSERS 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: (add angle brackets where appropriate) 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. 6.6 Downloading Inline Images 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: (angle brackets omitted) 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. 7. Image Manipulation Tools 7.1 PHOTOSHOP 7.1.1 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. 7.2 DEBABILIZER 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. 7.3 FREELY DISTRIBUTABLE TOOLLS 7.3.1 DOS and Windows GIFtrans for Windows does tranparency and is available at ftp.rz.uni-karlsruhe.de in /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 oak.oakland.edu in /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 7.3.2 Macintosh GIFConverter will interlace GIFs. Transparency is available at http://www.med.cornell.edu/~giles/projects.html#transparency 7.3.3 OS/2 PMJPeg converts BMPs, GIFs, JPEGs, and more, and is available at ftp.cdrom.com in /pub/os2/...? 7.3.4 Unix and XWindows 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. 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 7.3.5 Other 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 8. Inline Image Tricks and Tips * 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 andToo 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.) 9. ABOUT THIS DOCUMENT AND ITS CREATION 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. 10. FEEDBACK AND CONTRIBUTIONS 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? o Dithering? o User control over dithering? o User control over palette mapping? + Inline image features supported o Interlacing? o Transparency? o JPEGs? o 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. 11. Credits 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) 11.2 COPYRIGHT NOTICE 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. 11.1 CITING THIS DOCUMENT 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.