For reference: The (formerly infamous) websafe palette consisted of 256 web-safe colors. Within those 256, the MAC and PC have a subset of 40 variable colors. Therefore, the common cross-platform, browser-safe palette was made up of 216 colors called the web-safe CLUT (Color Look-Up Table).

If a user viewed graphics with non-websafe colors on an 8-bit monitor (current monitors are ALL 16 bit +), colors outside the websafe palette would dither, or if it was an HTML speced color (not a graphic, but dynamic text), the color would shift to the nearest web-safe color.

The Hexadecimal System refers to a numbering system with base 16.
Colors are assigned corresponding values in the hexadecimal system so that they can be specified in HTML code (or CSS or DHTML), and viewed in a browser.

In HTML, hexadecimal values refer to colors used for backgrounds, text, links, vlinks (visited links), and alinks (links which change
color when the user clicks), and cell table colors.

Monitor resolution: 256 colors vs millions
Resolution is the number of pixels that fill up the screen. It is based on a grid which displays square pixels.

Low resolution is 800 x 600 (or 640 x 480 if you're on a really old machine), and high resolution is 1024 x 768 plus, on a MAC. Low resolution looks fuzzier and duller and bigger, high resolution is sharper and smaller.

For a 800x600 monitor (generally a safe assumption for commercial website), design on a 760 x 420 canvas, max.

File Formats
There are only two static graphic formats, GIF and JPEG, that are currently supported by all browsers.
While they have some overlap, there are characteristics of both formats which enable them to
output a better image for certain types of images and graphics.

GIF
. Stands for Graphic Interchange Format, developed by CompuServe
. The first format for showing and transferring graphics online
. GIFs can only contain 256 or fewer colors. (Reducing an image to a GIF palette is called Indexing.)
. Compression is lossless, which means that the image quality is not compromised by compression
and therefore, images are more predictable cross browser and platform
. Large areas of flat color will compress more efficiently
one color horizontally = pixel #1 thru X are #CC00FF = less K size, called 'run length encoding'
. To reduce size, remove # colors, never quality
. GIFs support transparency
. Best format for flat color, small graphics, nav text, non-photographic images

JPEG
. Named from the acronym for Joint Photographic Experts Group.
Originally developed for the transmission of high quality photographs electronically.
. Supports 24 bits (millions of colors) unindexed RGB files
. Compression is lossy, - meaning that some artifacts and decomposition can be detected
. Removes information (complexity) from the picture = quality
. No transparency in JPEGs (difficult to create 'floating' JPEGs) ‚ shifting colors
. Best format for photographs

Other non-standard, spottily supported file formats:

PNG
. Stands for Portable Network Graphics - pronounced "ping".
. Developed by the W3C to resolve the shortcomings of GIF and JPEG.
. Allows any number of bits-per-pixel to be assigned to the colors in a graphic
including extra information for alpha channels.
. PNG is becoming increasingly popular, supported only with a plug-ins which can be downloaded online, but mostly used as a file format for large files.

Color Calibration and Gamma
Gamma dictates the brightness and contrast on a machine
By default, MAC are brighter, PC darker

Getting graphics ready for online
Since most users have 16-bit or 24-bit colors, they can view non-websafe colors without dithering or shifting. Therefore, when preparing a graphic for online, you need to "index" an image, which means convert it to a browser-readable file format. In an graphics program like Photoshop or ImageReady, index the graphic to an Adaptive palette, also called Selective or Perceptual palette (just with slightly different algorithms for processing) depending on the application. Do NOT index images to the "Web" palette.

Bit-depth Bits are parcels of information represented in each pixel.
1 bit = 2 colors
2 bit = 4 colors
3 bit = 8 colors
4 bit = 16 colors
5 bit = 32 colors
6 bit = 64 colors
7 bit = 128 colors
8 bit = 256 colors

When specifying bit depth, give your graphic as many colors as it needs to retain visual integrity. For instance, gray type on a white background needs about 32 colors (5 bits) to show the smoothness of the anti-aliasing.

Banding and Dithering
Banding - image optimized by merging solid areas of color
Dithering - estimates colors that are not available in the palette (like a newspaper)

Interlacing GIFs and Progressive JPEGs
These options give the user a sense that the page is loading faster by loading in the image in several "passes"

Creating Floating Graphics
On the Web, whether it appears so or not, all images/graphics are actually rectangular in shape. The trick to creating graphics that seem to be other shapes and seem to float on the page is to use transparency. Also, it is always best to make graphics with transparency because graphic colors and HTML colors (even ones with matching HEX numbers) can appear different across platform and browser.

To optimize graphics with transparency:
ImageReady:
Open flattened PSD
Select transparent area with magic wand (tolerance 0 and don't check anti-aliasing)
Uncheck the contiguous pixels check box
Delete the selected area*
Define transparency color under 'matte'
Check transparency
Select GIF as the kind of file to optimize to
Select custom, adaptive, selective, or perceptual (NOT web) and the # of colors (image bit depth)
Click the optimized tab, note the file size on the bottom right of the canvas
Adjust the amount of dithering and bit depth until the ideal file size is achieved
Save optimized as ...

Photoshop:
Open flattened PSD
Select transparent area with magic wand (tolerance 0 and don't check anti-aliasing)
Delete the selected area*
Go File | Save for Web
In optimize palette, check Transparency and select the color under the "Matte" pulldown
Save optimized as ...

* This will only work if you rename the Background layer in the flattened PSD.
This layer has properties with disallow the process detailed above to work.

FYI: Anti-aliasing and Aliasing
Anti-aliased graphic are those that appear to have edges that blend into the background. Anti-aliasing is achieved by calculating the midrange colors that fall between the image and it's background, and placing those around the edges of the image. With anti-aliasing, your image edges won't look jagged (even though they are made with square pixels). The example below shows an aliased graphic on the top and an anti-aliased graphic on the bottom.

Anti-aliasing adds to the K size of your graphic. Also, with anti-aliased graphics, you have to constantly consider where the image is going to be placed on the screen. You see, the anti-aliasing will pick up part of the background around its edges. If you originally create the graphic on a white background and then decide later that your web page background color will be red, the graphic will have a "halo" or "cheese" around the edges (very very unprofessional).

Browser Offset is the variable number of pixels a browser puches content down and right from the browser border.
To avoid it, in the BODY tag write:
leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"
to get rid of offsets

Improved Performance
Use simple tables and more of them, or use DHTML for which you will not need tables at all.
Watch number of server calls versus size of graphics (dozens of tiny graphics will take longer to load than several large graphics, even if the cumulative size of the former is smaller).
Reuse graphics if possible (ie, navigation and navigation states, and logos)
Use ALT, height, and width tags for improved usability.
Optimize to the right file format ­ understand the differences between GIFs and JPEGs.
Warn users of large files and long download times (generally for file sizes larger than 300K)

Browser Idiosyncrocies
Browser feature information
Good HTML and javascript validator

Plug-ins
Download Flash and Shockwave
(Give the user the option to get the plugin or have it load automatically for them)
Flash is the standard. Have the plug-in working on your browser (most browsers have it automatically).

Be Searchable
Register your own domain and write META tags (titles and descriptions)
After the title tags, but before the closed head tag
META NAME="KEYWORDS" CONTENT="words that people would search for like your name, or particular skill set"
META NAME="DESCRIPTION" CONTENT="one wow sentence"

FYI: I can finally recommend a bare-bones, reasonably priced hosting service: Fatcow.



©1998-2004 www.valcasey.com