Download Save for Web - Heidi Sandecki

Save for Web – Photoshop 6.0
It’s crucial to save any image in the correct file formats, otherwise you can
damage the integrity of your assets and can potentially create slow load times for
your web pages.
Never save your original file in any of these web formats. Always keep your
original file in Photoshop as a native file (especially if you have layers)!
Before you use Save for Web…
1) Resave the document with a new name.
2) Trash any layers you don’t need. Flatten all layers through the Layers palette.
3) Check your color space for the document. Since you are working within an RGB
color space, you want to confirm that this file is in this color mode.
Select Image>Mode. RGB mode should be checked off. If it isn’t select it.
4) Reconfirm that the image is the physical dimensions you want it to be. Select
the menu Image>Image Size. If you need to resample (change ppi) or fix the
dimensions do so here (use the tutorials for Resampling an image in Photoshop…,
and Resizing vs. Resampling if necessary).
Now you are ready to use the Save for Web…
1) Go into the File menu and select Save for Web…
If you get the below warning…go back and resample the image. (Its resolution or
physical size may be too large)
QuickTime™ and a
decompressor
are needed to see this picture.
Save for Web Dialog:
This function allows you to see how a given image will look, its file size, and
download time, prior to committing to a specific file format.
If your image isn’t tiling to show 4 different versions, select the tab at the top of
the screen for 4-up.
Seeing 4-up give you the capability to see how your image will look in various file
formats.
QuickTime™ and a
decompressor
are needed to see this picture.
Image Size
In the bottom right of the window, you should see a section labeled “Image Size”.
QuickTime™ and a
decompressor
are needed to see this picture.
If necessary, you can choose to set the dimensions using either pixel height/width
or by simply typing what percent of the original size you want your image to be.
As you adjust these numbers, pay attention to your image preview as it will update
to reflect the changes.
To the left of the Image size area, is the Quality dropdown. This is where you
control the Image Interpolation Options. (For info. on each option check the
Resizing vs. Resampling handout).
Saving as a JPEG
QuickTime™ and a
decompressor
are needed to see this picture.
If you select jpeg you’ll see a preset in a drop-down menu for: Low, Medium, High,
Very High, or Maximum. (Or use the slider just under the Quality field to make
more precise adjustments).
These options are for optimizing or lowering the quality of the image to reduce the
file size for faster image download. Be advised, if you lower this number too much,
the image will look blurry and blotchy.
Saving an image with a Quality of 95 is more than enough to prevent loss.
When you set the Quality to under 50 in Photoshop, it runs an additional
optimization algorithm called color down-sampling, which averages out the color in
the neighboring eight-pixel blocks.
If the image has small high-contrast details, setting the Quality to at least 51 in
Photoshop is better.
Optimized/Progressive/Embed Color Profile
If you were to save an image as a jpeg without checking off Progressive,
Optimized, or Embed it would be considered a baseline jpeg. This is a fullresolution top-to-bottom scan of the image.
Optimized: Creates an enhanced JPEG with a slightly smaller file size.
The Optimized JPEG format is recommended for maximum file compression.
Progressive: As a progressive jpeg comes into view as a series of scans of
increasing quality as it loads in a web page. (Baseline jpegs load top to bottom).
Progressive jpegs are better because they are faster and appearing faster is
important with how your work is being perceived by impatient users. Though
Baseline jpegs still remain the most popular, it makes more sense to use
progressive.
Embed Color Profile: Preserves color profiles in the optimized file. Some
browsers use color profiles for color correction, but only one (FireFox) can take
advantage of this feature. It’s best just to keep this unchecked.
BlurSpecifies the amount of blur to apply to the image. This option applies an effect
identical to that of the Gaussian Blur filter and allows the file to be compressed
more, resulting in a smaller file size. A setting of 0.1 to 0.5 is recommended.
Saving as GIF
Gifs are popular for simple web-based graphics because of their relatively low file
size. Be aware that they're indexed images. That is, the file contains an index, or a
palette, of all the colors in the image. In general the most a gifs file can potentially
have 256 colors. Therefore this format should be used selectively and eliminates it
from being used as a file format for photos.
Anything with large areas of solid color and minimal gradients can be saved as a
gif. Because Photoshop gives you the option to limit the color palette, you can
reduce the file size further by trashing colors in the “Color Table” area if necessary.
of a gif include reducing or eliminating any dither, adjusting the color palette
settings (perceptual, adaptive, etc) and increasing the lossy compression.
Perceptual/Selective/Adaptive/Restrictive/Custom Feature
All options can be found in the 2nd dropdown menu and are used to control the
method for generating the color lookup table and the number of colors you want in
in a color lookup table.
Perceptual:
Creates a custom color table by giving priority to colors for which the human eye
has greater sensitivity.
Selective:
Creates a color table similar to the Perceptual color table, but favoring broad areas
of color and the preservation of web colors. This color table usually produces
images with the greatest color integrity. Selective is the default option.
QuickTime™ and a
decompressor
are needed to see this picture.
Adaptive: Creates a custom color table by sampling colors from the predominant
spectrum in the image. For example, an image with only the colors green and blue
produces a color table made primarily of greens and blues. Most images
concentrate colors in particular areas of the spectrum.
Restrictive:
Uses the standard 216-color color table common to the Windows and Mac OS 8-bit
(256-color) palettes. This option ensures that no browser dither is applied to colors
when the image is displayed using 8-bit color. (This palette is also called the *web
or browser safe color palette.) Using the web palette can create larger files, and is
recommended only when avoiding browser dither is a high priority.
Custom:
Uses a color palette that is created or modified by the user. If you open an existing
GIF or PNG-8 file, it will have a custom color palette.
Normal/Interlaced
Normal: Displays the image in a browser only when download is complete.
Interlaced: Displays low-resolution versions of the image in a browser as the file
downloads.
Matte
Gif files have the advantage of allowing the background of graphic elements to
maintain transparency. The Matte feature overrides this feature by giving you the
option to specify a fill color for pixels that were transparent in the original image.
To use, click the Matte color swatch to select a color in the color picker, or select
an option from the Matte menu: Eyedropper Color (to use the color in the
eyedropper sample box), Foreground Color, Background Color, White, Black, or
Other (to use the color picker).
Dithering Method and Dither
Dithering refers to the method of simulating colors not available in the color
display system of your computer. A higher dithering percentage creates the
appearance of more colors and more detail in an image, but can also increase the
file size. For optimal compression, use the lowest percentage of dither that
provides the color detail you require. Images with primarily solid colors may work
well with no dither. Images with continuous-tone color (especially color gradients)
may require dithering to prevent color banding.
Diffusion: Applies a random pattern that is usually less noticeable than Pattern
dither. The dither effects are diffused across adjacent pixels.
Pattern: Applies a halftone-like square pattern to simulate any colors not in the
color table.
Noise: Applies a random pattern similar to the Diffusion dither method, but
without diffusing the pattern across adjacent pixels. No seams appear with the
Noise dither method.
Saving as PNG
Photoshop gives you two options when working with PNGs: PNG-8 and PNG-24.
PNG-8: Is limited to the same types of simple files that you would use for GIFs.
Sometimes using a PNG-8 over a GIF can give you a smaller file size at a nearly
identical quality.
PNG-24: Provides a much higher quality image and retains much of the original
.psd image quality and can handle transparency much better than a .gif.