LESSON 5: IMAGE OPTIMIZATION

OBJECTIVES

After this lesson you will be able to:

• use the Export Preview dialog box to preview different formats and settings• understand the differences between image formats• set palette options• create transparent GIFs• save export settings• batch process images

CONTEXT

WHY YOU NEED TO OPTIMIZE IMAGES

Successful Web graphics are a blend of superior design with minimal download time. The average Web

surfer will not wait longer than 8 seconds for a graphic to download.

Although most Web designers are working on high-level graphics machines with fast 56K to T3 Internet

connections, the average person is surfing the Web on a slow 28.8K modem. Therefore, optimizing

images for the Web has become an important part of the graphic development process.

It can be difficult to decide what needs to be done to optimize graphics-choosing file formats, palette

settings, and dithering options. Some actions used to optimize graphics degrade the images in

some way.

Fireworks allows you to preview different options to optimize your graphics before you commit to the

choices you have made (Figure 5-1).

3 5FIREWORKS CURRICULUM

Figure 5-1Fireworks’ ExportPreview dialog boxallows you topreview differentoptions to optimizeyour graphicsbefore you committo the choices youhave made.

CHOOSING AN IMAGE FORMAT

One of the challenges of optimizing Web graphics is deciding on what graphic file format to choose. The

most popular formats are currently GIF and JPEG.

GIF format is used most often for images with solid areas of color. The advantages of GIF format are

lossless compression (meaning there is no loss of image quality when the picture is compressed) and

transparency. The disadvantages are that GIFs are limited to 8-bit color depth, or 256 colors, and don’t

compress gradients well.

JPEG format is most often used for photographic images or images with gradients or blends. The

advantages with JPEGs are an ability to control quality loss during compression and the high color depth

for photographic images. The disadvantages are image degradation at higher compression levels and a

lack of transparency.

PNG is another file format gaining popularity. It supports high color depth and transparency, but is not

yet supported by the common browsers without plug-ins. It promises to become a very viable option that

contains the best features of both GIFs and JPEGs.

CHOOSING A PALETTE

If you are working with GIFs you need to choose a color palette. You can choose a palette when you

create a graphic, as we did in Lesson 2, or when you compress and export it.

Color palettes contain up to 256 colors, which are indexed to an image. 256 colors is the same as 8-bit

color. When exporting an indexed (or 8-bit image) choose a palette from the Palette pop-up.

These palettes are available by default in the Export Preview dialog box (Figure 5-2):

Figure 5-2You can preview your image in different file formats using the Export Preview dialog box.

FIREWORKS CURRICULUM3 6

• A d a p t i v e :A custom palette derived from the actual colors in the document.

• WebSnap Adaptive:An adaptive palette in which colors that are near in value to browser-safe colors are converted to theclosest browser-safe color.

• Web 216:A palette of the 216 colors common to both Windows and Macintosh computers. This palette is oftencalled a browser-safe palette, because it produces fairly consistent results on different platforms andwith different browsers.

• E x a c t :A palette containing the exact colors used in the image. Only images with 256 colors or less may usethe Exact palette. If the image contains more than 256 colors, the palette reverts to Adaptive Global.

• System (PC) and System (Mac):Each palette contains the 256 colors as defined by the Windows or Macintosh platform standards.

• G r a y s c a l e :A palette of 256 or fewer shades of gray that converts the image to grayscale.

• Black and White:A two-color palette that converts the image to black and white.

• U n i f o r m :A mathematical palette based on RGB pixel values.

• C u s t o m :A palette that has been built or modified.

Choose Load Palette from the Export Preview Options pop-up to load a palette.

In designing graphics for the Web you need to consider your target audience, which will likely be

using a variety of browsers, both Macintosh and Windows computers, and displays set at different

color settings.

A safe choice, if somewhat limited, is the Web 216 palette. This palette will limit your GIF files to the

216 colors common to both Windows and Macintosh computers.

3 7FIREWORKS CURRICULUM

The browser safe palette is only 216 colors instead of256, because the remaining 40 colors in the 256 colorpalette are reserved for the computer’s operating systemand the browser windows.

EXPORT PREVIEW OPTIONS

The Export Preview dialog box allows you to immediately see the effect on your graphic after each

settings adjustment without switching to your Web browser.

You can preview different file formats, compare the effects of different color palettes and transparencies,

