|
Home | Résumé | Courses | Contact | Useful Links | Favorite Links | USC - Homepage |
Topics in Desktop Graphics - (CPTR240) - Lectures
Optimizing an image as a JPEG
The JPEG file format (named for the Joint Photographic Experts Group) is designed to compress photographs or images with continuous-tone color, such as a color gradient. The JPEG format supports 24-bit color (millions of colors) and preserves the broad range of color and subtle variations in hue that characterize continuous-tone images.
The JPEG format reduces image file size by discarding some data from the file. Because some data is lost in the compression process, the JPEG format is referred to as lossy. When compressing an image as a JPEG, you choose a Quality setting to determine how much data is discarded and how much the file size is reduced.
Compressing an image as a JPEG can cause sharp edges to appear rough or jagged. You apply the Smoothing command to a JPEG to smooth rough edges created by the compression process.
The JPEG format does not support transparency. However, you can simulate background transparency in a JPEG by choosing a Matte color that exactly matches the Web page background color on which the JPEG will appear.
Note: JPEG is not the recommended file format for all images. If your image contains large areas of flat color, sharp detail (such as small type), or if you need to preserve true transparency, you should use the GIF file format. See Selecting the appropriate file format in Fireworks online Help.
This tutorial leads you through these processes:
Selecting the JPEG file format
The first step in optimizing an image is selecting the file format in the Optimize panel.
1. Launch Fireworks and open a continuous-tone image that you want to compress as a JPEG.
The example below, a photographic image with a transparent background, is appropriate for compression as a JPEG. The transparent background will be filled with a matte color to match a solid Web page background color.
2. Choose Window > Optimize to view the Optimize panel. The Optimize panel displays options for optimizing images.
3. From the File Format pop-up menu (directly below the Settings menu in the Optimize panel), choose JPEG.
By default, when you choose JPEG format, the Matte color is set to white, the Quality setting is set to 80%, and Smoothing is set to 0. You'll learn to adjust these settings later in this tutorial.
4. Click the Preview tab in the upper left corner of the document window to preview the optimized image with the default JPEG settings.
You use the Preview window to view the image with the current Optimize panel settings applied.
Selecting a Quality level
Use the Quality command to select the amount of compression to be applied to an image. A higher Quality setting discards less data from the image, and preserves a higher level of image quality, but also results in a smaller reduction in file size. A lower Quality setting discards more data and further reduces image quality, but yields a smaller file size.
Compare several different Quality settings to find the right balance of file size and image quality. Begin by comparing the default Quality setting to the original image.
1. Click the 2-Up tab in the upper left corner of the document window.
You use the 2-Up window to view the original image and the optimized image side by side. By default, the 2-Up window displays the optimized image with the current Optimize panel settings.
Captions below the images display information such as optimization settings, file size, and estimated download time using a 56 kilobits per second modem. The estimated download time can help you determine if your image is small enough for viewers to download easily.
2. Compare the original and optimized images to find any degradation in quality caused by the compression process.
In the example, the optimized image retains a high level of image quality, but indicates a 6-second download time. When the optimized image shows no visible degradation, you can try a lower Quality setting to achieve a smaller file size and faster download time.
Note: The transparent pixels in the original image have been filled with white, the default Matte color, in the optimized image.
3. Click the 4-Up tab in the upper left corner of the document window.
You use the 4-Up window to compare view four versions of the image (the original and three optimized versions) side by side. By default, the 4-Up window three optimized versions all display the current Optimize panel settings. To compare different versions of the optimized image, select one version and choose new settings in the Optimize panel.
4. Click on one optimized image in the 4-Up window. In the Optimize panel, click the down arrow next to the Quality setting (Optimize panel) and drag the slider to select a low quality level. For the purposes of comparison, choose a setting low enough to cause visible degradation in the image.
5. Repeat step 2 to apply another Quality setting to the third optimized image. Select a setting somewhere between the default setting and the low setting you chose in step 4.
6. Compare the file size, download time, and image quality of each optimized image. Try additional Quality settings as needed until you are satisfied with the balance of file size and image quality.
7. When you have determined the appropriate Quality setting, select the optimized image with that setting applied and click the Preview tab.
While it is preferable to choose a Quality setting that preserves as much image quality as possible, a small amount of image degradation can be corrected using the Smoothing command. You'll learn to use the Smoothing in the next section of the tutorial.
In the example, a 10% Quality setting (on the left) yields a significantly reduced file size (4.9K) and download time (1 second). However, the image quality also shows noticeable degradation, especially around sharp edges such as the windows and the text. A 40% Quality setting shows less reduction in file size (10.65K) and download time (3 seconds) but preserves acceptable image quality. The minor degradation around the sharp edges of the sign can be corrected with the Smoothing command.
Smoothing the image
The JPEG compression process may cause sharp edges in an image to appear rough or jagged. You can apply the Smoothing command to blur the edges and create a more even transition between areas of high contrast. Smoothing removes a small amount of data from the image, and can reduce file size.
A higher Smoothing setting applies more smoothing and further reduces file size. However, too much smoothing can cause blurring and loss of detail. Keep in mind that Smoothing does not improve all images. Compare Smoothing settings to the original to determine if the option is appropriate for your image.
The Smoothing command applies an effect to the image that is identical to the Fireworks Gaussian Blur filter. See Blurring an image in Fireworks online Help.
To smooth an image:
1. In the Optimize palette, click on the dawn arrow next to the Smoothing setting and drag the slider to select a setting. For most images, a setting of 1 or 2 is appropriate.
2. Try other Smoothing settings to find the appropriate level for your image. If desired, use the 2-Up or 4-Up window to compare various versions of the image.
Note: Be sure that all optimized images in the 4-Up window have the appropriate Quality setting applied.
In the example, the image on the left has no smoothing applied, and the edges around the windows and the top of the building appear somewhat jagged. The image on the right has a smoothing setting of 2 applied. The rough edges are smoothed, but the sharpness in the black and white edges of the SKY sign are preserved.
Using background matting
If your original image contains transparent pixels, those pixels are filled with the Matte color when you compress an image as a JPEG. You can simulate background transparency by choosing a Matte color that exactly matches the Web page background on which the JPEG will appear. Background matting works only when the Web page background is a solid color.
If your image contains transparency and will be placed on a patterned background, or you do not know the background color that will be used, you should compress the image as a GIF to preserve transparency. See Assigning transparency in Fireworks online Help.
Note: If your image contains no transparency, it's not necessary to select a Matte color.
To apply background matting:
With the optimized image displayed in the Preview window, click the triangle next to the Matte setting and select one of the following options:
Select a color from the Matte pop-up palette (the 216-color Web-safe palette).
Click the Eyedropper button and click in the image to select a color.
Click the Color Picker button. In the Select Color dialog box, choose a color from the scroll list and then use the color picker's controls to select a color.
Enter a color's hexadecimal value in the text box.
Note: Selecting the No Matte Color button (the slashed circle) causes transparent pixels to be filled with white. This option is intended only for images that contain no transparency.
In the example, a light blue color was selected from the Matte color pop-up palette. The color appears in place of the transparent pixels that were in the original image. When viewed in a browser, the Matte color in the JPEG blends seamlessly with the background color on the Web page.
Choosing other JPEG options
Once you're familiar with the process of choosing options for the JPEG format, see the Optimize panel options pop-up menu for additional JPEG options.
1. Click the dawn-arrow in the upper right corner of the Optimize panel to view the menu.
2. Choose from the following options:
Choose Optimize to Size to select options for a JPEG based on a target file size.
Choose Progressive JPEG to create an image that downloads progressively in a Web browser. The image displays initially at low resolution and transitions to full resolution, enabling viewers to see a version of the image while waiting for downloading to finish.
Choose Sharpen Edges to preserve sharp edges or fine detail, such as that in type.
Note: The Sharpen Edges command is not recommended in combination with the Smoothing command. The two commands perform opposing functions, and may cause a blurred, muddied effect if used together.
For more information on these options, see Optimizing Graphics in Fireworks online Help.
Source: David Jacowitz and Gary White - Macromedia FIREWORKS MX (2004) - http://www.macromedia.com/support/fireworks/tutorial_index.html
|
Home | Résumé | Courses | Contact | Useful Links | Favorite Links | USC - Homepage |