Why graphics are a bit difficult
Image maps and graphics slicing
Graphics
Jeff Williamson
Northern Virginia Community College
www.nvcc.edu/home/nvwillj/html-graphics/
nvwillj@nvcc.edu
Color on the web
Text layout, fonts, and image placement are challenging to control on the web. Colors are even more challenging. Here are some issues:
Color resolution - Your PC user's monitors may be set at color resolutions of
- 256 colors
- 16-bit color
- 32-bit color
Most users don't know and don't care what their color resolution is. Even users with truly low resolution don't seem to be greatly bothered by it, e.g. when I see a coworker using a monitor I'll check if they want it changed, but there's not much
Color differences - The short of it: There are only 216 colors that you can guarantee will display exactly as you intended in all browsers on most all platforms. You don't have to limit your designs to only these colors, but you should have a chart of them handy. If you're going to use red type in a graphic anyway, why not make it browser-safe red?
216 Browser-safe colors chart, with hexadecimal color codes - from http://www.stars.com/Authoring/Graphics/Colour/colors.cgi
Hot tip 1: Many light colors that are not on the web safe palette will still work. EEEEEE, for example, is a lighter shade of gray than the web-safe CCCCCC.
Hot tip 2: Technically savvy color perfectionists can just about skip the palette altogether by using background color chips made of small interspersed web-safe colors that, create other colors when viewed together (e.g. a chip with interspersed red and yellow pixels would look orange).
Lisa Saavedra (EDIT 772, Spring 99) found this nice combination for sites for this purpose:
The Colorizer, for picking colors across a millions-of-colors spectrum www.webreference.com/html/tools/colorizer/
The Colormix site, for creating web-safe chips to represent anything from a millions-of-colors spectrum www.colormixer.com
References on web color
Lynda Weinman's pretty much the authority on web graphics. Her site, www.lynda.com, has a nice clear page on web color.I am Curious Yellow has the whole technical explanation of why all this is as it is - http://www.upenn.edu/computing/group/dmp/colors/
Palettes - The short of it: end users want images with smaller palettes. A small palette (a.k.a Color Lookup Table or CLUT) is one of the factors (there are others) that can speed up download time.
The web has more cartoony-type images than print media partly for this reason: cartoons have more limited palettes than photographs. Images with smaller palettes have less to download than those with big palettes.
Palettes and file compression: Limited palettes can also improve image compression. Both GIF and JPEG are compressed file formats. GIF's compression scheme reads pixels in an image from left to right , so that the sequence || red pixel || red pixel || red pixel || is compressed as something like red3. A limited palette of, say, 3 colors in a company logo ensures long compression runs of the same color.
Note: Long runs of exactly the same color never occur in photographs. The pixels in a segment of red dress will always be slightly different - || red pixel || burgundy pixel || dark pink pixel || red pixel || etc. JPEG's compression scheme is more suitable for photos. And no, I don't really know how to explain it.