Optimizing Web Graphics: Tools, Tips, and Techniques

Tools, Tips, and Techniques

Optimizing Web Graphics

Tips

Here are some tips you can use to create the smallest possible graphics files:

Minimize dimension and maximize crop.
Minimize the initial number of colors.
Choose your colors from the non-dithering palette.
Use aliased sans-serif fonts like Geneva, Chicago. Anti-aliasing increases the number of colors.
Use flat, horizontal areas of color: avoid gradations of color, especially large, gradual ones which are radial or horizontal, and have a large shift in hue and/or tint.
Use histogram influencing to optimize and minimize palettes.
Reduce the resolution to 72 dpi as your last step.
Group multiple graphics into one CLUT.
Use multiple small graphics and/or backgrounds instead of one large graphic.

Techniques

Experiment; different graphic artists use different techniques:

Try first reducing to 256 colors in Debabelizer and then reduce again to between 8 and 32 colors with Debabelizer's own Reduce Colors algorithm.
Try working with a monochromatic palette, differing shades of the same color.
Avoid dithering altogether by selecting a specific palette of 16 to 32 colors.
In another approach, which could be called "painterly," you choose 4 to 5 colors, create your image with anti-aliased tools and save as, reducing colors to 16 or 32 colors.
To flatten and reduce colors you can deliberately posterize your image before reducing it. This is also a good way to preview different numbers of colors.
For anti-aliased images that will have a transparent background make the background similar to the background you will use on your page. This will keep a halo from showing around the edges.
Use HEIGHT and WIDTH on images to speed display.

Tools

The software tools I recommend are:

Photoshop/Imageready (Mac/Windows) by Adobe- Graphic creation, editing, GIF reduction
PhotoPRO and JPEG Wizard by Pegasus Imaging Corporation (Windows) - Graphic creation, editing, sharpest JPEG compression
HVS ColorGIF/JPEG by Spinwave (Mac/Windows) - Color reduction (least banding)
PhotoGIF and ProJPEG by BoxTop Software
Debabelizer by Equilibrium (Mac/Windows) - Color manipulation, SuperPalette (TM), batch processing
PhotoImpact by Ulead (Windows)
Intellihance by Extensis (Mac/Windows) - Image enhancement

Color Blenders

Lynda Weinman first coined the term "hybrid colors" in her DWG book, to signify blending web-safe colors to form new colors that don't dither. Trouble is creating these things to match RGB colors is not easy. Enter a new breed of graphics plug-in, the color blender! The first out of the box was DitherBox from RDG Tools. Hal Rucker and friends created a nice blender that uses Photoshop's RGB color picker and more. Once you get the color you want just hit the convert arrow and presto, a nondithering 2x2 blend, which appears to look like the RGB color.

BoxTop Software's answer to RDG's salvo is ColorSafe. It does essentially the same thing, but has some features not found in DitherBox. While DitherBox used Photoshop's color picker to let you choose the RGB color, ColorSafe lets you input the numeric RGB values directly, or from three sliders, or as HEX! ColorSafe also reblends on the fly, which gives you immediate feedback and makes tweaking colors a pleasure.

Either filter allows you to be much more creative in your web pages, you are now not limited to 216 solid non-dithering colors, you can blend these colors to simulate RGB equivalents for a much larger range of colors. Note that you should use these blends for larger areas of color in your web graphics (backgrounds, etc.). Also, overlaying antialiased text can appear jagged on some blends.

https://www.boxtopsoft.com

Enhance Your Image

Before reducing photographic images, most designers clean up and optimize their images manually using Photoshop. Intellihance, a Photoshop plug-in by Extensis, automatically corrects photographs to look their best. What would take 12 steps in Photoshop can take one click with Intellihance. Intellihance uses artificial intelligence to automatically apply filters for contrast, brightness, saturation, sharpness and despeckle (Figure 23).

Figure 23 - Intellihance Preferences Dialog

Straight from a PhotoCD Maggie and her friend appear dark and blurry (Figure 24), but after Intellihancing and adjusting levels to compensate for the PC's higher gamma (see compress) they look sharp and well saturated (Figure 25).