http://inobscuro.com/tutorials/optimizing-images-for-web-35/
Optimizing images for web
I noticed how many people don't optimize their images properly, which results in extremely slow loading time. When you intend to publish your images online, you have to comprimise the quality — just face the fact you cannot use a 100KB image on a website layout. It's not fair to your visitors.
This tutorial will explain in detail how to use Photoshop's Save for web... option.
Facts about image formats
There are many image formats available, but only a few work on web. They differ in some important properties, and you should learn how to use them best.
There are two kinds of image compression, lossy and lossless.
Lossy compression means once you decompress the compressed data, you will not get the exact same image as the original. However, this will only be visible at a closer look. Lossy compression is good for web, because images use small amount of memory, but can be sufficiently like the original image.
When you decompress a lossless image, you will get exactly the same image as the original. This compression uses greater amount of memory, so at times it may not be good for web.
JPEG
JPEG is a format name, .jpg is the extension for it. This image type is lossy, and you can control the compression level in image editors.
It is good for saving images with millions of colors, like photographs, drawings with many shades, images containing gradients etc.
GIF
This format is a bitmap, which means it's a grid made of tiny pixel squares. Data about every pixel is saved (so it's lossless), and you can save up to 256 colors. Pixels may also be transparent.
GIF may contain more than one frame, so it can be animated.
Since image programs can control the exact number or colors stored in a particular image, it is a good format for saving images with less colors, like charts, small graphics (bullets, website buttons), images containing text and other important details, flat-color drawings etc.
PNG
This format was created to become the new and improved GIF, because GIF was patented, and thus not free. PNG has greater color-depth than GIF, it can store partial transparency, and can achieve greater compression.
It's best to save images in this format when it's both needed to preserve transparency and large amount of colors, or partial transparency. Since it's a lossless format, these images are often not small enough for displaying on the web.
Saving images for web
Option for exporting images for web is found under File > Save for web... — other graphic editors must have something similar, probably under File > Export.
Saving images with many colors
Original image saved at 100% quality [171KB] 1. Choose File > Save for web... 2. Since it's a photograph, choose JPEG. 3. You can check the option Progressive if you like, it's only difference is how the loading will look like. Progressive images first appear blurry, and then become clearer as the image loads. Non-progressive images load line-by-line. 4. First choose quality level, High if the image will be visible, Medium or Low if it's meant as a background. 5. To have more control over the quality, use the slider or enter number in the field Quality 6. Look at the file size and estimated loading time displayed in the lower-left corner while adjusting settings. At the same time, look at the image to decide on what quality looks good enough. * If it's a background, make sure file size is under 5KB, up to 2KB would be better. * If the image is a layout header, up to 40KB is acceptable. * If it's an image to be displayed on the page, 20-30KB is reasonable, depending on dimensions. * Artworks may be saved in better quality, since people who will look at them already expect to see large images. 7. Once you have found the perfect balance between quality and compression, click the button Save

Image saved at 60% quality [42KB]
The image above would load in about 8 seconds on 56kbps connection. Its quality is not the best, some areas appear blurry, but it's still good enough for web purposes, and we used 75% less memory than before. This is how images with lots of colors should be saved.
Saving flat-color images and charts
Original image saved in JPEG at 100% quality [177KB] 1. Choose File > Save for web... 2. Since it has less colors, choose GIF. 3. If the image contains empty (transparent) pixels, make sure Transparency is checked. 4. Select the number of colors — try to make the number the smallest you can, while at the same time the image looks decent. 5. If the image is not in the main focus (ie. background) try adding some Lossyness by dragging the slider to the right. This will reduce the file size. 6. Once you have found the perfect balance between quality and size, click the button Save
Image saved in GIF, 8 colors, 50% lossy [25KB]
The above image would load in about 5 seconds on 56kbps connection. If you take a closer look, you'll spot some differences, but the image still looks good enough to be a background — what is more important, it's only 15% of the original file size!
Comparison of formats
If you have any doubts, take a look at this table. Filesizes are shown under each thumbnail. Graphic type | JPEG | GIF | PNG-8 | PNG-24 | Single color |
378 bytes |
156 bytes |
588 bytes |
809 bytes | Anti-aliased text on a solid background |
1876 bytes |
566 bytes |
1015 bytes |
1791 bytes | Anti-aliased text on a transparent background | no transparency |
365 bytes |
867 bytes |
1538 bytes | Gradient |
742 bytes |
2331 bytes |
1072 bytes |
1299 bytes | Flat colors |
3006 bytes |
964 bytes |
1237 bytes |
2346 bytes | Flat-color motive on transparent background | no transparency |
784 bytes |
1105 bytes |
2007 bytes | Full-color motive |
2942 bytes |
2662 bytes |
2270 bytes |
4847 bytes | Full-color motive on transparent background | no transparency |
2373 bytes |
2333 bytes |
5211 bytes | Animation | no animation |
16086 bytes | no animation | no animation | Photo |
4208 bytes |
6995 bytes |
7521 bytes |
23810 bytes |

