Image Optimization

How to optimize images for the web:

There are three choices to save files for usage on the web:

Gif, PNG8, and JPG. To determine which one to use and when is simply the content, the individual image.

Gif and PNG8 are used for hard edges and flat color. JPG are used for photo's. Resolution for all web images is 72 ppi.

To save a images for the web: Photoshop>file>save for web and devices

The goal is watch the lower left corner of the window to make sure that the image does not get any larger then 120k and that is still a high number. The lower you can get that number the faster it will load on your web page. To see the original image and the optimize window I select two up view at the top of the window. This way I can compare and contrast the original to the new optimized version.

 Gif/PNG8:

Use the selective color setting, it will change your images color the least. Set the number of colors to 256 the maximum you can have, let Photoshop determine how many colors the image needs.
If your are concerned with file size reduce the number of colors manually, watch the preview for color shifts and posterization. Increasing the dither amount can help smooth the banding that may occur.
For most images using selective color and 256 maximum works just fine.

JPG:
Every image is different and will need for you to adjust as needed for the best results possible. Start with the medium option first at a 30% quality. This is a good base line to start with. If the images still looks soft or has a JPG artifact on it change the quality to high (60%) preset. Now split the difference (45%) between the two and look at your image in two-up mode. The lower you can take the quality percentage the smaller the file size.
Leave optimize selected, this makes the file size a bit smaller where progressive will increase it.
Make sure your watching the file size number in the lower left corner!

To create a transparent background save the file as a PNG8, using the same options as we did for the GIF file. Turn the matte option to none although it is empty make sure to tell it none or you will have a soft white edge. If you know the exact color of the background the image will be going on chose that color to place as the matte area around the image. This greatly helps smooth the edges.