Optimizing Web Graphics: Tools, Tips, and Techniques | WebReference

Optimizing Web Graphics: Tools, Tips, and Techniques

Tools, Tips, and Techniques

Optimizing Web Graphics


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


Experiment; different graphic artists use different techniques:


The software tools I recommend are:

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.

Blend Example

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.


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).

Figure 24 - Before Intellihance

Figure 25 - After Intellihance + Levels

Comments are welcome

Created: June 10, 1996
Revised: Feb. 23, 2000

URL: http://webreference.com/dev/graphics/tools.html