How to Develop
Graphics for Web in Photoshop
Optimization is the process of fine-tuning the display quality and file size
of an image for use on the Web or other online media. Adobe Photoshop and
Adobe ImageReady give you an effective range of controls for compressing the
file size of an image while optimizing its online display quality.
There are two methods of optimizing images:
- For basic optimization, the Photoshop Save As
command lets you save an image as a GIF, JPEG, PNG, or WBMP file. Depending on
the file format, you can specify image quality, background transparency or
matting, color display, and downloading method. However, any Web
features--such as slices, links, animations, and rollovers--that you've added
to a file are not preserved.
For complete information on using the Save As command to
save an image as a GIF, JPEG, or PNG file,
- For precise optimization, you can use the
optimization features in Photoshop or ImageReady to preview optimized images
in different file formats and with different file attributes. You can view
multiple versions of an image simultaneously and modify optimization settings
as you preview the image to select the best combination of settings for your
needs. You can also specify transparency and matting, select options to
control dithering, and resize the image to specified pixel dimensions or a
specified percentage of the original size.
When you save an optimized file using the Save for Web
(Photoshop) or Save Optimized (ImageReady) command, you can choose to generate
an HTML file for the image. This file contains all the necessary information
to display your image in a Web browser.
The Save for Web (Photoshop) or Save Optimized (ImageReady)
commands are designed specifically to provide a more robust and intuitive set
of options for saving an image file for use on the Web. This includes a
refined sensitivity to file size and image color palette that is unavailable
from the Save As command. When creating graphics for Web use, the Save for Web
/ Save Optimized commands are recommended.
In Photoshop, you use the Save for Web dialog box to select optimization
options and preview optimized artwork. In ImageReady, you can view and work
with optimized images at any time in the document window.
Using weighted optimization
Weighted optimization lets you smoothly vary optimization settings
across an image using masks from text layers, shape layers, and alpha
channels. This technique produces higher-quality results in critical image
areas without sacrificing file size. With weighted optimization, you can
produce gradual variations in GIF, PNG-8, and WBMP dithering, lossy GIF
settings, and JPEG compression. Weighted optimization also lets you favor
colors in selected image areas when you generate a color table.
Image without weighted optimization (left), and with weighted optimization
on text layers and vector shapes (right)
Optimizing colors in GIF and PNG-8 images
Decreasing the number of colors in an image is a key factor in
optimizing GIF and PNG-8 images. A reduced range of colors will
often preserve good image quality while dramatically reducing the
file space required to store extra colors.
The color table gives you precise control
over the colors in optimized GIF and PNG-8 images (as well as
original images in indexed color mode). With a maximum of 256
colors, you can add and delete colors in the color table, shift
selected colors to other colors or to transparency, and lock
selected colors to prevent them from being dropped from the
Working with hexadecimal values for color
You can view colors as hexadecimal values in the Info palette. In addition,
you can copy colors as hexadecimal values to the Clipboard and paste them into
an HTML document.
Using a droplet to automate optimization settings
You can save Optimize palette settings for use on individual images or batches
of images by creating a droplet, a small
application that applies the optimization settings to an image or batch of
images that you drag over the droplet icon. You can drag a droplet to the
desktop or save it to a location on disk. When you create the droplet, you can
choose where the images will be saved. When you drag an image over it, the
droplet launches ImageReady if the program is not currently running.
Note: You can also drag a droplet
onto the ImageReady Actions palette to create an action step. Or you can drag
a droplet from the Optimize palette onto a slice to apply the optimization
settings to the slice. You cannot, however, drag a droplet from the desktop
onto a slice.
To create a droplet for automating Optimize palette
- With an image displayed in the image
window, choose a compression format and compression options in the Optimize
- Create a droplet by doing one of the
- Drag the droplet icon
from the Optimize palette onto the desktop.
The droplet is named with a brief description of the
compression settings, including file format and color palette, or quality
setting information. You can rename the droplet as you do other desktop icons.
- Click the droplet icon on the Optimize
palette. Name the droplet, choose a location where the droplet will be
saved, and click Save.
- Choose Create Droplet from the Optimize
palette menu. Name the droplet, choose a location where the droplet will be
saved, and click Save.
To use a droplet:
- Drag a single image or a folder of
images onto the droplet icon.
As the images are processed, a progress bar appears.
- Do any of the following to control
- To temporarily pause the processing, click
Pause. You can then click Resume to continue the processing.
- To cancel the processing, click Stop.
- Let the process finish on its own.
For more information on working with droplets,
Saving optimized images
When you've applied a combination of settings that achieve a balance between
quality and file size, you're ready to save the optimized image.
To save an optimized image:
- Select the view with the desired
optimization settings, and do one of the following:
- (Photoshop) Click Save in the Save For Web
- (ImageReady) Choose File > Save Optimized to
save the file in its current state. If you previously saved the optimized
file using the File > Save Optimized command, applying the command again
saves the file with the filename and Save options specified in the first
save operation. The Save dialog box does not appear.
- (ImageReady) Choose File > Save Optimized As
to save an alternate version of the file with a different filename.
- Type a filename, and choose a
location for the resulting file or files.
- Choose a Format option:
- HTML and Images to generate all files
required to use your artwork as a Web page. This includes an HTML file and
separate image files for the slices in the artwork. The HTML file includes
code for any links, image maps, and other effects in the document.
- Images Only to save your artwork with the
specified optimization settings. If the artwork contains multiple slices,
each slice is saved as a separate file.
- HTML Only to generate an HTML file but not
save any image files.
- To set preferences for saving image
files and HTML files, choose predefined output options from the Settings
pop-up menu, or choose Other to set different options.
- Choose an option for slices from the
- All Slices to save all slices in the image.
- Selected Slices to save only the selected
slices. If you select this option in conjunction with the HTML and Images
option, ImageReady or Photoshop generates the HTML code based on the
outermost bounds of the selected slices, and generates auto-slices as needed
to create a complete HTML table.
- All User Slices to save only the slices that
are user slices.
Note: You must select the desired
slices before starting this procedure.
- (ImageReady) A slice selection to save only
the slices in the selection. You must save a slice selection in order for
this option to appear in the menu.
- Click Save.
Setting output options
When you save an optimized image as a Web page, you can specify how HTML files
are formatted, how slices are named, how files are named, and how background
images are handled. You set these options in the Output Settings dialog box.