Previewing an optimized file In the Save for Web & Devices dialog, you’ll find everything you need to optimize your graphics for the Web, including multiple previews that let you test the
Trang 1Saving files for the Web
Optimization is the process by which files are
pre-pared for online viewing, within specific format,
storage size, and color parameters When
choos-ing settchoos-ings for Web output as opposed to print
output, issues of file size and the transmission of
data come into play The goal is to compress your
files enough that they download quickly on the
Web while keeping their quality as high as possible
Two main parameters that you’ll need to focus on
as you do this are the file size and the file format
(GIF or JPEG)
File size
The length of time it takes for an image to load
into a Web page is related directly to its file size
The size of the optimized file, in turn, is
deter-mined by the dimensions of the image (in pixels)
and the amount and kind of compression that is
applied to it
When choosing dimensions for an image, if you
keep in mind that most people view the Web in a
browser window that’s around 1000 pixels wide,
you can consider dimensions of 800 x 600 pixels
to be a realistic upper limit Remember also that
Web browsers always display images at 100%
mag-nification In the Save for Web & Devices dialog,
you will be able to specify pixel dimensions for the
optimized file and preview the results
The GIF and JPEG formats cause a small
reduc-tion in image quality as they apply compression,
but the resulting smaller file sizes download more
quickly on the Web, so it’s a worthwhile trade-off
Bear in mind that some types of images are more
compressible than others For example, a
docu-ment with a solid background color and a few
solid-color shapes will compress much more than
a large document that contains many color areas,
textures, or patterns The JPEG format has more
compression power than GIF
File formats
GIF and JPEG, the two file formats most
com-monly used for Web graphics, are best suited for
different types of Photoshop documents:
GIF
➤ GIF preserves flat colors and sharp edges (such
as type) better than JPEG, but it’s an 8-bit
format, meaning it can save only up to 256
colors This color restriction makes GIF more
suitable for flat graphics than for continuous-tone (photographic) images, which contain more colors
➤ For optimizing images that contain transpar-ency, GIF is your only choice, because unlike JPEG, it supports transparency
➤ You don’t have to use the full complement of
256 colors when saving a file in the GIF format
If you lower the color depth of a GIF file, you reduce its size and the number of colors it contains, which in turn enables it to down-load more quickly (The set of colors in a GIF
is called the “color table.”) The color reduction may produce dithered or grainy-looking edges and duller colors, but the necessary reduction
in file size will be achieved
JPEG
➤ Because it retains a document’s full 24-bit color depth, the JPEG format does a better job of preserving the color fidelity of continuous-tone images (photographs and the like) than GIF
➤ Another advantage of JPEG is its compression power: It can shrink an image significantly without lowering its quality When saving an image in JPEG format, you choose a quality setting; higher-quality settings produce larger files, lower settings produce smaller ones
➤ Unfortunately, unlike the GIF format, JPEG doesn’t preserve transparency
➤ Each time an image is optimized in the JPEG format, some image data is lost; the greater the compression, the greater the loss
Note: When optimizing a 16-bits-per-channel file via the Save for Web & Devices dialog, regardless
of the format, the file is automatically converted to
8 bits per channel
Don’t panic! We’ll break down the optimization steps for both formats
Trang 2
Previewing an optimized file
In the Save for Web & Devices dialog, you’ll find
everything you need to optimize your graphics for
the Web, including multiple previews that let you
test the effects of different optimization settings
To use the previews in the Save for Web &
Devices dialog:
1 Choose File > Save for Web & Devices
(Ctrl-Alt-Shift-S/Cmd-Opt-Shift-S) The dialog
opens.A
2 Click the 4-Up tab to display the original image
and three previews Photoshop will use the
current optimization settings to generate the
first preview (to the right of the original), then
automatically generate two other previews as
variations on those settings You can click any
preview and change the settings for just that
preview, or choose a different download speed
for a preview from its individual Download Speed menu.
3 From the Preview menu on the right side of the
dialog, choose a gamma value for Photoshop
to simulate onscreen (see the sidebar on page 426).★
4 After choosing settings for a GIF (see the next
two pages) or a JPEG (see pages 425–426), to test the settings for the currently selected tab
in your browser, click the Preview button or the
browser icon at the bottom of the dialog Your optimized image will open in the default Web browser application that’s installed on your com-puter Or to choose a different browser that’s installed in your system, from the menu next
to the browser icon, choose a browser name or choose Other and locate the desired browser
A Using the Save for Web & Devices
dialog, you can choose and preview the
effect of different optimization settings.
Optimization settings Preview the optimized
image in a browser (button and menu)
Download Speed menu
Trang 3
Optimizing a file in the GIF format
The GIF format preserves flat colors and sharp edges
(such as type), but it saves only up to 256 colors
You must use this format if you need to preserve
transparency
To optimize a file in the GIF format:
1 Choose File > Save for Web & Devices
(Ctrl-Alt-Shift-S/Cmd-Opt-Shift-S
2 Click the 2-Up tab at the top of the Save for
Web & Devices dialog so you can compare
origi-nal and optimized previews of the image You
can change the zoom level for the previews by
pressing Ctrl/Cmd + or -
3. Do either of the following:
To optimize the file using a preset, from the
Preset menu, choose one of the GIF options
Leave the preset settings as they are, then click
Save In the Save Optimized As dialog, keep the
.gif extension, choose a location, then click Save
To choose custom optimization settings instead,
follow the remaining steps
4 From the Optimized File Format (second) menu,
choose GIF A
5 From the Color Reduction Algorithm menu,
choose a method for reducing the number of
colors in the image (see the sidebar at right)
(A, next page)
6 Choose a maximum number of Colors for the
color table by choosing a preset value from the
menu or by entering an exact number in the field
The fewer the colors, the smaller the file size
7 Choose a method from the Dither Algorithm
menu Dithering is a process by which Photoshop
mixes dots of different colors to simulate more
colors Although the Diffusion option produces a
larger file, it yields the best compromise between
quality and file size With the No Dither option
chosen, gradients may have visible bands
Also choose a Dither percentage The higher the
dither value (color simulation), the larger the file
size (B, next page)
8 Check Transparency to preserve any fully
trans-parent pixels in the image This option allows for
the creation of nonrectangular image borders
With Transparency unchecked, transparent
pixels will be filled with the color that’s currently
THE COLOR REDUCTION ALGORITHMS
➤ Perceptual generates a color table based on the colors currently in the document, with a bias toward how colors are actually perceived
➤ Selective, the default option, generates a color table based on the colors currently in the document, for the purpose of preserving fl at col-ors, Web-safe colcol-ors, and overall color integrity
➤ Adaptive generates a color table based on the part of the color spectrum that represents the predominant colors in the document This choice produces a slightly larger optimized fi le
➤ Restrictive (Web) generates a color table by shifting image colors to colors in the standard Web-safe palette, which contains only the 216 colors that the Windows and Macintosh browser palettes have in common This choice produces the least number of colors and the smallest fi le size but not necessarily the best-looking image
With today’s improved display technology, you don’t need to choose this option
Continued on the following page
A To create a GIF file, choose optimization options in the Save for Web & Devices dialog.
Optimized File Format menu
Color Reduction Algorithm menu Dither Algorithm menu
Optimize menu
Trang 4
C This image was optimized as a GIF with Transparency checked and Matte set to black A thin black line appears along the edge of each shape.
A This image was optimized as a GIF with 32 colors
using the Selective algorithm with no Dither.
B This the same image optimized with 100% Dither.
D This image was optimized as a GIF with Transparency checked and Matte set to None The shapes have hard edges.
listed on the Matte menu Regardless of the
Transparency setting, the GIF format doesn’t
preserve semitransparent pixels
Leave the Interlaced option unchecked
9 To control how semitransparent pixels along the
edge of an image will blend with the background
of a Web page, choose a Matte option CFor the
Matte color, choose the background color of the
Web page, if you know what that color is Any
soft-edged effects (such as a Drop Shadow) on
top of transparent areas will fill with the chosen
Matte color If the background color is unknown,
set Matte to None; this will produce a hard,
jagged edge.D
Another option is to choose Matte: None,
then check Transparency and choose one of
three options from the Transparency Dither
Algorithm menu These effects will look the
same on any background Diffusion applies a
random pattern to semitransparent pixels and
diffuses it across adjacent pixels This method
usually produces the most subtle results and
allows you to set the dithering amount Pattern
applies a halftone pattern to the
semitranspar-ent pixels Noise applies a pattern similar to
Diffusion without affecting neighboring pixels
10 Optional: You can adjust the Lossy value to
fur-ther reduce the file size As the name “Lossy”
implies, this option discards some image data, but the savings in file size may justify the slightly reduced image quality
11 Check Convert to sRGB to convert the color to
sRGB, the standard profile for Web browsers
12 From the Preview menu, choose a display gamma
value to be simulated when the optimized image
is previewed (see the sidebar on page 426)
13 From the Metadata menu, choose which metadata
is to be saved with the file, such as Copyright and Contact Info This data was assigned to the file by your camera, or by you in Bridge via the Metadata panel or the File Info dialog
14 In the Image Size area, enter the desired W and
H size values in pixels for the GIF file, or enter
a scale percentage in the Percent field.
15 Follow steps 2–4 on page 422 to preview your
settings Make any needed adjustments, then click Save The Save Optimized As dialog opens
Change the name (if desired), keep the gif extension, choose a location, then click Save
Trang 5
Optimizing a file in the JPEG format
JPEG is the best format for optimizing
continuous-tone imagery (photographs, paintings, gradients,
and the like) because by saving 24-bit color, you
enable those colors to be seen and enjoyed by any
viewer whose display is set to thousands or millions
of colors Two notable drawbacks to JPEG, however,
are that its compression methods discard image data
and that it doesn’t preserve transparency
To optimize an image in the JPEG format:
1 Choose File > Save for Web & Devices
(Ctrl-Alt-Shift-S/Cmd-Opt-Shift-S)
2 Click the 2-Up tab at the top of the Save for
Web & Devices dialog so you can compare the
original and optimized previews of the image
You can change the zoom level for the previews
by pressing Ctrl/Cmd + or -
3 Do either of the following:
To optimize the file using a preset, from the
Preset menu, A choose one of the JPEG options
Leave the preset settings as they are, then click
Save In the Save Optimized As dialog, keep the
.jpg extension, choose a location, then click Save
To choose custom optimization settings instead,
follow the remaining steps
4 From the Optimized File Format (second) menu,
choose JPEG.
5 Do either of the following:
From the Compression Quality menu, choose a
quality level for the optimized image B–C(and
A, next page)
Choose a Quality value for the exact amount of
compression needed
➤ The higher the compression quality, the better
the image quality — and the larger the file size
6 Increase the Blur value to lessen the visibility of
artifacts that the JPEG compression method
pro-duces, and to reduce the file size Be careful not
to overblur the image, though, or the details will
become too soft
7 Choose a Matte color to be substituted for areas
of transparency in the original image If you
choose None, transparent areas will be changed
to white in the optimized image
C This is the image optimized as a JPEG at Medium Quality.
Continued on the following page
B This image was optimized as a JPEG at High Quality.
A To create a JPEG file, choose optimization options in the Save for Web & Devices dialog.
Optimized File Format menu
Optimize menu
Compression Quality menu
Trang 6
Note: The JPEG format doesn’t support
parency To have the Matte color simulate
trans-parency, make it the same solid background color
as that of the Web page (of course you need to
know what that color is) Click the Matte color
swatch, and enter values in the Color Picker
dialog
8 Leave Progressive unchecked
9 Optional: Check Optimized to produce a smaller
file size Note that some older browsers don’t
support this option
10 Check Embed Color Profile The newest
genera-tion of browsers can use a file’s embedded color
profile to display a color-managed image
11 Check Convert to sRGB to convert the
opti-mized color to sRGB, the standard profile for
Web browsers Note: Even with this option
checked, the conversion of image colors will
be more accurate if the embedded color profile
is included, as we instructed you to do in the
preceding step
12 From the Preview menu, choose a display gamma
value to be simulated when the optimized image
is previewed (see the sidebar at right)
13 From the Metadata menu, choose which
meta-data is to be saved with the optimized file, such
as Copyright and Contact Info This data was
assigned to the file by your camera, or by you in
Bridge via the Metadata panel or the File Info
dialog
14 In the Image Size area, enter the desired W and
H size values in pixels for the JPEG file, or enter
a scale percentage in the Percent field.
15 Follow steps 2–4 on page 422 to preview your
settings Make any needed adjustments, then
click Save The Save Optimized As dialog opens
Change the name (if desired), keep the jpg
extension, choose a location, then click Save
A This is the image optimized as a JPEG at Low Quality.
CHOOSING A PREVIEW OPTION ★ Monitor Color No gamma change Legacy Macintosh (No
Color Management)
Mac 1.8 gamma
Internet Standard RGB (No Color Management)
Windows 2.2 gamma, the most common gamma
Use Document Profi le Adjusts the gamma to
match the document
pro-fi le, if the pro-fi le contains one
CREATING AN OPTIMIZATION PRESET
To save the current optimization settings in the Save for Web & Devices dialog, choose Save Settings from the Optimize menu In the Save Optimization Settings dialog, enter a name (include the irs exten-sion), keep the location as the Optimized Settings folder, then click Save Your saved set is now available
on the Preset menu in the Save for Web & Devices dialog for any fi le