I won't go into a lot of details in Photoshop in this lesson, but you can learn everything you would ever want to know about Photoshop in other Total Training videos. What I will show you is that once you have got that image reduced, you can easily use Photoshop, Save for Web option to optimize this for the Internet. If you are already using Fireworks, you can get to a very similar dialog by choosing File>Export.

One of the cool things about this dialog is that you can view four versions of your image, two versions of your image, the Optimized, or the Original. Let's start with two just so you get an idea of what's going on here.

This is my original image, its 571K in its original TIFF version. If I were to save it as a JPEG, I could quickly get it down to 24K; looks like it's compressed at 50%, but I would lose that transparent background, because JPEG doesn't support transparency. I also would not be using the best format for this image. Because this image only uses a few colors, like most cartoons and logos and other line art, it's going to be best saved as either a GIF or PNG file.

Let's just go to GIF so you can see how this works. Immediately when I get to GIF my transparency comes back, but you can turn that off on a GIF if you want to create a GIF without transparency; just make sure this is checked if you want to preserve transparency.

Notice too that as soon as I chose GIF I got this down to 24K, even without making any other changes. That's because the GIF format only supports 256 colors. So as soon as I chose GIF as the format for this image, I reduced it to 256 colors. But if you look at this image, you realize, there really aren't 256 colors being used in this image; at least not so you would notice. The more I reduce the colors in this image, the smaller I can get the file size.

So let's try taking it down to 64 colors. Now, you see I am using many fewer colors in this image, but the overall look of the image itself hasn't changed that much. But look at this. Now I am down to 16K.

Let me go back to that 4-Up option so we can try a couple of other changes. If I click on this one, now I make it the active image, and I could take this down; its already down to 32, and you see now at 64 colors, I have 16K, at 32 colors, I got down to 13K. Let's select this one and let's go down to 2 colors. I got all the way down to 2K, but look what happened to my image. Okay, too much of a good thing is not a good thing anymore.

So the ultimate thing to keep in mind as you are trying to optimize images for the web is that you want to reduce colors in a GIF or PNG file as much as you can stand and still have the image look as good as possible on the web. So if I look at this one I could say, at 13K, I have limited the colors to 32, but I still have a pretty good looking image, I think I can live with how this one appears. I think 13 K is a reasonable file size for an image like this. But at 2 colors, it's not worth it just to get down to 2K. At 64 colors, I am still making my user download more than they need to because it looks okay to me at 32.

So whichever one you think looks best and you can live with in terms of file size, you should select and make sure its the active one when you are ready to export it. When you are finished with all the settings, just choose Save, and notice now I have the option to save it wherever I want on my hard drive. I am going to go ahead and save it into this Lesson 04 folder. It's song-bird.gif automatically being saved as a GIF now. So it's not going to overwrite or replace my original image. This is another thing I really love about the Save for Web option in Photoshop.

So when I save this, Photoshop closes out of that dialog, saves the copy of that file as a GIF and returns me to my original TIFF image, which we resized at the beginning of this lesson. So let's go ahead and save the resized version, in case we ever want to come back to it and work with the origin version in its new size.

So I am going to choose Save As, and you see now I am saving a copy of my TIFF. I am going to call this song-bird350, just to remind myself this is the one I sized to 350 pixels wide.

Let's close out of that and let's go to Dreamweaver now and set up a page where we can insert this image and see how its going to look in the new GIF format.