Getting good quality text in a JPEG file has long been a concern for many designers. Fortunately for us, Fireworks MX and higher versions have a very useful feature to help with this called the Selective Quality. In Fireworks MX 2004 and higher, we also have the ability to adjust and customize the aliasing of text. In this short tutorial find out how to utilize these features to keep your text crisp and snappy when exporting a file as a JPEG image (see Figure 1).

We'll begin by looking at the custom anti-aliasing attributes in the Properties inspector. Fireworks MX 2004 and later give you the ability to alter the strength of text aliasing through five preset options, or by creating your own custom anti-aliasing setting. The enlarged screen captures to the right give you an idea of what the different presets do and how they blend pixels when anti-aliasing.

Anti-Aliasing is used to smooth out the "jaggies" most noticeable in areas where a shape travels in a curve or diagonally. Anti-Aliasing adds additional edge pixels of varying tones to help blend the edges of text (or other vector shapes/strokes) with the image behind it. The most obvious difference is with no anti-aliasing. There is no blending of the text edges and the stair-stepping (aka jaggies) is very evident. The system Anti-Aliasing on my XP system comes next for crispness, followed by Crisp, Strong and Smooth.

The other option available is Custom Anti-Alias, where you control the Oversampling, Sharpness and Strength (see Figure 2). Oversampling controls the amount of detail used in creating the blend between the text and the background. Sharpness controls the smoothness of the blend. Strength controls how much the text edges will blend with the background. The higher the values, the crisper and sharper your text will be. Changing the anti-alias settings does affect the file size in a minor way; when previewing my image, the file size fluctuated by about 1 kb or less when testing out the various presets and custom settings. In my opinion for this file that was a pretty acceptable range.

Once you have determined a suitable crispness for your text (if you have that option in your version of Fireworks, that is), it's time to make some optimization considerations. Because the main part of this image is a photograph, JPEG format is still the best option for exporting the file. However, depending on how much you compress the file in the Optimize Panel, your text quality can suffer greatly. JPEG format is not very kind to areas of solid color, like text.

Use the Preview, 2-up or 4-up tab to determine the best overall compression/quality for your image. Don't worry about the text at this point; our first step is to find that fine line between quality and file size. This setting will vary depending on the amount of detail and range of color in your image.

Once you are happy with the main quality setting, click on the Edit Selective Quality Options icon, as seen in Figure 3.

Choose Enable Selective Quality and you should notice that Preserve text quality option is checked (see Figure 4). If it isn't, select it now.

The general idea with Selective Quality is that you create bitmap selections around areas where you want to maintain more detail (less compression). These selections get converted to JPEG masks and will be optimized at whatever quality setting is within the selective quality input field. This way you can compress other areas of your JPEG file at higher levels (lower quality=higher compression), while still maintaining detail in important regions using the selective quality masks.

Now, one thing that you may not know, is that you don't even need to make a bitmap selection if your only concern is text quality. Once the option is selected, changing your JPEG compression for either of the two quality settings won't have a big impact on your text. I do recommend though that you keep both settings the same. I have found that if you have a higher value in the Selective Quality field than the main quality field, you actually end up with worse results.

Other Optimization Tips

• JPEG compression tends to soften an image. You can set a small to moderate amount of Unsharp Masking via the Live Effects (Live Filters) to help counteract this softening. You will gain a bit of file size, but the overall result may be more to your liking.
• GIF format is best for images that are solid color, such as logos or illustrations that don't utilize gradients. While you can use GIF format for true grayscale images, you will get better compression in JPEG format.
• Make sure to preview your optimization settings in one of the preview tabs, so you know what your image will look like when compressed.
• Do not use Sharpen JPEG Edges and Smoothing options at the same time; image quality will be reduced.
• For large images, JPEG is still the best option. PNG format preserves more detail, but it doesn't compress nearly as much.