customize palettes and animation settings, and preview the file pixel-for-pixel as it will be exported.

You can even compare up to four alternative files simultaneously to choose the best mix of quality and

file-size reduction.

Gif Export Preview

1 . Choose File > Open. Select export1.png and click Open.

2 . Choose File > Export. The Export Preview dialog box opens.

3 . Choose GIF from the Format pop-up menu on the File panel(Figure 5-3).

4 . Choose WebSnap Adaptive from the Palette pop-up menu.

5 . Click the Double View (2 preview windows) button.

6 . Click on the bottom image and choose the Web 216 palettefrom the Palette pop-up menu.

7 . Choose 200% from the Set magnification menu.

8 . At 200%, you can see the pixelization that occurs with theWeb 216 palette. Information displayed in the previewwindow includes the file format, palette, number of colors,file size, and download time using a 28.8bps modem.

9 . Select the WebSnap Adaptive palette preview by clickinganywhere within the Preview area.

1 0 . Click the Export button.

1 1 . Save the file as testfile1 in the “Lesson 5” folder. Be sure to select the Generate HTML option.

1 2 . Save and close the file, minimize Fireworks and navigate to the “Lesson 5” folder.

1 3 . Double-click on the testfile1.htm file to launch your browser and open the exported GIF file.

JPEG Export Preview and Comparison

1 . Choose File > Open. Select the export2.png file and click Open.

2 . Choose File > Export.

3 . Click the Double View button.

4 . Click on the top image and choose JPEG from the Format pop-up menu on the File panel.

5 . Choose 80 from the Quality pop-up.

6 . Now click on the bottom image and choose GIF from the Format pop-up menu on the File panel.

FIREWORKS CURRICULUM3 8

Figure 5-3When exporting an indexed

(or 8-bit image) like a GIF, choosea palette from the Palette pop-up.

7 . Choose Web 216 from the Palette pop-up menu.

8 . Choose 200% from the Set magnificationm e n u .

Notice that the GIF is significantly morepixelated than the JPEG and significantlylarger in size (Figure 5-4).

9 . Select the JPEG preview by clickinganywhere within the Preview area.

1 0 . Click the Export button.

1 1 . Save the file as testfile2 in the “Lesson5” folder. Be sure to select the GenerateHTML option.

1 2 . Close the file, minimize Fireworks andnavigate to the “Lesson 5” folder.

1 3 . Double-click on the Testfile2.htm file tolaunch your browser and open theexported GIF file.

Batch Processing

Export Preview dialog box settings can be saved for use in future exports or in batch processing. Batchprocessing allows you to convert a group of images in a folder to a common format, or to the sameformat with different settings, all at the same time. It is particularly useful for mapping a series of imagesto the same color palette.

Batch processing all the image files used in a Web site at once can save you a lot of time and work.

Fireworks can batch process all supported formats except FreeHand, Illustrator, and CorelDRAW.

1 . Choose File > Batch.2 . Leave the graphic. Navigate through the folder directory and select the folder named “batch” within

the “Lesson 5” folder. Click Open.3 . Fireworks converts all files at the current level of the selected folder. If Fireworks is unable to

convert a file, the file is left unchanged.4 . In the Batch Options dialog box, choose GIF Adaptive from the Preset Options menu and type

“125” in the Scale horizontal pixels field (Figure 5-5).

5 . Click OK.

Figure 5-5The Batch Options dialog box

3 9FIREWORKS CURRICULUM

Figure 5-4In the double view (or 2 preview window mode) you can compareyour current saved settings with a variety of alternative settings.

FIREWORKS CURRICULUM

6 . A status message displays the number of files currently processed out of the total files appearing inthe selected folder (Figure 5-6). Unsupported files are reported as untouched. Converted files aresaved into their source folder, while the source files are moved into a newly created subfoldernamed “Original Files.” File name extensions are changed to indicate the format used in thebatch conversion.

7 . Navigate to the “Batch” folder to examine the new files and the newly created subfolder named“Original Files” that contains the original files (Figure 5-7).

MORE EXERCISES TO SHARPEN YOUR SKILLS

• Export the banner you created in Lesson 5 as an animated GIF.• Collect a series of images and experiment with batch processing them.

4 0

Figure 5-6The Batch Status Report

Figure 5-7The new files are created and saved withthe originals.