Optimizing Web Graphics in ImageReady
1.0
Creating web images is more
than saving files out to .GIF or JPEG formats.
Due to download times, it
is important to balance the concern for image quality with the concern for file
size. Low image quality will detract from the web page. If the file size of
the image is too large, people viewing the page over a modem connection will
tire of waiting for the image to load, regardless of the quality. A file size
of under 30K is very desirable if the image quality is acceptable.
Adobe(R) ImageReady(TM)
1.0 optimization features provide a variety of settings to balance file size
concerns with image quality. Additionally, each setting can be previewed before
saving the optimized image.
JPEG or GIF
JPEG: As a general
rule, photo quality images are usually saved as JPEG format. This is a file
format with a high level of compression and options to save up to millions of
colors. The quality selections (low-maximum) determine the balance between quality
and file size. Low or medium quality are often adequate for web pages.
GIF: As a general
rule, graphics with many areas of solid color and lesser total colors are best
saved as GIF. For example, those used for buttons, icons, bars, graphic cartoon
images. It is also often better for images that contain text. GIF images have
indexed color which means a particular palette of color is selected to display
the colors in the image. The maximum number of colors in the palette is 256.
Some images will display with acceptable quality even if their palette palette
of color selections is reduced. This also reduces the file size further. (i.e.
Auto color, 128 colors, 64 color, 32 color, 16 color, 8 color, 4 color, 2 color)
ImageReady 1.0 has similar
features to Photoshop such as Image > Image Size which will allow you to
resize images. It has some Filters which you can apply to images. It has text
tools and layers to allow you to add text to images. It is good a batch processing
images and creating GIF animations. In Photoshop 5.5, the ImageReady tools are
merged into the product.
Practice Using ImageReady
1.0 to Optimize Images
Exercise 1: Practice
Optimizing a Photo Image
- Start the program: Select
ImageReady 1.0 from the Start Menu or Double click the ImageReady icon on
Macintosh.
- File > Open.
Choose the sample Photoshop file. (Ducky.psd is a good choice)
- If the Optimize Palette
is not visible, select Window > Show Optimize
- Try a variety of settings
in the Optimize Palette
|
For JPEG:
Choose Maximum,
High, Medium and Low pop-up settings or drag the Quality slider
to a setting of your choice. Optimized and Progressive should be
unchecked, as they are not suppored in all web browsers.
|
 |
|
For GIFS
Choose Perceptual,
Web, or Adaptive
- Adaptive
is a palette sampled from the image.
- Perceptual
highlights colors seen by the user.
- Web
uses a standard 216 colors that are cross-platform, cross-browser
compatible. (web safe colors) because Macintosh and Windows computers
each have their own system color palette.
Choose the fewest colors that display your image properly (fewer
colors = smaller file size) Auto, 256, 128, 64, 16, 8,4, or 2 colors
Dither selection:
Blending of nearby color pixels to make up for less colors. (0-100%.)
Choose 100% for our sample image.
|
 |
- Preview the Optimized
Image: On the Image Window, click the Optimized Tab next to the Original
Tab to preview the Optimized version of the Original.
- Note the file size
change for the optimized image at the bottom of the window. (For Example
~180/18.98K shows that the original is 180 K and the optimized is only
18.98 K)
- If you don't like the
preview, click the Original Tab and change settings in the Optimize Palette.
- Click Optimize Tab again
to see new Preview.
- Compare the Original
to the Optimized side by side:
Drag the optimized tab with the Alt key pressed (option key on Mac) to get
a separate window to compare the view of the images (original vs. optimized).
- Click on the Zoom tool
(magnifying glass) in each view to see the difference in quality. Double click
the Zoom tool in the floating tool bar to return to 100%
- When you are happy with
the file size and the quality of the image, select File > Save Optimized
As and give the file a new name with appropriate ending. This will leave
your original file unaltered.
What is your best quality
and file size combination?
See Exercise
1 Sampler for possibilities.
Exercise 2: Practice
Optimizing a Graphic Image.
- Start the program: Select
ImageReady 1.0 from the Start Menu or Double click the ImageReady icon on
Macintosh.
- File > Open.
Choose the sample EPS file.(i.e.GetGearsTurning.eps which comes with the program)
- Choose Anti-alias
to soften the jagged edges of the image. (or hard-edged to leave it as is.)
- Choose Image >
Image Size. Type in 60% in the Percent setting to reduce the image physical
print size.
- Choose Window >
Show Optimize to view the Optimize Palette Choices.
- Choose Settings in the
Optimize Palette.
- For GIFS, Try a variety
of settings which include a mix of GIF autocolors, 256, 128, 64, 16 colors
with Perceptual, Web Adaptive all dither 0%
- For JPEG: Try Maximum,
High, Medium and Low settings.
- On the Image Window,
click the Optimized Tab next to the Original Tab to preview the Optimized
version of the Original.
- If you don't like the
preview, click the Original Tab and change settings in the Optimize Palette.
- Click Optimize Tab again
to see new Preview.
- Compare Side by Side:
Drag the optimized tab with the Alt key pressed (option key on Mac) to get
a separate window to compare the view of the images (original vs. optimized)
- Click on the Zoom tool
(magnifying glass) in each view to see the difference in quality.
- When you are happy with
the file size and the quality of the image, select
- File > Save Optimized
As and give the file a new name with appropriate ending.
What
is your best quality and file size combination?
See Exercise
2 Sampler for possibilities.
Creating an Automated
Processing Droplets to batch process images
- Choose File > Open
to open the image with settings you would like to save for use in other images.
- Choose Window >
Show Optimize to make the Optimize palette available.
- Click the Create button
on the optimize palette. A file name will appear with the description
of the settings.
- Save it under this name
to the desktop or writeable area on the computer.
- Drag files over the droplet
to apply the settings automatically. If you have a group of images select
all the images and drag them over the droplet.
- Note: This feature will
work best on home computers/office computers where security will not interfere
with the droplet running properly.
Creating a GIF animation
- Choose File > Open
and select the layered image you wish to animate.(Photoshop images work well.)
(i.e. LogoAnim in the Tours folder).
- Select Windows >
Show Animation
- Select Windows >
Show Layers
- Select the layer you
wish to move in the Layers palette.
- Click the Move tool
(looks like a diagonal arrow in the floating toolbar)
- Drag the item in the
layer you wish to move.
- Click the New Frame
icon in the animation palette
- In the same layer, move
the same item to a new location with the move tool.
- Select Tween from the
animation palette. Fill in the number of frames you want to create, click
position if you want the item to move from the 1st location to the second
or check opacity if you want the item to appear.(0% -100%)
- In the Animation Palette,
select set delay for all frames. Set a time (0.15 or higher to slow
the animation down.)
- Click the play button
in the Animation palette to view the animation in the open window. Click stop.
- Click Save Optimized
As GIF.
- Close the Photoshop file
without saving to save the layers and original image..
Note: ImageReady 1.0 is
no longer sold separately. It was combined into a new release of Photoshop 5.5
|
