Link to USGS home page
Internal USGS Access Only

Graphics and Color

Graphics and the web covers a very broad spectrum of information, only some of which is covered here.

Size cut down on "Net Lag", -less is more-
* Don't use more image than you need, crop and scale
* Reduce the number of colors as much as you can (<32) to reduce the size of the gif files
* For big images use thumbnails
* For photographs use JPEGs
GIF vs. JPEG vs. PNG
GIF is a lossless compressed format for graphics invented by Compuserve, and is the most popular format for graphics on the web. GIF images are limited to a 8-bit color depth, 256 colors. JPEG was designed for photographs and gives up some detail to gain greater compression. PNG (Portable Network Graphics) is a proposed replacement for GIF, originally designed to avoid the Unisys patent restrictions, which have expired in the United States. It allows partial transparency and a number of other intriguing features.
Color palette
Since most systems now have at least 24-bit, or "True Color", color palette concerns are now mostly of historic interest: With 8-bit systems, colors that do not fall within Netscape's 6x6x6 "color cube" will be either dithered or exchanged with the nearest matching color from the cube of 216 possible colors. (RGB and Hex values for Non-Dithering Colors.)

Grayscale GIFs may actually be larger than color. Grayscale JPEGs will be only slightly smaller than the color versions.

It does not seem that there are any 24-bit or higher standards in the works for specifying color on the Web.

Transparency
In a GIF any color can be tagged as transparent. When printing from the browser transparency is ignored, so pick either white or a color close to white. PNGs use a separate channel for transparency information, and even allow for partial transparency (not supported in IE). The JPEG format does not support transparency.
Interlacing
A very fuzzy version of the image appears quickly and slowly become sharper. A nice feature that lets a viewer decide quickly whether to wait for an image. Called "Progressive" for JPEGs. Use for images larger than 6K. (Interlaced GIFs are about 10% larger than non-interlaced, "progressive " JPEGs actually get smaller.)
Reuse
Browsers cache images, so it makes sense to refer to an image rather than copying it. A well designed web site would place any images that are used more than once in a common area. One student of this class described a ingenious technique for preloading images; setting the height and width equal to a single pixel. After reading an introductory page readers could then proceed to a subsequent page and view a relatively large detailed graphic without waiting.
Platform differences
Consider tiny low resolution screens such as laptops, WebTV or PDAs/cellphones. Macintoshes (which will display bitmaps larger and brighter, systems with a different color balance, etc. A Gamma of 2.2 is recommended for creating images, which is a compromise between Mac and PC brightness settings. Newer monitors support standardized colors; sRGB.
Vector Graphics
The World Wide Web Consortium has developed a standard format for vector graphics on the web called SVG, Scalable vector graphics, now at version 1.1. Some features of SVG: Talk on SVG from Pubs 2000. SVGMaker (Windows, $49) installs as a print driver, and can convert Excel, PowerPoint, Viso, and other formats to SVG. SVGMapper (free) is an extension for ArcView (3.x) for exporting the View into SVG. A few SVG demos (alas, NS 6/7 cannot view them):
Tools for Images
On Unix: ImageMagick, xpaint, giftrans xv, and many, many command-line tools in the netpbm package.
On Sun, PC or Mac: Adobe Photoshop (far from free) and gimp (free), which is modeled after Photoshop.
On Web: RGB Color Calculator

Use the HEIGHT and WIDTH attributes in IMG tags so that browsers can lay out the page before the graphics are downloaded (the perl program wwwis can do this). It is possible to force a resize of images with HEIGHT and WIDTH, but to shrink a graphic on the screen still causes the browser to download a higher resolution image (a larger file) than it will display

What is optimized for print media is not optimal for screen: One doesn't make a play into a movie by putting a camera in a front row seat.

slide 27

[up]
"Mastering a Web Site" online course
Created and maintained by Lorna Schmid and David Boldt.
http://water.usgs.gov/usgs/training/webmaster/graphics.html    
Last modified: Tue Apr 8 18:03:28 EDT 2008