Fireworks

Users in most U.S. urban areas enjoy all kinds of options for high-speed connections, but most rural areas don't yet have that option, nor do a lot of other countries. You should keep in mind that the larger the file or combination of files on a Web page, the longer it takes to load. Connection speeds determine how long each file takes to load.

Optimization, or getting your image to the smallest possible size while retaining an acceptable quality, is one of the most important factors in determining how quickly your Web page loads.

Note
The file types currently available for the Web include the PNG format, but not all browsers support this format, so you may want to hold off on using that one just yet.

Getting Started
You can quickly optimize an image using the Optimize panel in Fireworks or you can optimize different parts of an image using the Slice tool. Slices are needed to export specific images or parts of images in a document. A slice (or hotspot) is also needed when you want to add a behavior. One of the biggest advantages of defining a slice is that you can individually optimize each slice. This means that you can have JPEG and GIF images in the same document. You can also use different compression settings for each image if desired.

Slicing Tools
The slicing tools are the Rectangle, Circle, and Polygon Hotspot tools. The Rectangle Slice tool works the same way as the other Rectangle and Circle Hotspot tools in Fireworks; click and drag over the area you want to define. The Polygon Slice tool also works the same way as the other Polygon tools in Fireworks; click a starting point and click to add points to define a shape.

You can define a polygonal shape with the Polygon Slice tool, but the polygonal shape cannot be exported as a polygon shape. All slices are rectangular, without exception. Fireworks automatically adds as many rectangles as necessary to maintain your defined polygon shape. These rectangles fit together with the polygon shape enclosed.

Every time you define a slice, Fireworks automatically places red lines where additional slices could be to slice the whole page. As you make additional slices the red lines change. You could stop slicing after a few slices and allow Fireworks to use its own guides (the red lines) to slice the rest of the image. In the Exporting dialog box you see an option called Include Areas Without Slices, which slices your document according to the areas defined within the red lines.

Imagine you have a large 800K image file and you want to get it under 100K. The image size is 600 x 400 pixels and comprises several elements, including a photo of a woman, a logo, text, and a box shot. The photo has a lot of color and is best optimized as a JPEG. The text and logo have few colors and should be optimized as a GIF. The best way to optimize this large image is to slice it into smaller images and optimize each separately. By slicing the images you can reduce the file size for individual elements separately. Fireworks slicing tool defines a specific area to optimize (compress).

To slice an image, follow these steps:

1. Select the Slice tool from the Tools panel.
2. Click and drag over an object or part of an object/image.
3. While it is still selected, look in the Property inspector (below the document or press Ctrl/Option+F3). On the left side is a field named Slice. Remove the default name and give your slice a meaningful name.
4. In the Type drop-down menu you can choose whether the slice is for an image or for HTML. The HTML option allows you to type in text or even add HTML code right in Fireworks. This will render as HTML when exported, not as an image.
5. You can add a link (URL), Alt text, and a Target as well if you'd like.
6. Below the Type field is a menu of preset optimization settings you can use (see Figure 1).

Optimizing GIF Images
Images (such as logos, text, or drawings) with large areas of color and/or images with 256 or less colors are best suited to the GIF format (see Figure 2). Any image that you want to have a transparent background will need to be exported as a GIF. Photographs should always be in JPEG format. To optimize an image as a GIF, follow these steps:

