web interactivity

Prepare an Image for the Web

1. Click on the link for the image "kkp poster.jpg." When it opens in your browser window, click on the image and drag it to your Desktop.

2. Drag the image onto the Photoshop icon (a blue square with a white "Ps") in the Macintosh Dock on your screen bottom or side.

3. From the File menu, choose “Save for Web & Devices.”

4. From the Presets pulldown menu on the top right, try all the options and examine how your choices affect the quality of the image. (For some help with these settings, check out the Tips box on the right of this page.)

5. Find the “Image Size” boxes and type in an "H" (Height) of 400 pixels.

6. Click the “Save” button. In the dialog box that follows, choose “Desktop” as the destination and “kkp-poster-edited.jpg” as the file name. Keep whatever extension name Photoshop has automatically applied (.jpg, .gif, or .png). Click on “Save”



• Only three image formats work on web pages: .jpg (JPEG), .gif (GIF), or .png (PNG).

• JPEG > Medium is the format I use most often while preparing a photograph for the web.

• When I am compressing an image that has text in it, I like a setting that is sharper than JPEG (JPEG softens the image slightly — bad for smaller letters that need to be clear.) For images that include text, use GIF > Adaptive > No Dither.

• For images that require a transparent background, I use PNG-24, with the Transparency box checked. To get the transparency to work, however, you must have the background layer in Photoshop turned off before you turn the image into a PNG.

• Note how the download size of the file (found in the bottom left corner of the main window) changes depending on what you have selected. The goal is to make the picture look as good as possible while making its download size as small as possible. No picture on a web page should ever have a download size greater than 100K.