Saving for Web using JPEG and GIF

I only use the save for web feature of PhotoShop unless I do something like this web site. I saved 5 files in the .PSD (PhotoShop Document) format, the original background file, and the buttons, both the small and large and the alternate images for the rollover images. I did this so I could change the wording on each of the buttons at a later date. I am glad I did. Otherwise, I only save these images in a web format. These next two lessons will highlight how to save files for the web to use in your site.

Lesson one is for PhotoShop, notice the [PS] beside the heading of the file. This tells you to do the exercise in PhotoShop and not ImageReady. Note the view you see when you click the save for web. You can see 2 images or 4 images. Sometimes it takes quite a long time to see the images if you have them up as 4 files, but you can change the formatting of the files so you can see either or all formats like the image below.

Notice the image above of the class button. You see the original button in the .psd format along with a JPEG format, png format and the GIF format of the button. Examine the file sizes of each. I chose to use the JPEG format to save all of the buttons because I didn't need the transparency for anything and the file size was smaller. Also notice the information included with the format. 2 sec @ 28.8Kbps means that it will take 2 seconds to download the image in a browser with a connection speed of 28,800 bits per second. This is handy when you are trying to make your web pages load quickly. You can experiment with these sizes by changing options in each file format.

Complete these two labs and return to the web page when you are finished. Note the more important sections on page 43 and 44 about the window size and different color tables associated with each file. Pages 46 - 49 highlight this interface screen.