Optimizing and Exporting in Web Format

 

After youve gone plum crazy building images and applying cool Fireworks effects, youll need to optimize them with Fireworks superior image compression tools before exporting as a GIF or a JPG. You can also save your original images in Fireworks format for later editing.

 

Saving Your Original Images

Of course, its a good idea to save your original images. The web design course recommends creating a folder inside the root foler called "originals". To save your original files just click:

FILE-> SAVE

Fireworks saves its files in PNG format. PNG is a recognized image file in most browsers, but you never want to use a saved Fireworks file for web display. One of the nice things about a PNG is that it allows for extra saved information in the file. When Fireworks saves a file, it adds a whole big bunch of extra information, like layer, vector, and history information. If you try to use a Fireworks PNG in your website, all of that extra information gets downloaded right with it. Your website is slow, and youre really sad.

 

Optimizing Your Images

Before you put an image on the web, youll try to get the file size as small as possible while still retaining acceptable image quality. This process is called "Optimizing", and you need to be good at it. The same image can often take three to four times as long to load if its not optimized correctly.

 

JPEG (JPG) Optimization

Photographs and gradated images look better and compress smaller when saved as a JPG.

JPG compression works by finding colors that are close to each other and making them the same color. You will control how picky Fireworks is while snapping colors onto each other by adjusting the "quality". After snapping color, smaller codes replace the long string of zeros and ones that make up each color. Because saving as a JPG actually destroys colors, you should be careful to only create a JPG from your original Fireworks image. If you re-optimize the same JPG itll look worse and worse.

 

To apply JPG compression:

1. Click the Preview tab at the top of your image.
   The Preview tab allows you to see what the image would look like if you exported it with current settings.
   Notice that the file size and download time on a 28K modem is listed next to the Preview tab.

 

***NOTE: MAGE EDITING MAY NOT BE PERFORMED IN THE PREVIEW TAB.
BEGINNERS OFTEN GET STUCK IN PREVIEW MODE AND WONDER WHY FIREWORKS ISNT WORKING.
TO EDIT, CLICK THE ORIGINAL TAB.

 

2. Open the Optimize palette (WINDOW-> OPTIMIZE)
3. Choose JPEG from the pull-down menu.

4. Adjust the Quality
   Quality controls the number of colors snapped onto each other. The lower the quality, the faster an image will download, but the worse it will look.
   You want to find an acceptable middle ground where the image will look good and download quickly.
   
   
5. When youre happy with your work, click FILE-> EXPORT
   It is important that you do not click FILE->SAVE, which will save in Fireworks format.

 

Selective JPEG Compression

You can select specific areas of a JPEG to compress more or less than the rest of an image. For example, you may want to compress a persons face less than the background.

 

To Select Areas For Compression

1. Use the selection tools to select the area that you would like to specially compress.
2. Click MODIFY-> SELECTIVE JPEG-> SAVE SELECTION AS JPEG MASK
3. In the Optimize Palette, make sure you choose JPEG, and click the Selective Quality button.

4. Click Enable Selective Quality and adjust the quality for the selected area.

 

If you like, you can select Preserve Text Quality. This option increases the quality of JPEG compression around any text in the image. Text does not have to be marked as a selective quality area for this to work.

 

Pretty cool, eh?

 

GIF Optimization

GIF compression is primarily used for line art or computer drawn art containing large areas of solid color.

 

GIF compression works by counting the number of like colored pixels that are next to each other. If the first color in an image is a certain shade of blue, and the next pixel is the same color, GIF compression will delight in listing the color value for the first pixel only. It will then note how many adjacent pixels are the same color.

The following image is only one color, and therefore would compress file size to almost nothing as a GIF.

 

 

 

GIF compression looks at pixels to the left and right of each other, not up and down. Consequently:

 

To apply GIF Compression:

1. Click the Preview tab at the top of your image.
   Be careful not to get stuck in Preview Mode Later on!
2. Choose GIF from the pull-down menu

 

3. Choose the type of GIF you want

Adaptive: Snaps the image colors to the best assortment of 256 colors to preserve image quality.

WebSnap Adaptive: Same as adaptive, except if a color is close enough to web safe, it will choose the web safe color over the non-web safe. This is the most widely used palette.

Web 216: Chooses colors from the 216 web safe colors.

Exact: Only uses the exact set of colors in the image. Good for images that only have a couple of colors.

 

4. Adjust the number of colors in your GIF. Use the lowest number of colors that afford an acceptable image.

 

Using a Dither

Remember that a GIF only can make use of 256 colors. But maybe your line-art logo has a photograph in it, and the photograph looks horrible with only 256 colors. Sometimes you wont be able to split photographs and line art. In such a case, you can apply a dither, which will smooth out GIF photographs. It will also increase your load time, so be careful. Dithering creates colors outside of the 256 color palette by placing two different colored pixels next to each other. When viewed at a normal distance, the two pixels blend to become one color.

 

Using Loss

Unlike a JPEG, GIF compression doesnt change the colors in an image. GIF compression is referred to as "lossless" because there is no loss of color data. Sometimes, by snapping similar colors onto each other a GIF could dramatically decrease file size. To create a "lossy" GIF, adjust the loss setting. Keep in mind that image quality will probably degrade.

 

Creating Transparent GIFs

One of the cool things a GIF can do is make any color totally transparent. Transparent GIFs come in handy when you have a background image, or when you cant get your image border to match up with a hexadecimal background color.

To make the following images background transparent:

 

1. Open mr_smiley_gif.PNG from the FW_IMAGES folder.
2. Click the Preview tab at the top of your image.
   You must be on the Preview tab to create transparency.
3. Choose GIF from the pull-down menu in the Optimize Palette.
4. Optimize the GIF.
5. Select the Eyedropper with a "+" next to it on the Palette.
   Using the eyedropper, you can select any colors in the image you want to be transparent.

 

6. Click the black area.
   Viola!
7. FILE-> EXPORT
   
   

Sadly, now your image would look like:

When Fireworks blends a background color into an image, it makes change gradually, so edges look smooth. When you chose a color to become transparent, you didnt choose the gradual fade color.

Your way around this problem is to change the background color to a color matching your website before choosing the transparent GIF color. If your website has a background image, just choose the predominant color. No one will notice.

 

You can change the background color before you choose a transparent color in two different ways:

�.       MODIFY-> CANVAS COLOR

or

�.       Select the background color with the magic wand tool and fill with the Paint Bucket tool

 

 

|