Graphics: Use Weighted Optimization

Summary: 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.

Weighted optimization or regional compression applies different degrees of compression to different areas of your image. You can use alpha masks to apply different JPEG quality and GIF/PNG lossy and dithering settings to different areas of your image. In many cases weighted optimization can squeeze more bytes out of your images destined for the Web.

For JPEGs this technique is actually a fudge that discards higher-frequency detail in less important areas. The resulting JFIF is still a valid file. JPEG2000 includes regional compression as part of the specification. For GIFs or PNGs you can vary the degree of "lossiness" and dithering for different areas. More lossiness in GIFs adds more similar pixel patterns along scan lines, that makes the LZW compression algorithm work more efficiently.

What Programs Support Weighted Optimization?

Photoshop 6+/Imageready 3+, Fireworks, Image Optimizer, JPEG Wizard, and Web Image Guru all support regional compression. They all work in similar ways applying different compression settings to different areas with masks. Vimas' Web Image Guru features more granular control over additional settings.

How Does Weighted Optimization Work?

In Photoshop 6 and above, create an alpha mask that surrounds the area(s) of your image where you want to preserve detail (see Figure 1).

alpha mask of maggie and fluffy

Figure 1: Alpha Mask of Maggie and Fluffy in Photoshop

Next Save for Web to bring up this Imageready JPEG dialog (see Figure 2).

save as jpeg

Figure 2: Save as JPEG in Photoshop

See that little round circle next to the quality slider? This signifies that a mask is available to adjust quality settings. Clicking on the mask button gives the "Modify Quality" dialog where you can adjust the quality inside and outside the mask (see Figure 3).

modify quality dialog

Figure 3: Modify Quality Dialog

Regional Compression Comparison (JPEG)

maggie and fluffy 60 percent qualitymaggie fluffy 60 percent inside, 30% outside quality
Figure 4: Sixty Percent Quality = 18,683 bytesFigure 5: With weighted optimization (60%/30%) = 17,795 bytes

I found that for Imageready and JPEGs the weighted optimization worked best at higher quality settings. At lower quality settings the non-regional version was actually smaller than the differentially compressed version. The effect simulates the shallow depth of focus look that you get with a fast telephoto lens. In Photoshop, GIFs have a similar dialog, where you can adjust the lossiness, dithering, and type of color palette (see Figure 6).

save as gif dialog

Figure 6: Save as GIF Dialog (Photoshop)

Conclusion

For critical applications, weighted optimization can help you squeeze more bytes out of your images. For JPEGs the technique seemed to work best at higher quality settings. For GIFs changing the amount of lossiness was most effective at reducing file size. Increasing dithering actually increases file size and should be used judiciously.

Further Reading

Adobe
Makers of Photoshop and Imageready reviewed here.
Graphic Underworld: Production Graphics
Wendy Peck shows how regional compression works in xat's Image Optimizer program.
Optimizing Animated GIFs
In-depth review of GIF89a optimization techniques by Andy King.
Optimizing Web Graphics
Original how-to on squeezing images by the author.
Chapter 12: Optimizing Web Graphics
Chapter summary that shows how to crunch graphics for maximum speed, from Speed Up Your Site by Andrew B. King.
Pegasus Software
Offers JPEGWizard free and client software for Windows.
Vimas
Makers of Web Image Guru, which includes regional compression and fine control.
Winsoft Magic
Their advanced JPEG compressor tool offers "selective image compression."
xat
Xat's Image Optimizer features regional optimization.

By website optimization on 28 Mar 2004 AM