JavaScript EditorBest javascript editor debugger     Ajax website 
↑


Main Page

Previous Page
Next Page

The Save for Web Command

Both Adobe Photoshop and Adobe Photoshop Elements offer the awesome Save for Web command. It lets you visually compare the original image with up to three versions that you can optimize while keeping an eye on any resulting savings in file size and download time.

To use Adobe's Save for Web command:

1.
Create your image.

2.
Choose File > Save for Web. The Save For Web window appears.

3.
In Photoshop, click the 2-up tab to see one optimized version or the 4-up tab to see three. Photoshop Elements always shows a single alternative.

4.
Click an optimized version, if necessary.

5.
Choose the desired format.

In general, images that have been created on a computer, including logos, banners, line art, text, and any graphic with large areas of a single color and sharp detail should be saved in GIF or PNG-8 format (Figure 5.5).

Figure 5.5. Here is part of the Save for Web box that shows the original image (upper left) and three possible compressed versions. This image has a lot of flat color, as well as text, which should be kept sharp. Note how the GIF format (lower left), compresses the image the best, to just over 8K. JPEG at high quality is huge. At medium quality, it's big and ugly.


Images with continuous tones, like photographs, should be saved in either JPEG or PNG-24 format (Figure 5.6).

Figure 5.6. The GIF compression leaves banding in the photograph (bottom left). The two JPEG options on the right are smaller and better quality.


6.
Adjust the additional settings that appear until you get the smallest file possible with an acceptable quality.

7.
Click OK in Photoshop Elements or Save in Photoshop. Choose a directory and name the new file. It will automatically carry the extension of the selected format (and thus normally will not replace the original image).

Tips

  • Remember that your main objective is to get the smallest file size possible while still maintaining acceptable image quality.

  • Images should be created in RGB mode, not CMYK (which is for print).

  • If you're not sure which format to choose, compare two optimizations and see which format compresses better while leaving the image at the best quality.

  • PNG is a powerful lossless format that can be used for both computer-generated and "natural" color images. It is often better than GIF but not quite as good as JPEG. Unfortunately, Photoshop is probably not the best tool for creating PNG images, as its compression algorithms aren't as tight as they might be. Fireworks (formerly from Macromedia but now also from Adobe) is reportedly much better at saving in PNG format.

  • If you have an image with both types of content, you can either slice it into distinct chunks and compress them separately (and then reassemble them with a borderless tablesee page 227) or you can just use a single format and let it do its best.

  • The Save for Web command creates a new, independent image and leaves the original image intact. The exception, of course, is if you save the new image with the same name and extension as the old.

  • Only an image's visible layers are saved in the optimized version.



Previous Page
Next Page


JavaScript EditorBest javascript editor debugger     Ajax website 
→