http://www.rdesignonline.com/design/photoshop-save-for-web-explained/

Photoshop “Save for Web” explained posted by Raffi Photoshop Beginner June 7th, 2007
In a recent design post, I discussed different file types and how to know what type to use for your Photoshop file. If you know you are using your file in a low, resolution, on-screen capacity (for web or email) you should be using Photoshop’s “save for web” feature.
I’ll be explaining Photoshop’s “save for web” feature in detail here.
This is a tutorial for beginner level users of Photoshop. I am using Photoshop CS2, a.k.a. Photoshop 9.0.2.
Assuming you just made a great document in Photoshop and it is unsaved, I would first encourage you to save the file as a .psd so future changes can be made to the layers and blending modes. If you save only as a .jpg or .gif file, you will not be able to edit the layers of the file anymore.
After you save as a .psd, choose File – Save for Web from your menu. The Save for Web window appears. Here is my window, and because I have used it before the default options that appear may not be the same as yours:

Images saved for use on-screen, such as images on the web or perhaps a logo embedded in an email, are typically low resolution and have small dimensions. (If you place a 37-inch wide image on a web site, no one will be able to fit the whole image on their screen at one time — unless their PC is hooked up to a 54 inch flat screen monitor, but that’s not usually the case.) If your image is just slightly too large to view in this window, and that is on purpose, you can use the hand tool on the top left of the Save for Web screen to bring another area into view. Select the Hand tool (or hold down the spacebar), and drag in the view area to pan over the image.
Notice across the top left of the Save for Web window their are 4 tabs. If you select the optimized tab and the preview of your image is HUGE and would not be appropriate for your usage, you should double check the image size before saving. You also have the option of resizing the image here. In the right-hand middle of the Save for Web window, click the “image size” tab, highlighted below.

Let’s talk about what you see on this tab.

I am being shown (in pixels) the size of my smiley face file.
I have the option to change the size of the file by lowering or raising a percentage or adding and removing pixels. I can keep the proportions locked or I can change the width and height independently of each other.
Next, under Quality, I can choose an interpolation method. Most users skip this because they do not understand it. That’s fine. But Photoshop’s Help will tell you: When an image is resampled, an interpolation method is used to assign color values to any new pixels that Photoshop creates, based on the color values of existing pixels in the image. (Pixels are added or deleted based on a computerized mathematical equation.) In the General Preferences dialog box, you can specify which default interpolation method to use whenever you resample images using the Image Size or transformation commands. The Image Size command also lets you specify an interpolation method other than the default. Bicubic Sharper generally produces better results when you are reducing image size.
Now that your image is sized correctly, you need to decide what file type to save as. That is done above the image size tab in an area that looks like this:

