he first place to start is by saving your graphics file in a Web-ready way.

The way you save a graphics file for print use and the way you save it for Web use is quite different.

Anti-alias with Care

Anti-aliasing can smooth out your edges, making graphics look nicer. However, it can also add overhead.

Look at your design carefully before deciding whether to alias or anti-alias for edge quality. Designers often assume that everything looks better anti-aliased?but that isn’t necessarily true.

Save your artwork as an aliased graphic and place it on the page before evaluating it. Remember, the viewers will not look at the page as critically as you do and some elements, such as small text treated as a graphic, actually look better aliased.

Anti-aliased graphics can add size to your graphics file and time to the page load process. In addition, their appearance will vary more from system to system than aliased graphics. Anti-aliasing can add a great deal of value&3151;when it is used well.

How-to anti-alias a graphic:
In Fireworks, any object you draw can be aliased or anti-aliased. You can also specify the degree of anti-aliasing. The anti-alias process is different for fills than it is for strokes.

For filled objects:

1. Draw the object using any of the drawing tools. The object can be filled as you draw it or by using the paint bucket.
2. Open the Fill palette and choose Anti-alias from the Edge pop-up menu. Alternately, you can open the Modify menu, select Edge, and then Anti-alias.

   The Fireworks default in both cases is Anti-Alias. To turn off anti-alias, select the Hard Edge option from the menu instead of the Anti-alias option. To create an ever softer edge, select the Feather option from the Edge menu. Feathering allows you to specify how much of a soft edge the graphic object will get. Change the feathering by moving the value slider next to the Edge menu. Higher numbers are fuzzier.

   This table shows the different options:

   	Fill Palette settings	Full size	Magnified
   Aliased
   Anti-Aliased
   Feathered

For stroked objects:

1. Draw the object using any of the drawing tools.
2. Make sure the object has a stroke and the stroke has width:

   Open the Stroke palette, select a Stroke Category from the top pop-up menu. Each category has settings for Stroke Name, Tip Size (width), and Edge Softness (anti-aliasing/feathering). Choose a Stroke Name. Change the default Tip Size by entering a number into the value box in the middle right of the stroke palette, or move the value slider to the right of that box.

3. In the Stroke Palette box, change the default Edge Softness by moving the value slider next to the Tip Preview box (this is located in the middle left of the stroke palette). Higher numbers are fuzzier. Stroke categories Pencil and Basic have Stroke Names that cannot be anti-aliased; these names include the word hard, indicating they are hard edged.

   This table shows some examples of stroke edge options:

   Category	Stroke Palette settings	Full size	Magnified
   Pencil-hard
   Pencil-Soft
   Airbrush

Crop Well
Good use of cropping enhances the image and reduces file size.

Cutting off unwanted parts of a picture?or cropping?can greatly enhance the image’s effectiveness. In addition, cropping an image reduces its file size and improves the focus of your graphic content. All image editing programs have cropping tools. Look carefully at your graphics and crop them as much as possible.

Use the Real Size
Save your graphic at the size you are using it within your Web page.

Alway make the image in your Web graphic file be the size that you plan to use it at within the page. If you’ll be using it at several different sizes, make several different files each at a different image size.

You can resize an image using the image tag’s width and height attributes, but in most cases all that will do is add overhead to the time it takes the page to display:

Original size is: 252 x 144 pixels IMG attributes are: width=”252″ height=”144″ File size is: 10.1K Loads and immediately displays	Original size is: 252 x 144 pixels IMG attributes are: width=”121″ height=”69″ File size is: 10.1K Loads, then client computer spends time resizing before display	Original size is: 121 x 69 pixels IMG attributes are: width=”121″ height=”69″ File size is: 3.3K Loads and immediately displays

Use Screen Resolution
Save your graphic at a resolution appropriate for screen display

You readers are going to be viewing your pages&3151;and the graphics within them?on a computer monitor. Monitors typically display data at 72 dpi. Therefore, save your files at 72 dpi.

If you are using graphics files which were originally created for print media, they are typically saved at a higher resolution. If you use a larger resolution one of two things will happen: if you’ve specified the image size in your image tag, the extra data will just be thrown away but your readers will get to experience the joy of a long download time. If the image size isn’t specified, all that data will display and you’ll end up with a huge image on the screen.

So forget the print rules and stick to the lower resolution?you’ll get the same quality, far, far smaller files, and no size surprises.

Select the Best Format
Matching the right format to the right image saves valuable download time and makes the image look better.

There are three formats you might want to consider:

• GIF
• JPEG
• PNG

