|
 Photoshop provides a multitude of controls and settings and options for preparing images for the web.
Before you start, however, realize that in the world of the CS2 applications, the world is mostly broadband, and
bandwidth limitation regarding compression of images is slowly becoming a thing of the past. With that said, there’s still
a noticeable difference in the time it takes to load a page with “uncompressed” images compared to dramatically
compressed images. This is the surefire, always-work method.
Material from this article was excerpted from the book Adobe Creative Suite CS2 Workflow, from O'Reilly Media (digitalmedia.oreilly.com), published in December, 2005. © 2005, O'Reilly Media, Inc., all rights reserved.
|
|
| STEP 1 |
Open the Image |
In Photoshop, open the image you want to use and choose File > Save for Web. The image will appear in the Save for Web dialog box with the compression that was used last in the dialog box, as shown in the Figure above. |
| STEP 2 |
Choose the File Format |
If necessary, choose JPEG. (There are few benefits to GIF and PING that aren’t outweighed by the universal acceptance of JPEG files in web software.) |
|
| STEP 3 |
Adjusting the Size |
Note that the size you’re seeing the image is the size it will appear on the web page. Sometimes, especially with digital cameras, images can appear quite large in the Save for Web dialog box. If you want to change the size of the image, click the Image Size tab, shown in the Image Aboves. If you want to change the image size, enter a different number in the Width or Height fields (the other field will update automatically) and click the Apply button. The image will be displayed at the new size. |
|
| STEP 4 |
Comparing the Original to the Compressed Version |
To compare the current "compressed" image with the original, click the 2-Up tab at the top of the dialog box. This will allow you to see the original image compared to the compressed image. The compression in the figure above is set to JPEG Low so that you can easily tell the difference between the original and the compressed image. Depending on the image, high levels of compression might not make much of a visible difference. |
| STEP 5 |
Save the Image |
Once you’re happy with the compression settings, click the Save button. |
| STEP 6 |
Save Optimized As |
In the Save Optimized As dialog box, set the location and the name. Be sure the file ends with .jpg if you’ve chosen JPEG
as the file type.
When you save the original Photoshop file, it remembers the settings, location and name of the Save for Web file you’ve
saved, so if you update the file, you can hop into Save for Web and click Save to quickly update your web-ready image. |
|
How do I prepare images for the web? » By Jennifer Alspach
