So let's go ahead and save and close out of this file, and let's go back to Photoshop. We are done with our song-bird, you can go ahead and save that if you want. Now let's look at what you should do when you have a photograph and you want to save it as a JPEG.
I have included a photograph in your lesson file that you can follow along; again, you will find that in Lesson 04, Part 1, its called owl.tif. Anytime you are working with a photograph like this, where you have millions of colors, or if you are using gradients, anytime you have lots of variations of color in one image, JPEG is going to be your best option for the web.
The process of saving it is very similar, but there are a few differences along the way. By the way, I photographed this owl in Northern California, at a really wonderful nature preserve, where a friend of mine is trying to nurse animals like this back to health. As you can see this one is definitely on the mend.
I am going to choose Save for Web, and just like we did with the GIF, you can use the tools over here to; if you have the Hand Tool selected, you can move the image around to better see what you are doing. You can apply different settings to each of the four Previews, or you can switch it to 2 if you prefer to see a bigger version of the image.
So I know that this is a photograph and I want it to be saved as a JPEG. When you work with JPEGs, instead of reducing the number of colors, like you did with the GIF, you are going to use Compression to make the file size smaller. You can see right away that just by making this a JPEG instead of a TIFF, I have reduced it from 537K over here, to 42K over here. But I can reduce it even further if I apply more Compression.
The way it works here, this Quality setting, the smaller the number, the more compression. So if I take this down to 30, you will see this number drops much more; now its 13K, but the more you compress the image, the more you risk that you start to get these really jagged edges and you lose all of the definition and the details in the face of this owl.
So I am going to look for, let's say, 60%, so that I can preserve a fair amount of quality but still get the file size down below 30K. So just like we saw with GIFs, once you get all of these settings the way you want them, you can simply choose Save. Now Photoshop is letting me decide where I want to save this file. I am going to go ahead and save it into my photo tricks file, into my images folder; let's call this owl.jpeg.
So now let's switch back over to Dreamweaver and let's add this image to a page. I am just going to create another new blank file, Save this one; let's call it owls. To insert this picture, now, since we have it right here, you can actually drag an image from the Files Panel right onto the page, and it's a very easy way to insert images. Now I can Save the page
Transcription by:
Scribe4you Transcription Services