The Save for Web dialog box consists of Tabs (Original, Optimized, 2-Up, 4-Up) to control how many Optimization  Previews of the image you can see (from 1 to 4 Previews at a time). A set of Hand, Slice, Magnification , and Eyedropper Tool s, and Image Compression  Options  (Image Type, Palette, Dither Type, Compression, Colors, Dither Percentage, Transparency , Matte , Interlaced, and Web Snap ) are included.  Output Settings, a Color Table, Color Table Options , Image Size, Magnification Level, Info Bar, and Info Bars at the bottom of each Preview Window are also included.  We will cover the Slice Tool  and Output Settings later in the manual so focus your attention on the other features of this dialog box for the time being.

Save For Web dialog box

Preview Windows
Select from Original, Optimized, 2-Up, and 4-Up to see various versions or your image in the Preview Windows.  You’ll be applying various compression and file-type settings to your image.  Photoshop  gives you a real-time preview of what the image looks like with a particular set of compression options.  {Click} on the 2-Up Tab.  Two Preview Windows result, one titled “Original” in the Info Bar at the bottom, which includes the File Size, and one titled with the currently selected Image Compression  options, including File Type, File Size, Projected Download Time, Dither percentage, Palette, and Number of Colors.  Depending on your current Image Compression options the new version of the image should be dramatically smaller than the native Photoshop version.

compression Options
Photoshop  has numerous Compression  Options  you can apply to an image to prepare it for the Internet.  Select from a list of pre-set Compression Options  by selecting Settings which include GIF, JPEG, and PNG variations.  At this point PNG is not recommended because the file format hasn’t yet been widely supported by the browsers.  There are a few things to consider when selecting an appropriate compression option:

• Nature of the Image: Solid Colors, Sharp Edges, Photograph

• Target Audience Bit-Depth:  8-bit display or higher?

• Target Audience Bandwidth: Low, Medium, or High?

If the image is made up of predominantly solid colors and sharp edges, such as the image we are working with, then GIF is the best format because file size will be significantly smaller than using JPEG.  JPEGs are 24bit images with over 16 millions colors and are much more suited to Photographic images which tend to be made up of a wide variety of colors, tones, and little, if any, patterns.

Select each of the pre-set GIF Compression  Options  and examine the image and the image size.  When you can, it’s advisable to use the Web Palette to ensure that people using 8-bit displays see the image as you do.  More and more users have 24-bit color displays so Web Safe colors are becoming less of an issue than they were in the past.  We will, however, employ them in this example to see how they work.  Select GIF Web Palette from Settings.  You’ll notice that certain colors shift slightly from the original.  In many cases, when you are creating images of this type that are not logos these color shifts are acceptable.  However, your client may not agree to slightly different colors for a logo.  At present, if you examine the Color Table you’ll notice that there are only 26 colors in the compressed version of the image.  To adjust these settings, such as adding more Web Safe colors you’ll have to build Compression Options  yourself. 

Building Compression Options
If none of the pre-set Compression  Options  is useful to you, you can customize options by using the drop-down settings, which include Image Type, Palette, Dithering , Lossy, Colors, Matte  Color, Transparency , Interlaced, and Web Snap .

Compression  Controls

Make sure you {Click} the Preview Window to make it active.  Select GIF from the Image Type drop-down menu.  Select Web from the Palette drop-down menu.  For Dithering , select No Dither.  Feel free to experiment with the other settings to view the effects on your image.  For Lossy select 0 by using the slider.  Drag it up and down and see the effect on the image and the file size.  Experiment with Colors and examine the effect on the image and the file size.  Select Auto when you have finished.

Again, you’ll notice that some of the colors, particularly the color of the blue sash have shifted in tone.  If this isn’t a concern you can {Click} OK and save your image.  However, we want to make the sash in the web image as close as possible to the original.  Select the Eyedropper Tool  and sample the blue color in the original image.  Make sure you select the GIF Preview Window to reactivate it.  {Click} the Add Eyedropper Color icon at the bottom of the Color Table.

The blue elements return to their original color.

Make sure the settings are as follows: Gif, Web, No Dither, and Auto for Colors.  The image should be from 3k to 4k in size.  {Click} OK to save the image at the default output settings.  Photoshop  automatically retains its current name and adds the appropriate extension, .gif. 

Compressing Photographic Images
Photographic images and images with smooth color blends and transitions are better compressed with JPEG compression.  Before we create our custom logo, we’re going to optimize an image of a Japanese Torii gate.  Open Miyajima from the chapter008 folder.  The gate will become an element in a design we will create later.  Resize the image so it’s 200 pixels across and 267 pixels high.  Save it as a Photoshop  file and title it shrinegate.  Remember it’s essential to save and keep the source or original file in case of further changes.

JPEG Compression
Select File/Save for Web.  Using the compression settings we used for the travelogo image isn’t practical for this type of image.  Make sure you select GIF, Web, No Dither, and 256 Colors for the image.  Notice the sky is now made up of about three colored stripes.  The smooth transition from dark blue to a very light blue is entirely lost.  Even if you select Diffusion as a Dithering  option the transition remains uneven and the image looks more like a painting rather than a photograph.

GIF compression isn’t suitable for
most Photographic Images.

Change Image Type to “JPEG.”  Because JPEGs use a 24-bit color palette, the Color Table is empty.  Options  change to pre-set Levels  of Compression  (Low, Medium, High, Maximum), Progressive, ICC Profile, Optimized, Quality, Blur , and Matte .

Compression Levels
Photoshop ’s preset JPEG compression settings contain particular Quality values.  Quality refers to the amount of compression placed on the image.  The lower the number, the less the Quality, the higher level of compression, which makes for smaller file sizes.  You will have to make the decision.  You will have to decide at which point does image Quality override file size.  Select Low.  The Quality setting changes to 10.  You’ll notice small blots or artifacts along the edge of the ttop of the gate.  Select the other Compression  settings and examine the image.  Use the Quality slider for more control and examine the Quality of the image and the change in file size.  There can be a large variation in file size from the lower settings to the higher, but very often, you’ll find a range of 20 – 40 in terms of Quality usually does well.

Checking Progressive forces browsers to display a low-resolution or partial version of your image.