Tutorials Tutorials    
 
Basics
 
Image Maps
 
Slices
 
Rollovers
 
Animation
         
  Introduction   Introduction   Introduction   Introduction   Introduction
  Jumping   Creating   Creating   Creating   Working with Frames
  File Formats   Modifying   Modifying   Previewing   Working with Layers
  Optimization   Image Map Palette   Slice Palette   Matching Layers   Animation Palette
  Saving         Saving Animations
 

 

What is optimization?

 

Optimization is the act of balancing the display quality of a graphic with its file size. Since large graphic files can make a web page very slow to load, achieving the smallest file size possible without compromising picture quality too much is critical when developing for the web.

ImageReady helps you optimize your graphics by letting you preview and compare the results (both size and image quality) of different file compression formats and settings. You can view up to four versions of your image side by side, and select the best combination of settings for your circumstances.

 

 
  How do I
optimize my graphic?

 

To optimize your graphic, follow these steps:

1) Show the Optimize palette. Pull down the Window menu and select Show Optimize. When the palette appears, make sure that all of the Optimize options are showing by clicking on the palette's expand icon:



2) Pick which view you want from the tabs at the top of the window (Original, Optimized, 2-Up or 4-Up):



Original—displays the original, un-optimized graphic:

 

 

      Optimized—displays the graphic using the optimization settings in the Optimize palette:

 

 

      2-Up—Shows two window panes, both the original and optimized versions, side-by-side so that you can compare quality and sizes:

 

 

      4-Up—In four panes shows four views of the graphic, the original and three different optimized versions, so that you can compare quality and sizes:

 

 

 

2-Up or 4-Up is recommended while optimizing files, because you can do side-by-side comparisons of different optimization methods.

Note that each pane has information at the bottom of each graphic telling you about that optimization (file format, size, time to download, etc.)

3) Decide on some likely file formats to compare. Each file format has its pros and cons; ask yourself the following questions to help you choose an appropriate format depending upon circumstances:

  • Is my graphic a line drawing, some text, a logo, or some other sort of graphic with no color gradients? Does it have flat colors and sharp edges? (If so, think about GIF, PNG-8 or PNG-24.) Or is it a realistic piece of artwork or a photograph with continuous tones? (Consider JPEG or PNG-24.)

  • How many colors are in my graphic? (If you need to preserve more than 256 colors - like a photograph - think about JPEG or PNG-24.)

  • Is having the smallest possible file size important? (The answer is usually yes unless you are putting the files on CD and they don't have to be downloaded over the Internet. If yes, try PNG-8 or JPEG, and definitely avoid PNG-24.)

  • What kind of browsers are the potential users of the web site likely to have? (If you can't count on them to have the latest browsers, then you should avoid PNG.)

  • What kind of special features do I need? Do I need transparency? (JPEG can't do it.) Progressive graphics? (Try JPEG.) Animation? (Try GIF.) Multi-level transparency? (PNG-24.)

Combining the answers to these questions should help you decide on one or two graphic file formats to try.

4) Compare your choices. For each of the optimizations you want to try, click on a pane in your window to select it (a black frame will appear around the pane), and then set the desired optimization settings in the Optimization palette. (Be sure to leave the Original in the first pane, so that you can see what effect the optimization has on it.)

Now that you have a few file formats side by side, compare them, adjusting their settings in the Optimize palette. (As you change settings, the image will automatically update on the fly.) See which one does the best job of reducing the size of the graphic while preserving image quality. Click on that pane to select it, then click the Optimized tab at the top of the window so that you are viewing only the version you selected.

See the next lesson, Saving, to learn how to save this optimized version of your graphic.

Top of Page

Copyright © 2002, Bloomsburg University Virtual Training Help Center.
All rights reserved. This material may not be used without written permission.
Contact Dr. Mary Nicholson at mjnich@bloomu.edu