My previous post: .gifs, .tifs, and .jpgs Oh My! Using the correct file types in Photoshop can help with this a bit. Gifs are often used for line art, vector items and text heavy items. JPG is a better choice when you have many colors, gradients or a photograph. WBMP is the standard format for optimizing images for mobile devices, such as cell phones. WBMP supports 1bit color, which means that WBMP images contain only black and white pixels (not shades of grey). PNG produces much larger files than JPEG format, however it can preserve up to 256 levels of transparency in an image. I am going to focus on .jpg and .gif files because those are the most commonly used files.
Under the word “Preset” is a drop down box. You can easily switch between .jpg and .gif here and see which file type looks better for your artwork. When checking to see which looks better, start with the highest file settings first to easily tell if you want a .gif or .jpg. In other words, if you select .jpg choose Very High or Maximum from the drop down below that selection. If you select .gif, choose 256 from the drop down to the right that is labeled “Colors”. Then you can compare “apples to apples”, a great looking GIF to a great looking JPG. This is usually enough to help you figure out which file type you want. One will look crisp in the preview window and one will look fuzzy. (If they both look great, look at the bottom left corner of the preview screen as you go back and forth between JPG and GIF, and you can choose the option with the smallest file size because it will load faster.)
The reason I suggest starting with a high file size is because it is estimated that 60-70% of US home internet users are on broadband internet connections. GONE are the days of web pages loading so slowly that your viewers wait 25 seconds for one image to appear. (Source: Nielsen//NetRatings)
Let’s look at the JPG and GIF screens individually so you can decide on the settings for your saved file.
SAVE AS JPG FOR WEBA: Assuming you have already selected JPG here… B & D - Quality: Determines the level of compression. The higher the Quality setting, the more detail is preserved. A high Quality setting results in a larger file size. You can view the optimized image at several quality settings to determine the best balance of quality and file size. If the image looks just as good at a quality of 60 as it does at 90, the file saved at 60 will load faster.
Optimized: Creates an enhanced .jpg with a slightly smaller file size. The Optimized .jpg format is recommended for maximum file compression; however, some older browsers do not support this feature.
Progressive: The image is displayed progressively online. Viewers see a low-resolution version of the image before it downloads completely. The Progressive option requires use of the Optimized JPEG format. Note: Progressive JPEGs are not supported by some browsers.
Blur: Specifies the amount of blur to apply to the image. This option applies an effect identical to that of the Gaussian Blur filter and allows the file to be compressed more, resulting in a smaller file size. A setting of 0.1 to 0.5 is recommended.
ICC Profile: Preserves the ICC profile of the artwork with the file. Some browsers use ICC profiles for color correction. This option is available only after you saved an image with an ICC profile—it is not available for unsaved images.
Matte: If your file has a transparent background, this specifies a fill color for those pixels. Click the Matte color swatch to select a color in the color picker, or select an option from the Matte menu: Eyedropper (to use the color in the eyedropper sample box), White, Black, or Other (to use the color picker). Pixels that were fully transparent in the original image are filled with the selected color; pixels that were partially transparent in the original image are blended with the selected color.
SAVE AS GIF FOR WEB

A: Assuming you have already selected GIF here…
B: Specifies a method for generating the color lookup table and the number of colors you want in the color lookup table. You can select one of the following color reduction methods:
Perceptual: Creates a custom color table by giving priority to colors for which the human eye has greater sensitivity.
Selective: Creates a color table similar to the Perceptual color table, but favoring broad areas of color and the preservation of WEB colors. This color table usually produces images with the greatest color integrity.
Adaptive: Creates a custom color table by sampling colors from the predominant spectrum in the image. For example, an image with only the colors green and blue produces a color table made primarily of greens and blues. Most images concentrate colors in particular areas of the spectrum.
Restrictive (Web): Also called the web-safe palette. Uses the standard 216color color table common to the Windows and Mac OS 8bit (256color) palettes. This option ensures that no browser dither is applied to colors when the image is displayed using 8bit color. Using the web palette can create larger files, and is recommended only when avoiding browser dither is a high priority.
Custom: Uses a color palette that is created or modified by the user. If you open an existing GIF or PNG8 file, it will have a custom color palette.
C: Dithering Method and Dither: Dithering refers to the method of simulating colors not available in the color display system of your computer. A higher dithering percentage creates the appearance of more colors and more detail in an image, but can also increase the file size. For optimal compression, use the lowest percentage of dither that provides the color detail you require. Images with primarily solid colors may work well with no dither. Images with gradients may require dithering to prevent color banding. Honestly, I think I have strayed from the default on this 2x in 4 years.
You can select one of the following dithering methods:
Diffusion: The dither effects are diffused across adjacent pixels. Applies a random pattern that is usually less noticeable than Pattern dither.
Pattern: Applies a halftone-like square pattern to simulate any colors not in the color table.
Noise: Applies a random pattern similar to the Diffusion dither method, but without diffusing the pattern across adjacent pixels. No seams appear with the Noise dither method.
E: Lossy: Reduces file size by selectively discarding data. A higher Lossy setting results in more data being discarded. You can often apply a Lossy value of 5–10, and sometimes up to 50, without degrading the image. The Lossy option can reduce file size by 5% to 40%.
Note: You can NOT use the Lossy option with the Interlaced option or with Noise or Pattern Dither algorithms.
F. Transparency and Matte: Determines how transparent pixels in the image are optimized.
To make fully transparent pixels transparent and blend partially transparent pixels with a color, select Transparency and select a matte color.
To fill fully transparent pixels with a color and blend partially transparent pixels with the same color, select a matte color and deselect Transparency.
To select a matte color, click the Matte color swatch and select a color in the color picker. Alternatively, select an option from the Matte menu: Eyedropper (to use the color in the eyedropper sample box), White, Black, or Other (to use the color picker).
G. Interlace: Displays a low-resolution version of the image in a browser while the full image file is downloading. Interlacing can make downloading time seem shorter and can assure viewers that downloading is in progress, however interlacing also increases file size and is not needed in most cases.
H. Web Snap: Specifies a tolerance level for shifting colors to the closest web palette equivalents (and prevent the colors from dithering in a browser). A higher value shifts more colors.
I. Color Table: The maximum number of colors supported by a .gif is 256. As you change the desired number of colors saved with your file on the “Colors” drop down, the swatches of the colors being saved appear in the Color Table. You’ll find that line art with few colors does not need to be saved with 256 colors. You can roll your mouse over a color swatch and see more information about that swatch.
Last but not least is the animation player. This is used to preview the settings of an animated gif.
The final step in saving your image is to click “Save” at the top of the Save for Web dialogue box. Then navigate to where you would like the file saved and click Save again.
If there are additional areas of the Save for Web dialogue box you need assistance with, please comment and I’m happy to help you out.