Preparing Images for Online Presentations

Web Imaging tips | Save for Web command | Inserting images into Powerpoint

Web Imaging Tips

When saving or exporting files for use on the web, you need to save images in a Web-compatible file format, such as GIF or JPEG. (Native Photoshop format is not Web-compatible.) To do this you can use File > Save For Web or File Save As. Save for Web gives you the most options, and allows you to preview your image at different compression levels.

Here are some things to keep in mind when saving images for the the Web:

Photoshop's native format allows layers, but Web file formats do not. When you export a file for the Web, any multiple-layer file will be flattened. If you use File > Save for Web, Photoshop will export your GIF or JPEG as a single-layer file (combining the currently visible layers of your Photoshop file). If you use File > Save As, you may need to merge layers before saving in a Web format.
When you export images from Photoshop to a Web file format, keep a native Photoshop file as backup. This will help you if you need to modify any of the images later.
Make file sizes as small as possible while maintaining acceptable image quality.
When working on the Web, remember to think in terms of pixels (not inches). Images will appear on the Web at about the same size as they do when you are looking at them in Photoshop at 100% view.

The Save For Web Command

A good way to save images for the Web is to choose File > Save for Web. The advantage of the Save For Web command is that it presents previews of your image with different settings. You can apply different settings to different previews and compare them before you decide which settings you want to use when you save the image.

When you choose Save For Web, the following dialog box appears:

In the Save For Web dialog box, the original image appears in the upper left corner, and the others are previews. Click on one of the previews to select it. (A thin blue line appears around the currently selected preview.) You can change the selected preview's settings in the upper right area of the dialog box. The available settings change depending on whether you choose JPEG or GIF from the popup menu in the upper-right area.

The file size for each preview is shown below the preview. Compare the file sizes and display quality of the previews. In some cases either GIF or JPEG is acceptable.

In general, for color photographs and images with gradients, use JPEG format. For images or graphics with flat colors (such as illustrations and logos), use GIF format.

For JPEG format:

Choose JPEG from the popup menu in the upper-right area.

If you wish, choose one of the Preset options for defining your settings; otherwise choose the settings you want to specify from the other popup menus.
Choose Quality, either by choosing Low, Medium or High or by choosing a value between 0 and 100. A high number such as 90 will result in a very high quality image, but the file will be larger and will take much longer to download. Most images can be saved at fairly low quality and still look good on the Web.
For most purposes, keep the Progressive checkbox checked. Progressive displays the image gradually in multiple passes (usually a good idea; this gives the user the sense that something is happening).
In some cases, you may want to blur your image slightly. This won't have much effect on the quality of the displayed image but it may reduce the file size.
If the edge of your image includes some transparent pixels (if you want the edge pixels to blend with the background color of your Web page), choose a Matte color that is the same as the background color of your Web page. Otherwise, set Matte to None.

For GIF Format::

Choose GIF from the popup menu in the upper-right area.

If you wish, choose one of the Preset options for defining your settings; otherwise choose the settings you want to specify from the other popup menus.
Choose a color reduction palette. Usually Selective, Adaptive, and Perceptual work well. You can experiment and see which looks best to you.
Specify the number of colors you want the GIF image to have (the more colors the larger the file size)
Specify Dithering (choose none for smaller file size; choose diffusion if image has subtle gradations
Choose Interlaced if you want the image to start appearing more quickly (recommended).

Inserting Images into Powerpoint

To insert an image into a Powerpoint presentation, do the following:

1. Save your image in JPEG format.

2. In Powerpoint, create a blank slide where you will place your image.

3. In Powerpoint, choose Insert > Picture > From File, and choose the file you want to insert.

Insert Picture command

4. The image will appear on your PowerPoint slide. You can then adjust the size of the image within PowerPoint by clicking and dragging the handles on the edges of the image.

handles