GIF and JPEG formats are supported by all browsers. Newer browsers (5x and above) also support the PNG file format, which is specifically designed for web use.

Each of these formats compresses graphic data using different methods. Each method works best with a certain type of graphical data: GIF or PNG for line art with blocks of solid color and JPEG for photos or grahics with continuous tones.

Deciding on the type and amount of compression you need is a balancing act. Too much compression negatively impacts image quality, while too little can slow your site to a painful crawl. The goal is to give readers something pleasing to see within the time they are willing to wait.

This chart shows the three formats and their compression features:

Format Guidelines
Here are some guidelines for selecting the best graphic format for your file.

• Large areas of solid color?

  Go with GIF. Images created with vector-based drawing programs and typograhic images are usually good candidates for GIF format. Any image that would be a good choice for a GIF format will also work well as a PNG format.

  GIF with Web palette:	GIF with adaptive palette:	JPEG with 80% compression:
  File size = 6.6K	File size = 6.7K	File size = 6.0K

  Note: A solid color image is an obvious choice for GIF file format. However a solid color image that has been created with non-Web colors will show unpleasant dithering if it is converted to the web palette. The JPEG file format makes this solid image look blotchy.

• Photos?

  JPEG’s the snap choice. Images that have been scanned, or created in a bitmap drawing or painting program will typically work well as a JPEG. If the photo-realistic image is monochromatic, it may also work well as a GIF with an adaptive palette.

  GIF with Web palette	GIF with adaptive palette	JPEG with 80% compression
  File size = 11.9K	File size = 14.5K	File size = 7.0K
  File size = 10.8K	File size = 9.8K	File size = 6.1K

  Note: A photographic image is an obvious choice for JPEG file format. In the first image, the adaptive palette GIF is an acceptable alternative if it is necessary to use a GIF. However the file size is significantly greater than a JPEG. In the second image, the adaptive palett GIF shows more dithering due to the strong colors and smooth blending in the photograph. In all cases, the Web palette GIF is always going to cause extreme dithering of a photograph.

• A little of both?

  If the image is a combination of blocks of color and continuous tones, experiment with both alternatives and see which gives you the best solution in balancing files size and quality.

  Actually go ahead and save the image as a GIF and also as a JPEG and comprare the results. If possible, look at the image quality on different computers, under different browsers. Look at the file size. Often a format and file size tradeoff is clear.

  GIF with Web palette	GIF with adaptive palette	JPEG with 80% compression
  File size = 10.7K	File size = 13.1K	File size = 5.2K

  Note: A monochromatic image looks equally good as a GIF with adaptive palette or JPEG. JPEG compression is very effective on monochromatic photo-realistic images. The Web palette GIF is always going to cause extreme dithering of a monochromatic image because it does not contain enough tones of any color to produce a smooth blend.

• All readers are using the newest broswers?

  You might want to consider PNG format. Older broswers might not be able to display this format, but if you are working in an environment of 5.0+ browsers, you can get both good quality and smaller file sizes.

  	This GIF image uses a palette of 155 colors. The file size is 5,125 bytes.	This PNG image uses an identical palette. Its file size is 4,253 bytes.

GIF Options
When you use the GIF format, you must also set several parameters including bit depth, palette, and dithering.

To save a graphic as a GIF you perform the following steps. Click on any step to learn more about it.

1. Convert the graphic from 24-bit RGB to an indexed file. This process also flattens or merges the layers within a graphic file.
2. Select a type of color palette, usually either Web of adaptive palette.
3. Choose a bit depth for the palette. In most cases, 7-bit or less is sufficient.
4. Select whether to dither or not dither the image.
5. Save the file with the three-letter extension .gif at the end of the file name.

TIP: The Web graphics program Fireworks has an export wizard that is very helpful in determining which file format and settings are appropriate for an image.

To use the wizard:

1. Create your image in a vector-based or bitmap drawing program, or use Fireworks as your creation tool.
2. When the image is complete, import it into Fireworks. Fireworks supports the following file types: PNG, GIF, JPEG, BMP, TIFF, xRes, LRG, ASCII, RTF, Adobe Photoshop 3, 4, 5, Adobe Illustrator 7, Macromedia FreeHand 7, 8, CorelDRAW 7, Targa.
3. Make any adjustments to the image (like setting its size and resolution to one appropriate for your Web page)
4. Select Export Wizard from the File menu.

   The Export Wizard asks you a few questions about the image and its intended use and then displays a large dialog box containing options for export file type and image settings on the left side and a preview area on the right. Through the palette bar at the bottom right of dialog box, you can tell the preview area to show 1, 2, or 4 simultaneous previews of the same image. Each preview area lists file format, compression, file size and speed over an average Internet connection. Fireworks places the preferable choice in the top preview area.

