Optimizing and Naming Your Slices

Fireworks MX® Optimization Features

Graphic Optimization is the bread and butter of Fireworks MX®. When the program was initially released its specific focus was on the exportation of images for the Internet . Each slice object you create is actually an individual image that is used in your final HTML document. This is the first step in the creation of your Web page.

The optimizing abilities of Fireworks MX® are accessed through its Optimization Panel. You can use it to process your images so they strike a perfect balance between image quality and file size. The Panel works in conjunction with the Document Window . The tabs across the top of the document window allow you to see, in real time, a preview of your image with your optimization settings before you export it. You can also make a side by side comparison of your optimized graphic and the original before you export it so you are absolutely certain that the quality of your graphic is acceptable. Optimization settings are applied to Slice Objects. If you want to compress a photograph in the middle of your document as a JPEG you must draw a Slice Object over it and make the appropriate changes in your Optimization Panel. Anything in your document not covered by a Slice Object will be exported using the Panel’s default settings. To check and adjust your default settings deselect any Slice Objects you might have selected and select the Panel. back to top

Each image format has certain strengths and weaknesses. If you select your Optimization Panel and click on the Export File Format drop down menu you will see the range of options that are available to you.

Slice Types
You are given two options when you select the TYPE drop down menu. You can choose to create Image Slices , which is probably what you’ll do 99% of the time, or Text Slices. Image Slices are relatively straightforward. Fireworks MX® will take the content of the selected slice object and create a graphic file out of it when the document is exported. Text slices are slightly different. In this case Fireworks MX® will, when you export the graphic as HTML, ignore any graphic content in the slice, and instead, place any text that you have inputted into the Text Slice Object Panel into it. The result is an HTML table cell with editable text in it.

We’ll explore the various functions of the Optimization Panel as we go along.

GIFs
GIF files (Graphic Interchange Format) are 8 bit graphics and, as such, have an available palette of 256 colors. However, if your image only has 3 colors than your GIF’s palette will also contain only three colors. In other words, a GIF’s palette has space for 256 colors but it will only use as many as are required. This is one of the reasons why the format is able to create graphics that are very small in terms of file size. The limited palette makes GIF especially useful when exporting logos, illustrations, and drawings with solid colors. This format is also somewhat versatile in that it can incorporate animation, transparency and interlacing. back to top

Fireworks MX® allows you to create GIF files that utilize any number of standard palettes. If you select GIF from the Export File Format drop down menu and {Click} on the “Indexed Palette” drop down menu directly below it, you will see a listing of the various palettes available to you.

WebSnap Adaptive
This palette utilizes the range of so-called “Web Safe” colors. “Web Safe” colors are your web browser’s native palette available for those viewing web content with an 8 bit color display. Optimize your graphics using this setting and Fireworks MX® will convert the colors of your original image so they all snap to the “Web Safe” palette. Fireworks MX® approximates non “Web Safe” colors by dithering colors used in the export palette. Dithering is the process of placing pixels of different color in close proximity to one another so that, when viewed at a distance, the eye is tricked into thinking that it is viewing a single color which exists outside the “Web Safe” palette. An excellent example of this would be an image 400 pixels wide by 400 high that contained row upon row of alternating single pixels of black and white. If you viewed this document at a distance your eyes would trick you into thinking it was gray. This phenomenon is known as “Optical Color Mixing” back to top

Exact
This palette is useful for converting images that contain 256 colors or less. As the name states this format will use the exact colors contained in the original graphic. Fireworks MX® will automatically use the Adaptive Palette if the original images range of colors is larger than 256 colors.

Windows and Macintosh
These palettes are native to their respective operating systems.

Black and White
A palette limited to 2 tones; Black and White. Useful if you know that your target audience is using monochromatic monitors.

Uniform
A palette created using RGB pixel values.

Custom
If you select this option Fireworks MX® will open a dialog box prompting you to navigate your way to a .act or .ago file. Install it and the palette will be applied to your document when you export it.

Color considerations are a vital part of the planning process for any web project. When you choose your palette you should take your target viewing audience into consideration. Are many of them limited to 8-bit color display? Is color a vital component of your message? Is file size a consideration?

Thankfully, 8-bit color limitations are becoming a thing of the past. Today the vast majority of individuals surfing the web have computers that display images at 16-bit or higher. Nonetheless, optimization considerations are of prime importance if it is important that you get your message across to the broadest possible audience. back to top

Locate the Optimization Panel and spend some time acquainting yourself with the options it offers for the various compression formats. The last section dealt with GIF files so let’s look at the panel as it relates to that particular format.

