Saving a Photo for the Web
This lesson will assume that you’ve already toned and sharpened your photo for any publication, web or print. For assistance in toning or enhancing your images, you can go to Interactive Narrratives, click on Resources & Links and do a search on Photoshop. Or you can also download an excellent tutorial from Karl Kuntz, Managing Editor of Visuals for The Columbus Dispatch, @ http://visualedge.org/lessons/.
Once you’re ready to save your photo for the web and if you’re saving the images for Xpress Online, you can always use the Xpress Droplets. But if you need to know, and you should know, how these custom Droplets work, this lesson will help you.
1. Resize your photo appropriately. Regardless of the image size, the Image Size / Document Size / Resolution should be set to 72 pixels/inch. Since, all standards monitors have a resolution of 72 pixelsl per inch, anything larger is simply a waste. You can access this option from menu Image > Image Size….
2. The schematic of sizes for Xpress Online are as follows:
| width (in pixels) | height (in pixels) | |
| [X]press Gallery | 520 (max) | 520 (max) |
| [X]press Gallery Thumbnail | 90 | 90 |
| [X]press Multimedia | 640 | 480 |
| [X]press WebTalk (old version) | 300 | 300 |
| [X]press Multimedia using SoundSlides | 598 | 448 |
| 10001.words Package | 640 | 433 |
3. A horizontal photo resized for Xpress Gallery, for example, will have the following specifications:
4. Once you resize, sharpen the photo if necessary. (Please note that you should sharpen your photo only after you've resized the image for the intended output.)
5. Choose File > Save for Web….
6. In the Save for Web (Powered by ImageReady) dialogue box, make sure that you save the file with the following specification:
7. For a file with the dimension of 520 x 345, the file size should be around 44Kb.You do not want a file any bigger than necessary on the web. The more the user has to wait for an image, or gallery of images, the less they will likely stay to even view the image. On the web, it’s all about usability.
8. Now you might be tempted to be lazy and simply use the File > Save As… option in Photoshop. By doing this, you will easily double or even triple the file size of your photo. Don’t be lazy cause your user/viewer will be. The difference of 20k in file size could be the difference of 10 seconds on a 28.8Kbps connection. This is huge.
9. Here’s a matrix of the breakdown of file type and file sizes:
| Photoshop | ImageReady (Droplet) | |
| Save As...(quality: 12) | 276Kb (01) | |
| Save As...(quality: 10) | 164Kb (02) | |
| Save As...(quality: 8) | 136Kb (03) | |
| Save For Web... ( quality: 80) | 68Kb (04) | 80Kb (06) |
| Save For Web... ( quality: 60) | 40Kb (05) | 44Kb (07) |
10. CLICK HERE for the visual results of the breakdown.