Learn about optimizing Images for the Web in this Adobe Dreamweaver CS3 Essentials training video series.


More DIY videos at 5min.com

Video Transcription

For most of this lesson I will be working in Adobe Photoshop CS3. If you prefer to use Fireworks, most of the features I will be focusing on work almost exactly the same in both programs. I won't be spending a lot of time on graphics in this Essential Series on Dreamweaver, but I do want to make sure you at least know the basics of preparing GIF, JPEG, and PNG files to use on your web pages. To give you something to work with in this lesson, I have included a couple of image files that have not yet been optimized for the web. You will find those in your Project Files. If you choose Open, you want to go into Part 1, Lesson 04, and let's start with song-bird.tif. By the way, this graphic was created by my uncle Tom, the fabulously talented cartoonist. It's set on a transparent background, and it's an image with limited colors, which means it's going to be best saved as a GIF or a PNG. As you will see in a moment, if you want to save a photograph or an image with millions of colors, you will be better off with a JPEG image. Either way, there are several steps to optimizing an image for the web. The ultimate goal is to make the file size as small as possible. The smaller the file size, the faster it downloads over the Internet. But reducing file size for the web means more than just reducing the physical size, although that also makes a huge difference. So let's start by going into Image Size and changing a couple of elements of the size of this image. We can change the actual physical Width, and let's make this 350 pixels wide. But I want you to also pay attention to the Resolution down here. You may have already heard that the best resolution for the Internet is 72 pixels per inch. That's because any more than that is really wasted on the World Wide Web. Computer monitors can only display 72 pixels per inch. So if you present an image on the Internet that's 200 pixels per inch, like this one, you are requiring your user to download more pixels per inch than they are ever going to see, and that makes your file size bigger than it needs to be. So let's change this image. First, I am going to click Resample, and I am going to set this to 72 pixels per inch. I would click Resample again before I change the file size; I want it 350 pixels of Width. So now I have an image that's 350 pixels wide and only 72 pixels per inch.