Photoshop IconOptimizing Images in Photoshop CS4

 

In order to optimize in Photoshop, the primary tool that you use is the Save For Web & Devices dialog box. This can be accessed on the PC by:

File > Save for Web & Devices

This will pull up the follow window

GIF web and device screen shot

The first thing you need to do is decide what format you want to save the image. Below is a guide to help with this decision. The options shown above are for a GIF file type. These are slightly different from that of JPG. Therefore, you will see another screen shot when we get to optimizing JPGs.

GIF vs. JPG

According to Wikipedia, the definition of GIF is as follows:

The Graphics Interchange Format (GIF) is a bitmap image format that was introduced by CompuServe in 1987 and has since come into widespread usage on the World Wide Web due to its wide support and portability.

The format supports up to 8 bits per pixel, allowing a single image to reference a palette of up to 256 distinct colors chosen from the 24-bit RGB color space. It also supports animations and allows a separate palette of 256 colors for each frame. The color limitation makes the GIF format unsuitable for reproducing color photographs and other images with continuous color, but it is well-suited for simpler images such as graphics or logos with solid areas of color.

There are several different things to consider when optimizing images for the web. The first consideration is what type of file should the image be saved. As a general rule, if your image is made up of primarily flat colors, or you need transparency, then you are probably better off using GIF. If, however, your image is made up of gradients and continuous colors like photographs, then you are probably better off using the JPG file type.

For all practical purposes GIF and PNG-8 are the same when it comes to optimization. I will only discuss GIF, but all these techniques also apply to PNG-8.

In summary, if you have an image with flat colors then you are probably better off to optimize the image as a GIF. If an image has gradients, then JPG is the way to go.

Optimizing GIF and PNG-8 formats

  1. Make sure that the dimension of the image is what you want in your web page. If not, exit the Save for Web & Device window, go into Photoshop and resize. This is a better place to resize, because you should always sharpen once you reduce a file size. This is especially true with photographs.
  2. Now that your image is the correct dimension, we can begin to optimize in Save for Web & Devices. The best thing you can do with a GIF is to limit the number of colors saved in the image. The best thing to do is to lock down the major colors in the image, then reduce the number of colors in the palette while retaining the major colors of the image.
  3. After you have reduced the number of colors, you can now reduce or turning off dithering. Dithering is an attempt to recreate colors not in the palette. No dithering will also reduce the file size.
  4. Now add a little Lossy compression (not available in png8). Watch your image to ensure that you are not losing quality.
  5. Once you are done, check the PNG 8 setting to see if you get a smaller image with that form of compression.
  6. Your image is now ready for saving.

Optimizing JPG format

As with the GIF format, you want to make sure that you have the correct size image for your web site. After this is complete, can enter Save For Web & Devices, the same way you would for a GIF. Select the JPG file type and you will get slightly different setting options, as you can see in the screen shot below.

JPG web device screen shot

First, set up your window by making sure that the "optimized" check box is check and the "embed color profile" is unchecked, which is really for printing photos. A few browsers do support color profiles but for now this is mainly for print. Additionally, make sure that you have converted to the sRGB color space with the checkbox.

  1. Start of by reducing the quality setting. This is the main way to decrease the size of a JPG. As you can see, there is no option for defining the number of colors in a JPG, like you can with a GIF. Keep an eye on the overall quality of the image as you reduce the quality.
  2. After you have the quality that you want you should add I little blur. This will reduce the size as well, but it will also reduce the quality of the image.
  3. When optimizing JPG's the lower the saturation and contrast, the better job JPG does at compressing the file. Therefore you can lower the these setting in adjustment panel inside Photoshop.

 

Photoshop can write HTML!

I didn't know that Photoshop can actually write HTML. This is done from the Save for Web & Devices window. You can change the output of the file, see screen shot below.

Save for Web & Devices Flyout menu

Photoshop CS4 for the Web, Lynda.com, Chap 5 video 02 - Optimizing a tiling background