Background Matte
If you {Click} on this option you can pick a Background Matte for either the slice or document that you are going to optimize. A Background Matte is useful if you are going to incorporate transparency into your exported GIF file. Select the color of the background that your HTML document will use and the anti-aliased edge of any of your transparent content will fit in perfectly. If you don’t set a matte you might end up with an irritating fringe around your transparency that stands out like a sore thumb. Experiment with mattes and transparency to see how they work in combination

Color Selection
Use this drop down menu to set the number of colors that you want your GIF to incorporate. As an example, your document may contain 103 colors in total and you want to reduce that to 16. Simply input 16 in the field or select if from the drop down menu and Fireworks MX® will adjust the palette for that graphic. back to top

Dither Slider
Using the Dither Slider allows you to decrease or increase the amount of dithering you apply to your slice. Recall that dithering simulates smooth gradation of colors by mixing pixels of different color. Dithered images tend to be slightly larger in file size than non-dithered images.

Transparency
The GIF file format allows you to add transparency to your graphic. Use the Optimization Panels Eyedroppers to designate certain colors in the images color palette as transparent. {Click} on the “Set Transparent Index Color” button and drag the eyedropper into your document window. Select the color that you want to make transparent and preview your document. You should now see the transparency checkerboard background in every section of your document or slice that contains the color you selected. In the example below the color white has been selected inside the word FIREWORKS. When the document is previewed the white has disappeared and you can see the background through it.

If you were to place the above graphic in a web document you would be able to see the background content through the word FIREWORKS. This effect can be quite impressive if you are using a photograph as a background image and the matting of your transparency is such that it doesn’t call attention to itself. back to top

You can designate more than one color for transparency if you wish. Just {Click} on the “Add color to index transparency” button and you can expand the range of colors that will be set as transparent. Remove colors from the transparency range by clicking on the “Remove color to index transparency” button.

GIF and the Color Table
You can set your transparency index color by way of the Optimization Panel or, alternately, the Color Table Panel. The Color Table Panel allows you to see and manipulate the complete palette for your GIF images. back to top

Web Snapped Color
Clicking on this button will snap your selected color to it’s nearest equivalent in the web palette.

Locked Color
Locking a color will prevent you from inadvertently changing it.

You can go beyond modifying individual colors and load an entirely new palette if you wish. Select “Load Palette…” from the Color Table Pop Out menu and navigate your way to a custom palette file. If you want to save the palette you are currently using for use in other documents select “Save Palette…” from the Pop Out menu, navigate your way to a folder, and Fireworks MX® will allow you to save it as an .act file.

You should now be familiar with all of the settings available to you for exporting an image file as a GIF. Now lets look at the other standard Internet compression format; JPEG. back to top

JPEG images don’t give you the option of including transparency or animating images, but they do allow you to specify a degree of file compression so that you can create a balance between image quality and file size. With a JPEG you increase compression by removing pixel information from the image. This type of compression is referred to as “lossy” because image quality is degraded as more pixel information is removed.

A new addition to the JPEG format is Progressive JPEG. Progressive JPEGs boast superior compression to regular JPEGs. They also give you a wider range of quality settings, and support interlacing. back to top

JPG Optimization Panel
The panel has four settings but only three of them are directly related to the quality of your exported graph

If you’re going to be optimizing images with solid colors, text, and relatively simple palettes, ,gif is your format of choice. You’d be surprised how small you can make your file sizes without experiencing any observable loss of quality. back to top

PNG
PNG or Portable Network Graphic is a new file type developed with the internet in mind. There are two PNG subtypes, PNG-8 and PNG-24. Both use the same compression method and both support transparency. PNG-8’s are limited to 256 colors and PNG-24’s have a color palette of over 16 million colors. PNG’s utilize a “lossless” compression, meaning that image quality isn’t degraded when the graphic is exported. PNG’s are relatively new and have a great deal of potential but, unfortunately, the format has yet to gain mainstream acceptance. One of the main reasons might be because the file sizes you can achieve with both GIF and JPEG are far better than anything PNG is capable of.

The optimization settings for PNGs are exactly the same as those for GIFs and JPEG so you should have no difficulty saving your graphics as such. back to top

BMP and TIF
Fireworks MX® will also save your image as BMPs and TIFs. BMPs should be very familiar to anyone who has done any work with computer graphics. If you plan on using your images in computer-based applications like Powerpoint or Director you would export your graphics as BMPs. They can’t be displayed in a web browser and tend to be rather cumbersome because of their enormous file size. Again, the Optimization Panels settings for BMPs should be familiar to you because they are very similar to those of formats we’ve already dealt with.

TIF files are print centered. Use this format if you’re going to be publishing your images in hardcopy documents. Like BMPs, their file sizes are large and they can’t be viewed with a browser. The average Fireworks MX® user would, most likely, never export their images using this file format. back to top