Adobe Education

Adobe Web Tech Table of Contents:

Lessons revised for CS2

Lessons revised for CS

Original lessons

Student working on a computer

Unit 5: Introduction to Graphics

Lesson 5.4: Photoshop Image and Color Basics

Optimizing Images Using Save for Web

We'll talk about other ways to optimize images for the Web when we get to the Graphics 2 portion of the curriculum, but for now, the last option we will discuss is using the Save for Web file option. There are many options and multiple steps involved in using the Save for Web option; let's take a look.

The Save for Web Window
Optimizing JPEG Images
Optimizing GIF Images

The Save for Web Window

To begin the process of saving a file for the Web, make the following menu selections:

File > Save for Web...

Notice the four tabs at the top of the Save for Web window (see Figure 5.4-2):

Original -- This tab displays the original image, including the filename and file size. The original image is not optimized.
Optimized -- This tab displays the image with current optimization settings. Information provided includes file format, optimization settings, file size, and projected download time, given the identified modem speed. The projected modem speed can be changed by opening the Preview Menu Control Button (located at the upper right of the preview panes) and selecting the desired modem speed.
2-Up -- This tab displays the original image and the optimized image side-by-side for comparison purposes.
4-Up -- This tab displays four image previews. Various optimization settings can be selected and compared in this tab.

Also notice the Image Size tab in the lower right quadrant of the window. Photoshop allows the image size to be changed from within the Save for Web window. The options available in the Image Size tab are similar to those in the Image Size dialog box discussed previously.

Photoshop Save for Web Window

Figure 5.4-2: Photoshop Save for Web Window

Demonstration or Practice Activity

In Photoshop, open one of the .jpg files from the Image Thumbnails page.
Make any adjustments to it you like regarding image size, color depth, etc.
Select File > Save for Web.
Select the Original tab to see the original image and its relevant information.
Select the Optimized tab to see the optimized image and its relevant information.
Select the 2-Up tab to see the comparison of the original and the optimized image.
Finally, select the 4-Up tab to see the original image and three optimized images, each using a different optimization. How do the images differ?
Click the Cancel button to exit the Save for Web window without saving.

Optimizing JPEG Images

There are specific optimization settings available for JPEG images, the most important being the Quality setting. Photoshop provides several quality presets accessible via the Settings drop-down field:

JPEG Low -- This preset sets the image quality to 15.
JPEG Medium -- This preset sets the image quality to 30.
JPEG High -- This preset sets the image quality to 60.

Additional settings are available in the manual definition area of the Settings section (see Figure 5.4-3). To manually set the quality:

Select the Quality field.
A slider will appear. Move the slider to the desired quality setting. It is important to note that the Low setting has a range from 0 to 30 on the slider; Medium has a range of 30 to 60; High has a range of 60 to 80.
Clicking the drop-down arrow next to the Compression Quality field (area where the words Low, Medium, etc. appear) will produce one additional option, i.e., Maximum, which ranges from 80 to 100 on the quality slider.

Figure 5.4-3: Save for Web JPG Optimization Settings

Demonstration or Practice Activity

In Photoshop, open one of the .jpg files from the Image Thumbnails page.
Select File > Save for Web.
Select the image option to the right of the original image.
Select the JPEG Low setting from the preset options.
Select the image option just below the original image.
Select the JPEG Medium setting.
Select the image option below and to the right of the original image.
Select the JPEG High setting.
How are the images different? File size?
Select the JPEG Medium image and use the Quality slider to see the difference in the image as you move the slider back and forth.
Click the Cancel button to exit the Save for Web window without saving.

Optimizing GIF Images

Photoshop has several available preset settings for optimizing GIF images (see Figure 5.4-4): GIF 128 Dithered, GIF 128 No Dither, GIF 32 Dithered, GIF 32 No Dither, GIF 64 Dithered, GIF 64 No Dither, and GIF Web Palette. Each of these preset settings uses the Selective palette by default, except the GIF Web Palette option, which uses the Web palette. As with the JPEG settings discussed above, each of the GIF settings can be manually set. For instance, the level of lossy compression (not used in the presets) can be set using the Lossy slider. Notice that the number of colors can be changed here as well as in the Indexed Color dialog box discussed previously.

Figure 5.4-4: Save for Web GIF Optimization Settings

The Web Snap option determines how to reduce colors used in the image via the Color Table. The Web Snap range goes from 0%, which indicates the current color reduction method is being used, to 100%, which indicates that the color reduction will involve only those colors within the Web safe color palette.

Demonstration or Practice Activity

In Photoshop, open one of the .jpg files from the Image Thumbnails page.
Select File > Save for Web.
Note the three optimized images created by Photoshop. What are their settings? How do they look in terms of quality?
Notice the Color Table that shows the colors actually used in the image.
How many colors appear in the Color field? More than in the Color Table? If so, what would you do?
Make adjustments by choosing the various GIF preset options.
Adjust the palette being used. How does that impact image quality?
Adjust the compression level. How does that impact image quality?
Make adjustments to the number of colors. How does that impact image quality?
Make adjustments to the dithering. How does that impact image quality?
Make adjustments to the Web Snap field. How does that impact image quality?
Click the Cancel button to exit the Save for Web window without saving.