If you have Photoshop version 5 or greater, you have the ability to use Photoshop’s “Save for Web” command. This handy feature gives you to ability to save a copy of your image that is optimized for use on the Web. By doing this your image file will be as small as possible, and that the image will use only Web-safe colours (if desired). The “Save for Web” feature can produce GIF, JPEG, or PNG format images.

Using Save for Web

When your image is ready to be put onto your web page, select “Save for Web”… from the File menu. The “Save for Web” dialog appears:

This dialog box allows you to tell Photoshop how you’d like to optimize your graphic for the internet. You have the ability to select the file format to produce (GIF, JPEG or PNG), what size palette you’d like to use, how to cut down the colors to fit the chosen palette size, how much to dither the optimized image (if at all) and how much image quality to sacrifice in order to produce a smaller file size.

Image views

You will see four tabs above the image view pane on the left side of the screen. These options allow you to view the original image, the optimized version (this is the default), the original and optimized versions side-by-side (“2-Up”) and the original, optimized and two variations on the optimization all together (“4-Up”).

You can use the Zoom tool to zoom in and out of the image; the Hand tool to move the view around; and the Eyedropper tool to select a color from the image which can be used by various color options on the right of the dialog.

Presets

There are many options in the Save for Web dialog, and the choices here can be quite bewildering! Fortunately, there are lists of presets you can choose from to make it easier. Select the Settings: drop-down list, which is located just below the Cancel button, to bring up the list of presets

Three basic image formats exists in the presets – GIF, JPEG and PNG. The rule of thumb is to use JPEG’s for photos and GIF’s for all else. For a full guide on choosing the right image format.

Optimizing GIFs

If you’re creating a GIF you will want to start off with a preset such as GIF 32 Dithered, which works well for most GIFs. From there you can fine-tune the optimization to suit your needs.

Colours

This is where you choose the size of your GIF palette. A palette of 32 colors is often sufficient for web images, but if your image has loads of detail and looks too fuzzy/blurry/banded with 32, up it to 64, 128 or 256. If your image has very few colors in to start with, or doesn’t look too bad with fewer colors, select 16, 8, 4 or even 2! This will make the GIF file size smaller.

Optimizing JPEGs

If you’re creating a JPEG you will want to start off with a preset such as JPEG Medium, which typically works well for most JPEGs. From there you can fine-tune the optimization to suit your needs. Some of the important optimization options are as follows:

Quality

Two ways to alter the compression quality include the Low/Medium/High/Maximum list (for quick access) and the Quality slider (for fine control). The lower the quality setting, the more blurry and bitty the JPEG will appear, but the resulting file size will be smaller.

Progressive

A progressive JPEG is similar to an interlaced GIF. The image loads gradually on the Web page – a low res image first and then the full, high-resolution image. Again, this is great for keeping your viewers on slow modems from getting bored, but it does mean a slightly larger file size. Please note that older browsers don’t support progressive JPEGs.

Matte

If your Photoshop image has transparent areas, you can fill them with a specified matte color with this drop-down box.

Optimizing PNGs

Your options for optimizing a PNG-24 are much the same as those for optimizing a JPEG. Similarly, the options for optimizing a PNG-8 are very similar to those for optimizing a GIF. See the GIF and JPEG sections above for details.

And, if you really can’t be bothered…
…you can always allow Photoshop to optimize the image for you! Select the little arrow just to the right of the Settings… box and select Optimize to File Size.

In the dialog that pops up, choose Auto Select GIF/JPEG then enter your desired file size. Click on OK and Photoshop will do the rest for you! If you’re not pleased with the results you can tweak the settings as described in the sections above, or just choose a slightly larger file size and try again.

Saving the image

Once you’re happy with your optimized image, click OK to save it to disk. The file saved will be a copy of your original image, unless you specifically overwrite the original with the optimized file.