Graphics: Influence Histograms

Histogram influencing improves GIFs or PNGs by weighting the color palette that your graphics program creates. When reducing colors in an image, by default Photoshop uses the entire image to create the color palette. You can optimize this palette by creating selections over troublesome areas. In many cases, histogram influencing allows lower bit-depths, resulting in smaller file sizes.

The Problem: Color Banding

When optimizing full-color images to GIFs or PNGs, color banding can occur at lower bit depths (see Figure 1). You can adjust the number of colors and palette type until the banding is acceptable, and save the image as a GIF or PNG. But for the minimum file size there are a few more things you can do; dithering, weighted optimization, and histogram influencing. Dithering adds similar pixel patterns to smooth transitions, while histogram influencing weights the resulting palette towards critical areas.

Comparison of Influenced and Non-Influenced Balloons

Figure 1: Balloon at 64 Colors Shows Banding	Figure 2: Balloon with Selection over Critical Area	Figure 3: Influenced Balloon at 64 Colors Shows Less Banding

The Solution: Influencing Histograms

For smooth-toned images you can influence the histogram that Photoshop creates by creating selections over critical areas likely to create banding (see Figure 2). When you convert from RGB to indexed color, these selections influence the histogram, and thus the color palette that Photoshop creates. By using selections you can fine tune the color palette of your images to minimize banding in GIFs and PNGs (see Figure 3).

What Is Histogram Influencing?

A histogram is a graph of the distribution of tonal values within an image. The histogram graphs the distribution of tonal values from 0 to 256. The bars in the chart represent the distribution of values (luminosity, red, green, and blue channels) along this continuum. When you reduce the colors of an image in Photoshop, by default it uses the entire image to create a histogram. When you switch from RGB to indexed color, Photoshop uses this histogram to create the color palette at the color depth you specify. At lower bit-depths, the resulting color palette may not be optimized to minimize banding in smooth-toned transition areas (see Figure 4).

Influenced and Non-Influenced Histograms and Resulting Images

Figure 4: Maggie and Fluffy at 32 Colors	Figure 5: Maggie and Fluffy at 32 Influenced Colors
Figure 6: Histogram of Entire Original Image	Figure 7: Histogram of Critical Selection

You can influence the histogram that Photoshop creates by selecting one or more critical transition zones (see Figure 8). When you switch from RGB to indexed color the "indexed color" dialog box appears (see Figure 10). The key is choosing the local palette (in this case we used local perceptual). The histogram of these selections weights the resulting palette towards the selected colors (see Figure 7). The resulting palette is biased towards these colors, resulting in lower banding. Of course other areas of the image will have fewer colors to work with, but the tradeoff for better foreground detail is often worth the effort (see Figure 9).

Critical Selection and Image at 64 Influenced Colors

Figure 8: Maggie and Fluffy with Critical Selection Before Reduction	Figure 9: Maggie and Fluffy at 64 Influenced Colors

Note that this is an extreme example intended to show the effects of influencing on color banding. This low bit-depth version of a photograph would normally be better saved as a JPEG. In Photoshop CS the new histogram palette gives a real-time view of your histogram while you manipulate your images.

Conclusion

For images that exhibit banding at lower bit-depths you can weight your histogram, and thus your color palette towards critical areas by using selections. Histogram influencing can minimize banding and maximize bit-depth reduction for the smallest possible GIFs and PNGs.

Further Reading

Graphics: Choose the Right Image Format

Choosing the right image format is the first step in optimizing web graphics. Learn how to choose between the GIF, PNG, and JPEG formats for different image types.

Graphics: Minimize Bit-Depth

Minimize the number of colors in GIFs and PNGs to optimize file size. Lower bit-depths mean smaller palettes and code widths, which makes for smaller images.

Graphics: Use Lossy Compression for Smaller GIFs and PNGs

Lossy compression lets you squeeze more bytes out of your GIFs and PNGs. Lossy compression increases identical pixel patterns to improve compression in indexed-color images.

Graphics: Use Weighted Optimization

Weighted optimization or regional compression applies different degrees of compression to different areas of your image. By varying the quality within images you can improve file size.

Optimizing Web Graphics

Chapter summary from Speed Up Your Site, shows how to correct, optimize, and compress images for minimum file size and maximum quality.

By website optimization on 17 May 2004 PM

Comments

By: Caroline on February 8, 2006 4:10 PM

By: website optimization on February 8, 2006 8:47 PM

Post a comment