1. File > Open the image you want to optimize.
2. Select the image either by clicking on it or, from the Edit menu, choose "Select All".
3. Click on the Preview, 2-Up, or 4-Up tab to preview your settings as they will be seen in a browser. Previewing how your optimized image will look in a browser is vital, and Fireworks makes it easy. The Preview tabs are on the top left of your document window. You can view one setting or up to four different optimization settings, including different file formats. You can see the changes each setting will make on the file size and the appearance of the image.
4. Open the Optimize panel by clicking on the word Optimize in the Panel group area. If the Optimize panel isn't open you can press F6 to activate it.
5. Select GIF from the File Format drop-down menu.
6. Select the Indexed palette you'd like to use. Your choice determines which of the 256 colors are included. The most used palettes are:
   - WebSnap Adaptive palette is the default palette for indexed color in Fireworks. Any color that is not Web safe is automatically evaluated and snapped to the closed Web-safe color, plus or minus seven values. It doesn't guarantee that all the colors will be Web safe but it's close.
   - Adaptive palette finds a maximum of 256 colors. It's not a preset color set, but the best 256 colors for your image. This technique may contain a mixture of Web-safe and non-Web-safe colors.
   - Web 216 converts all colors in the image to the nearest Web-safe color.
7. If there are specific colors that you don't want removed, select them from the Color table then click on the Lock icon at the bottom of the Optimize panel.
8. Select a Matte color or the transparent option. The Matte option enables you to export your image slice as though it has a background color - without changing the canvas background color. This option is particularly important when you want to use the exported image in an environment different from the one it was designed in, or when you are planning to use the image on a variety of different-colored backgrounds.
9. Select the number of colors you'd like to use. Check your preview to see how it looks. Zoom in a bit, especially when you have anti-aliased or feathered edges. As you lower the colors an anti-alias and feathered edge will get more jagged. You'll need to decide at what point the colors are acceptable to you.
10. Set the Loss setting if you'd like. Loss is the amount of compression used. GIF images normally have no loss of image detail as long as the image has less than 256 colors and/or you don't remove colors because they use loss-less compression. But you do have the option of using compression even in a GIF image; it produces some distortions in your image however. The higher the loss setting, the higher the distortion.
11. Set the Dithering option if you'd like. Dithering gives the illusion of new colors by varying the pattern of dots of color. The downside is that it increases the number of color changes in a horizontal row, which also increases the file size. You apply any percentage of dither you feel is needed to help a GIF image look better.
12. Set the transparency. The choices for transparency are No Transparency, Index Transparency and Alpha Transparency. Index Transparency will remove the background color, even if it is in the image itself. Alpha Transparency will remove the background color only and not the same color if it appears in your image.

Note
Only one color can be used for the matte or background color automatically. You can, however, add or subtract additional colors to the index or alpha transparency by using the various eyedroppers in the lower-left corner of the Optimize panel. Click the appropriate eyedropper; then click the color. You'll need to reselect the eyedropper each time you want to add or remove a color to the transparency.

Optimizing JPEG Images
Photos and images with gradients are best optimized as JPEGs (see Figure 3). Selective JPEG compression is a special feature available only for JPEG images. It's used to set higher optimization to selected areas of an image. To optimize an image as JPEG, follow these steps:

1. Select the image or slice.
2. In the Optimize panel, select a File Format of JPEG.
3. Open either Preview, 2-Up or 4-Up to see how your settings will appear in a browser.
4. Change the Quality setting. Experiment with different levels and check the quality of the image in the preview. The quality setting determines how much compression is applied to the image. It's a good idea to zoom in a bit to see the artifact effect on your image. Go as low as you can and still have an acceptable-looking image.
5. Add Smoothing if you'd like. When you lower the quality setting you may see visible artifacts depending on how low you went. The Smooth option adds a bit of blur to blend the image. You lose some image sharpness but it may be a compromise you are willing to make when a small file size is a must. The Smooth setting ranges from 0 to 8 with 8 being a higher degree of blur.
6. Another option that you don't see in the Optimize panel is to sharpen the JPEG edges. If you optimized pretty low and/or used Smoothing, you may need to sharpen the edges a bit. To use this option, open the Optimize Options Pop-up menu and select Sharpen JPEG edges. This will add to your file size.

That's all for now. Next month, I'll show you how to batch process all those images!

Add Your Feedback

In order to post a comment you need to be registered and logged in.

Register | Log in

Please wait while we process your request...