5. In the upper left corner is an Option tab, which contains pull-down menus for file format and format options. To change Firework’s recommendation, click on the settings until you are happy with the result.
6. When the setting are the ones you want, click on the Next button to continue. You’ll be see the usual dialog box for saving a file.
7. Save the file in your images directory.

JPEG Options
There is more to having a good JPEG than selecting the right compression option.

JPEG works well for compressing either full-color or gray-scale images of natural, real-world scenes. JPEG compression is best for continuous tone images like photographs or natural artwork; not for sharp-edged or flat-color, art-like lettering, simple cartoons, or line drawings. JPEG always uses 24-bit color depth, it doesn’t handle 8-bit (indexed images); you have to convert these images into RGB before compressing them as JPEGs.

What looks good as a JPEG: Photographs True-color Lots of colors Blends Soft shadows, glows, and the like

What doesn’t look good as a JPEG:

JPEG is a lossy compression method, meaning information is lost during compression. This type of compression is designed to take advantage of the way our eyes work; we are more sensitive to slow changes of brightness and color than we are to rapid changes over a short distance. To achieve this, the image is converted into a frequency map and high frequency information is selectively discarded. The greater the compression, the more information is discarded.

Lossy compression reduces image fidelity by removing information. In solid-color areas, JPEG compression actually adds noise which can distort and even blur flat-color graphics, which is why JPEG compression is not well suited to flat-color sharp-edged images or lettering.

To make a good JPEG file, follow these steps. Click on any step to learn more about it:

1. Scan with a good quality photograph, or create a photo-realistic image on the computer.
2. Remember that the computer screen can only display 72 dpi, so it isn’t necessary to scan or work at a high resolution.
3. Reduce the image to the size it will appear on your Web page.
4. Select a compression setting. Medium or between 50 and 80 percent, generally works for most images. The compression option generally appears as you save the file.
5. Save the file with the three-letter extension .jpg at the end of the file name.

TIP: The Web graphics program Fireworks has an export wizard that is very helpful in determining which file format and settings are appropriate for an image.

To use the wizard:

1. Create your image in a vector-based or bitmap drawing program, or use Fireworks as your creation tool.
2. When the image is complete, import it into Fireworks. Fireworks supports the following file types: PNG, GIF, JPEG, BMP, TIFF, xRes, LRG, ASCII, RTF, Adobe Photoshop 3, 4, 5, Adobe Illustrator 7, Macromedia FreeHand 7, 8, CorelDRAW 7, Targa.
3. Make any adjustments to the image (like setting its size and resolution to one appropriate for your Web page).
4. Select Export Wizard from the File menu.
   The Export Wizard asks you a few questions about the image and its intended use and then displays a large dialog box containing options for export file type and image settings on the left side and a preview area on the right.
   
   Through the palette bar at the bottom right of dialog box, you can tell the preview area to show 1, 2, or 4 simultaneous previews of the same image.
   
   Each preview area lists file format, compression, file size and speed over an average Internet connection. Fireworks places the preferable choice in the top preview area.
5. In the upper left corner is an Option tab, which contains pull-down menus for file format and format options. To change Firework’s recommendation, click on the settings until you are happy with the result.
6. When the setting are the ones you want, click on the Next button to continue. You’ll be see the usual dialog box for saving a file.
7. Save the file in your images directory.

Reader Experience
Readers won’t have the same viewing experience you do

It is a good idea to see your graphics under different. viewing situtations, to get a sense of the variations your readers are likely to encounter.

First, try viewing your pages under a 256 color monitor. Although increasing numbers of readers have true-color monitors, this is one place where you will still find some variation.

To simulate a basic color monitor, change your monitor’s color setting to 256 colors. On a Macintosh, use the “Monitors and Sounds” control panel:

On a PC use the Setting/Control Panel/Display option, then select the Settings tab/256 color option:

If you look at your images in 256 color mode, you’ll get a better sense of what your readers are seeing.

Next, try viewing your page under both Netscape Navigator and Internet Explorer. There is a fairly even mix of these browsers in use, and each has some subtle variations.

Finally, if you have access to both a Macintosh and a PC, try viewing your page on the different platforms. You will see system-to-system differences in rendering.

Check File Size
Check the size of your file.

Don’t forget to check the size of your files. Most graphic programs have a feature that lets you see how big your file is. For example, Fireworks has a handy feature that allows you to preview various file format options and see the file size for that file as well as the approximate download time over a 28.8 modem connection.